實用API

1. requestAnimationFrame

window.requestAnimationFrame() 告訴瀏覽器——你但願執行一個動畫，而且要求瀏覽器在下次重繪以前調用指定的回調函數更新動畫。該方法須要傳入一個回調函數做爲參數，該回調函數會在瀏覽器下一次重繪以前執行。

根據屏幕刷新率來執行的函數，每一幀執行一次。能夠用於JS的動畫，dom的渲染等可能引發卡頓的操做。

var start = null;
var element = document.getElementById('SomeElementYouWantToAnimate');
element.style.position = 'absolute';

function step(timestamp) {
  if (!start) start = timestamp;
  var progress = timestamp - start;
  element.style.left = Math.min(progress / 10, 200) + 'px';
  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);複製代碼

2. intersectionobserver

Intersection Observer API 容許你配置一個回調函數，每當目標( target)元素與設備視窗或者其餘指定元素髮生交集的時候執行。

能夠判斷指定dom當前與視窗的位置，適用場景有內容曝光統計、無限滾動等。

var options = {
    root: document.querySelector('#scrollArea'), 
    rootMargin: '0px', 
    threshold: 1.0
}
var callback = function(entries, observer) { 
    entries.forEach(entry => {
        // 若是出如今可視窗口內，發送埋點
          if (entries[0].isIntersecting) {
            .....
          }
    });
};
var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#listItem');
observer.observe(target);
複製代碼

3.DocumentFragment

DocumentFragment，文檔片斷接口，表示一個沒有父級文件的最小文檔對象。它被做爲一個輕量版的 Document 使用，用於存儲已排好版的或還沒有打理好格式的 XML 片斷。最大的區別是由於 DocumentFragment 不是真實 DOM 樹的一部分，它的變化不會觸發 DOM 樹的 從新渲染，且不會致使性能等問題。

當須要循環構建多個子元素的時候，若是每次循環都插入一次子元素，會觸發dom樹的屢次從新渲染。使用documentFragment能夠在循環的時候先建立虛擬的dom結構，最後一次性插入。

最經常使用的方法是使用文檔片斷做爲參數（例如，任何 Node 接口相似 Node.appendChild 和 Node.insertBefore 的方法），這種狀況下被添加（append）或被插入（inserted）的是片斷的全部子節點, 而非片斷自己。由於全部的節點會被一次插入到文檔中，而這個操做僅發生一個重渲染的操做，而不是每一個節點分別被插入到文檔中，由於後者會發生屢次重渲染的操做。

const list = document.querySelector('#list');
const fruits = ['Apple', 'Orange', 'Banana', 'Melon'];

const fragment = document.createDocumentFragment();

fruits.forEach(fruit => {
  const li = document.createElement('li');
  li.innerHTML = fruit;
  fragment.appendChild(li);
});

list.appendChild(fragment);複製代碼