element.getBoundingClientRect

判斷指定元素相對於頁面可視窗口的位置信息,通常結合windows.onScroll方法使用，當element.getBoundingClientRect.Top<=document.documentElement.clientHeight時表示該元素在可視範圍內。

詳細介紹

IntersectionObserver對象

異步監聽目標元素與其祖先或視窗的位置信息，通常用於替代element.getBoundingClientRect+window.scroll的方案。

詳細介紹

window.requestAnimationFrame

將多個可能會導致回流或重繪的操作放在一起一次性執行，避免滾動或操作頁面時頁面出現卡頓和空白，該方法免除了開發者自己編寫“函數防抖”或“函數節流”的麻煩。

詳細介紹

“函數防抖”或“函數節流”介紹

element.scrollIntoViewIfNeeded(opt_center)

把某個元素滾動到可視區域，例如手機頁面底部的表單輸入框獲取焦點時，軟鍵盤會遮擋元素。這時就應該使用該特性。

DocumentFragment對象

DocumentFragment 接口表示一個沒有父級文件的最小文檔對象，它不是真實 DOM 樹的其中一部分，它的變化不會引起 DOM 樹的重新渲染操作(reflow) ，因此不會導致性能問題。

當我們需要對dom進行頻繁的寫入操作時，可以用document.createDocumentFragment()創建一個對象，在此對象上進行添加(append)或被插入(inserted)操作，然後再插入真實的dom節點。因為所有的節點會被一次性插入到文檔中，而這個操作僅發生一個重渲染的操作，可以大大提高性能。

詳細介紹

js滾動及可視區域的相關的操作