.append()、.insertAdjacentHTML()、.replaceWith() 誰最快

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

<option> 已經是 HTMLOptionElement,array 就是 [],不是 HTMLOptionsCollectionNodeList 這種類 array。

照慣例,有 16ms 的時間。

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

jQuery 用的是 3.6.0。

.append()

MDN / jQuery / Can I use...

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

 Firefox 88Chrome 91Edge 91
element.append()18ms19ms21ms
$(element).append()47ms70ms99ms

.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 88Chrome 91Edge 91
element.innerHTML12ms33ms38ms
element.insertAdjacentHTML()26ms27ms48ms
$(element).append()39ms72ms114ms

 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 88Chrome 91Edge 91
element.replaceWith()4ms1ms2ms
$(element).replaceWith()5ms5ms6ms

All Pass 了。

放下吧!

放下你手中的 jQuery 吧!

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

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

大家都在 async/await,你還在 $.ajax() 嗎?