Utilizando replaces, em relação a jquery.html vs innerHTML, a segunda opção se mostrou consideravelmente mais rápida em cerca de 29% sobre a primeira. Isso é uma diferença um tanto considerável, sem levar em conta o tempo de carregamento da Jquery, ao contrario do InnerHTML que é nativo de Javascript.
Porém, nesse segundo teste, o innerHTML se mostrou mais lento em relação ao jquery.append e jquery.html.
Mas como assim???
O que acontece aqui é o seguinte, note que no primeiro exemplo o código é escrito da seguinte forma:
var list = document.getElementById('list');
var html = '';
for (var i = 0; i < 1000; i++) {
html += '<div>Test ' + i + '</div>';
}
list.innerHTML = html;
Já na segunda:
var list = document.getElementById('list');
for (var i = 0; i < len; i++) {
list.innerHTML = list.innerHTML + '<div>Test ' + i + '</div>';
}
Ou seja, os dois testes tem finalidades parecidas porém em questão de performance nota-se um numero bem distinto, isso se deve ao acesso do innerHTML na segundo teste ser feito dentro do próprio for, pode parecer algo bobo, mas a cada looping o mesmo é acessado e esse pequeno deslize pode gerar uma lentidão catastrófica.
Agora mais um porem em relação a segurança...
Segundo a MDN: "[...]recomenda-se que você não use o innerHTML quando estiver inserindo texto puro como alternativa, utilize node.textContent. Esse não interpreta o conteúdo passado como HTML, mas em vez disso, insere-o como texto puro."
Esse trecho diz respeito a execução de <script>
e falhas de seguranças no uso do innerHTML (para mais detalhes sugiro que veja o link) e como alternativa sugere-se o uso do node.textContent.
O node.textContent representa o conteúdo do nó do elemento e de seus descendentes e a principal diferença entre ele e o innerHTML é que o primeiro não analisa a HTML como um todo, apenas o textNode fazendo com que o mesmo seja mais performático em relação ao segundo.
Existem diversos outros métodos como: innerText e nodeValue, não falarei detalhadamente de todos para que o conteúdo não fique muito extenso mais com uma breve pesquisa você pode ver o que cada um faz. Bem vamos ao que importa, esse teste, inclui todos os métodos nativos citados testado em elementos diferentes.
Mas, qual usar? O textContent nesse ultimo teste se mostrou mais performática em relação aos demais totalizando média de aproximadamente 15% em comparação as outras formas. Acredito que a melhor forma com base no que foi descrito acima, tanto em relação de segurança quanto a performance é utilizar o mesmo. Outro ponto a levar em consideração e o fato de ser nativo de Javascript.
Em relação a seletores nativos o seletor getElementByID é mais rápidos em relação aos seletores como getElementsByClassName e querySelector segundo esse teste. O Id também ganha no teste de seletores em Jquery nesse teste.
Qual usar? no primeiro teste e nesse terceiro pode-se ver claramente que novamente funcionalidades nativas saem na frente em relação a performance.
Os dois primeiros testes foram retirados do StackOverflow.
Aqui há uma listagem de outros tópicos interessantes em relação a performance em javascript, recomendo como leitura adicional.
Obs.: os valores podem variar em milésimos dependendo da maquina e navegador.