Além da performance envolvida (`getElementById` é um pouco mais performático, irei citar alguns testes 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]");`

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.querySelector("#element a[target]").style.color = 'green';

<!-- language: lang-html -->

    <span id="element"> <a href="#" target="_blank"> link com target </a> </span>

<!-- end snippet -->

Ou uma seleção mais avançada?:

`document.querySelector("#element ul li:nth-child(2)").style.color = "blue";`

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.querySelector("#element ul li:nth-child(2)").style.color = "blue";

<!-- language: lang-html -->

    <div id="element">
        <ul>
            <li> Item 1 </li>
            <li> Item 2 - Alvo </li>
            <li> Item 3 </li>
        </ul>
    </div>

<!-- end snippet -->


Vale lembrar que o `querySelector` irá pegar apenas o primeiro `elemento` que for encontrado no documento.

no exemplo abaixo, apenas no primeiro `item` foi aplicado o `CSS`:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.querySelector('span, p').style.color='lightblue';

<!-- language: lang-html -->

    <span>[span] -  Aqui será aplicado </span> <br>
    <span>[span] -  Aqui não será aplicado </span>  

    <p>[p] -  Aqui não será aplicado </p>

<!-- end snippet -->

Se for preciso realizar a seleção de múltiplos elementos, utilize `querySelectorAll` que irá retornar um objeto `NodeList`. 


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    let obj = document.querySelectorAll('span, p'); 

    console.log("tipo: " + typeof obj);
    console.log("Quantidade: " +obj.length);

    for(let i of obj) {  
        i.style.color= "blue";
    }

<!-- language: lang-html -->

    <span>[span] -  Aqui será aplicado </span> <br>
    <span>[span] -  Aqui também será aplicado </span> 
    <p>[p] -  Aqui também será aplicado </p>

<!-- end snippet -->



**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`, o que é uma grande vantagem.

Nada impede de usares `querySelector` para selecionar um elemento pelo `id`, além do mais, dificilmente uma aplicação sofrerá de baixa performance por conta disso.