關(guān)鍵函數(shù)解釋
1. requestAnimationFrame
與setTimeout相比，requestAnimationFrame最大的優(yōu)勢是由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機(jī)。
如果屏幕刷新率是60Hz,那么回調(diào)函數(shù)就每16.7ms被執(zhí)行一次，如果刷新率是75Hz，那么這個時間間隔就變成了1000/75=13.3ms，換句話說就是，requestAnimationFrame的步伐跟著系統(tǒng)的刷新步伐走。它能保證回調(diào)函數(shù)在屏幕每一次的刷新間隔中只被執(zhí)行一次，這樣就不會引起丟幀現(xiàn)象。
使用方法：
window.requestAnimationFrame(function(){
? ? console.log('由系統(tǒng)來決定回調(diào)函數(shù)的執(zhí)行時機(jī)')
}
2.?DocumentFragment
DocumentFragment ，文獻(xiàn)引用自MDN
DocumentFragment，文檔片段接口，表示一個沒有父級文件的最小文檔對象。它被作為一個輕量版的Document使用，用于存儲已排好版的或尚未打理好格式的XML片段。最大的區(qū)別是因為DocumentFragment不是真實DOM樹的一部分，它的變化不會觸發(fā)DOM樹的（重新渲染) ，且不會導(dǎo)致性能等問題。?
可以使用document.createDocumentFragment方法或者構(gòu)造函數(shù)來創(chuàng)建一個空的DocumentFragment?
從MDN的說明中，我們得知DocumentFragments是DOM節(jié)點，但并不是DOM樹的一部分，可以認(rèn)為是存在內(nèi)存中的，所以將子元素插入到文檔片段時不會引起頁面回流。
使用方法：
let fragment = document.createDocumentFragment();
