Além da performance envolvida (`getElementById` é mais performático, irei citar teste mais abaixo) podemos considerar:

**QuerySelector**


A vantagem de seu uso, ao contrário de `document.getElementById`,  `document.querySelector` pode retornar classes, além disso, é possível usar `seletores` `CSS`, o que não é possível fazer com o `getElementById`.


Exemplo:

`document.querySelector("#element a[target]");`

Ou, que tal selecionar vários elementos de uma só vez?

`document.querySelector("#element1, #element2, #element3").style.backgroundColor = "blue"';`


**getElementById**

O mesmo é um pouco mais performático do que o `querySelector` e pode ser visto nesse teste [aqui](https://esbench.com/bench/57bdc462db965b9a00965c70) e nesse [aqui](https://jsperf.com/getelementbyid-vs-queryselector-vs-queryselector-by-id) também.  

Acredito que o seu uso deve ser feito sempre que for preciso selecionar um elemento pelo `id`, uma seleção como o exemplo abaixo, considero inviável pelo fato de existir uma função específica para buscas por `identificadores`.

Exemplo inviável :

`document.querySelector("[id=elemento]");`

**Conclusão**

Se precisas selecionar apenas um elemento pelo `identificador`, é mais viável utlizar `document.getElementById` pois o mesmo é específico para essa finalidade, caso precise usar uma seleção mais precisa/avançada, use `document.querySelector` pelo fato de ter a liberdade de utilizar seletores `CSS` e também ter o poder de selecionar mais de um `elemento`, o que é uma grande vantagem.