.append()、.insertAdjacentHTML()、.replaceWith() 誰最快 ✎ Ken's Blog

用 JavaScript，將 5000 個 <option>，放到 <select> 裡面，如何做最快?

<option> 已經是 HTMLOptionElement，array 就是 []，不是 HTMLOptionsCollection、NodeList 這種類 array。

照慣例，有 16ms 的時間。

所以，在 Firefox、Chrome、Edge ，分別用 Vanilla 和 jQuery 跑跑看，快會有多快，慢的會有多慢，能在 16ms 裡面完成嗎？

jQuery 用的是 3.6.0。

.append()


document.querySelector('#select1').append(...op1);
$('#select2').append(op2);

	Firefox 88	Chrome 91	Edge 91
element.append()	18ms	19ms	21ms
$(element).append()	47ms	70ms	99ms

.innerHTML 和 .insertAdjacentHTML()

MDN / jQuery / Can I use...

MDN / jQuery / Can I use...

jQuery 最接近的指令，一樣是 .append()


document.querySelector('#select1').innerHTML = op1html;
document.querySelector('#select3').insertAdjacentHTML('afterbegin', op3html);
$('#select2').append(op2html);

	Firefox 88	Chrome 91	Edge 91
element.innerHTML	12ms	33ms	38ms
element.insertAdjacentHTML()	26ms	27ms	48ms
$(element).append()	39ms	72ms	114ms

Firefox 的 .innerHTML 速度頗讓人意外，也是第一個進入 16ms 門檻的。

.replaceWith()

MDN / jQuery / Can I use...

只計執行 .replaceWith() 的時間，前面的準備時間不算。


let s1 = document.querySelector('#select1').cloneNode();
s1.append(...op1);
document.querySelector('#select1').replaceWith(s1);
  
let s2 = $('#select2').clone();
s2.append(op2);
$('#select2').replaceWith(s2);

	Firefox 88	Chrome 91	Edge 91
element.replaceWith()	4ms	1ms	2ms
$(element).replaceWith()	5ms	5ms	6ms

All Pass 了。

放下吧！

放下你手中的 jQuery 吧！

你覺得你是為了瀏覽器之間相容性的問題，才用 jQuery，舉個例子吧！說說看，他幫你解決了哪一個在 Firefox、Chrome、Edge 之間不相容的問題。

以目前來看，jQuery 只是把本來就有的東西，改用更糟糕的方式呈現，例如 .append()，他還支援 IE9，說起來，這完全不能算是優點。

大家都在 async/await，你還在 $.ajax() 嗎？