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