摘要：還會有一個性能上的問題就是當(dāng)頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內(nèi)，頁面也會有卡頓現(xiàn)象，這里采取了一個優(yōu)化策略即列表較長時數(shù)量較多時，在觸發(fā)下拉刷新的時機(jī)時將頁面視窗之外的元素隱藏或者存放在里面。

在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內(nèi)觸發(fā)，將該div設(shè)置成overflow:scroll/auto;來形成div內(nèi)部的滾動，這時我們監(jiān)聽div的onscroll發(fā)現(xiàn)觸發(fā)的時機(jī)區(qū)分android和ios兩種情況，具體可以看下面表格:

| 機(jī)型(內(nèi)核) | body滾動 | 局部滾動 |
| :-: | :-: | :-: |
| ios | 不能實時觸發(fā) | 不能實時觸發(fā) |
| android | 實時觸發(fā)| 實時觸發(fā) |
| ios wkwebview內(nèi)核 | 實時觸發(fā)| 實時觸發(fā) |

不能實時觸發(fā)表現(xiàn)：只在手指觸摸的屏幕上一直滑動時和滾動停止的那一刻才觸發(fā)。

正常的滾動：我們平時使用的scroll，包括上面講的滾動都屬于正常滾動，利用瀏覽器自身提供的滾動條來實現(xiàn)滾動，底層是由瀏覽器內(nèi)核控制。

模擬滾動：最典型的例子就是iscroll了，原理一般有兩種：

監(jiān)聽滾動元素的touchmove事件，當(dāng)事件觸發(fā)時修改元素的transform屬性來實現(xiàn)元素的位移，讓手指離開時觸發(fā)touchend事件，然后采用requestanimationframe來在一個線型函數(shù)下不斷的修改元素的transform來實現(xiàn)手指離開時的一段慣性滾動距離。

監(jiān)聽滾動元素的touchmove事件，當(dāng)事件觸發(fā)時修改元素的transform屬性來實現(xiàn)元素的位移，讓手指離開時觸發(fā)touchend事件，然后給元素一個css的animation，并設(shè)置好duration和function來實現(xiàn)手指離開時的一段慣性距離。

第一種方案由于慣性滾動的時機(jī)時由js自己控制所以可以拿到滾動觸發(fā)階段的scrolltop值，并且滾動的回調(diào)函數(shù)onscroll在滾動的階段都會觸發(fā)。第二種方案相比第一種要劣勢一些，區(qū)別在于手指離開時，采用的時css的animation來實現(xiàn)慣性滾動，所以無法直接觸發(fā)慣性滾動過程中的onscroll事件，只有在animation結(jié)束時才可以借助animationend來獲取到事件，當(dāng)然也有一種方法可以實時獲取滾動事件，也是借助于requestanimationframe來不斷的去讀取滾動元素的transform來拿到scrolltop同時觸發(fā)onscroll回調(diào)。

模擬滾動的fps值波動較大，這樣滾動起來會有明顯的卡頓感覺，各位體驗的時候如果滾動超過10屏之后就可以明顯感覺到兩著的區(qū)別。

在使用模擬滾動時，瀏覽器在js層面會消耗更多的性能去改變dom元素的位置，在dom復(fù)雜層級深的頁面更為高，所以在長列表滾動時還要使用正常滾動更好。

方案1：借助iscroll的原理，整個頁面使用模擬滾動，將下拉刷新元素放在頂部，當(dāng)頁面滾動到頂部下拉時，下拉刷新元素隨著頁面的滾動出現(xiàn)，當(dāng)手指離開時收回，此方案實現(xiàn)起來較為簡單直接借助iscoll即可，但是使用了模擬滾動之后在正常的列表滾動時性能上不如正常滾動。

方案2：頁面使用正常滾動，將下拉刷新元素放置在頂部top值為負(fù)值（正常情況下不可見），當(dāng)頁面處于頂部時下拉，這時監(jiān)聽touchmove事件，修改scrollcontent的tranlateY值，同時修改下拉刷新元素的tranlateY值，將兩者同時位移來將下拉刷新元素顯示出來，手指離開時（touchend）收回，這種方案滿足了在正常列表滾動時使用原生的滾動節(jié)省性能，只在下拉刷新時使用模擬滾動來實現(xiàn)效果。

方案3：方案2的改良版，唯一不同是將下拉刷新元素和scrollcontent放在一個div里，將下拉刷新元素的margintop設(shè)為負(fù)值，在下拉刷新時，只需要修改scrollcontent一個元素的tranlateY值即可實現(xiàn)下拉，在性能上要比方案2好。

還會有一個性能上的問題就是：當(dāng)頁面的列表過長，dom元素過多時，在模擬滾動，下拉刷新這段時間內(nèi)，頁面也會有卡頓現(xiàn)象，這里采取了一個優(yōu)化策略即：

列表較長時dom數(shù)量較多時，在觸發(fā)下拉刷新的時機(jī)時將頁面視窗之外的dom元素隱藏或者存放在fragment里面。

在刷新完成之后手指離開（touchend）時將隱藏的元素顯示出來。

需要注意的是，隱藏和顯示視窗外的元素這個操作在下拉刷新時只會執(zhí)行一次，并且只有在下拉刷新時才會執(zhí)行。

下面介紹如何去優(yōu)化scroll事件的觸發(fā)，避免scroll事件過度消耗資源：

scroll 事件本身會觸發(fā)頁面的重新渲染，同時 scroll 事件的 handler 又會被高頻度的觸發(fā), 因此事件的 handler 內(nèi)部不應(yīng)該有復(fù)雜操作，例如 DOM 操作就不應(yīng)該放在事件處理中。
特別是針對此類高頻度觸發(fā)事件問題（例如頁面 scroll ，屏幕 resize，監(jiān)聽用戶輸入等）。

防抖技術(shù)即是可以把多個順序地調(diào)用合并成一次，也就是在一定時間內(nèi)，規(guī)定事件被觸發(fā)的次數(shù)。

防抖函數(shù)確實不錯，但是也存在問題，譬如圖片的懶加載，我希望在下滑過程中圖片不斷的被加載出來，而不是只有當(dāng)我停止下滑時候，圖片才被加載出來。又或者下滑時候的數(shù)據(jù)的 ajax 請求加載也是同理。這個時候，我們希望即使頁面在不斷被滾動，但是滾動 handler 也可以以一定的頻率被觸發(fā)（譬如 250ms 觸發(fā)一次），這類場景，就要用到另一種技巧，稱為節(jié)流函數(shù)（throttling）。

節(jié)流函數(shù)，只允許一個函數(shù)在 X 毫秒內(nèi)執(zhí)行一次。

與防抖相比，節(jié)流函數(shù)最主要的不同在于它保證在 X 毫秒內(nèi)至少執(zhí)行一次我們希望觸發(fā)的事件 handler。

關(guān)于防抖動與節(jié)流，我的博客文章也有提及。

如果頁面只需要兼容高版本瀏覽器或應(yīng)用在移動端，又或者頁面需要追求高精度的效果，那么可以使用瀏覽器的原生方法 rAF（requestAnimationFrame）。

window.requestAnimationFrame() 這個方法是用來在頁面重繪之前，通知瀏覽器調(diào)用一個指定的函數(shù)。這個方法接受一個函數(shù)為參，該函數(shù)會在重繪前調(diào)用。

rAF 常用于 web 動畫的制作，用于準(zhǔn)確控制頁面的幀刷新渲染，讓動畫效果更加流暢，當(dāng)然它的作用不僅僅局限于動畫制作，我們可以利用它的特性將它視為一個定時器。（當(dāng)然它不是定時器）

通常來說，rAF 被調(diào)用的頻率是每秒 60 次，也就是 1000/60 ，觸發(fā)頻率大概是 16.7ms 。（當(dāng)執(zhí)行復(fù)雜操作時，當(dāng)它發(fā)現(xiàn)無法維持 60fps 的頻率時，它會把頻率降低到 30fps 來保持幀數(shù)的穩(wěn)定。）

var ticking = false; // rAF 觸發(fā)鎖
 
function onScroll(){
  if(!ticking) {
    requestAnimationFrame(realFunc);
    ticking = true;
  }
}
 
function realFunc(){
    // do something...
    console.log("Success");
    ticking = false;
}
// 滾動事件監(jiān)聽
window.addEventListener("scroll", onScroll, false);

實現(xiàn)以16.7ms 觸發(fā)一次 handler，降低了可控性，但是提升了性能和精確度。

從本質(zhì)上而言，我們應(yīng)該盡量去精簡 scroll 事件的 handler ，將一些變量的初始化、不依賴于滾動位置變化的計算等都應(yīng)當(dāng)在 scroll 事件外提前就緒。

輸入事件處理函數(shù)，比如 scroll / touch 事件的處理，都會在 requestAnimationFrame 之前被調(diào)用執(zhí)行。

因此，如果你在 scroll 事件的處理函數(shù)中做了修改樣式屬性的操作，那么這些操作會被瀏覽器暫存起來。然后在調(diào)用 requestAnimationFrame 的時候，如果你在一開始做了讀取樣式屬性的操作，那么這將會導(dǎo)致觸發(fā)瀏覽器的強(qiáng)制同步布局。

pointer-events 是一個 CSS 屬性，可以有多個不同的值,大概的意思就是禁止鼠標(biāo)行為，應(yīng)用了該屬性后，譬如鼠標(biāo)點擊，hover 等功能都將失效，即是元素不會成為鼠標(biāo)事件的 target。

pointer-events: none 可用來提高滾動時的幀頻。的確，當(dāng)滾動時，鼠標(biāo)懸停在某些元素上，則觸發(fā)其上的 hover 效果，然而這些影響通常不被用戶注意，并多半導(dǎo)致滾動出現(xiàn)問題。對 body 元素應(yīng)用 pointer-events: none ，禁用了包括 hover 在內(nèi)的鼠標(biāo)事件，從而提高滾動性能。

大概的做法就是在頁面滾動的時候, 給 添加上 .disable-hover 樣式，那么在滾動停止之前, 所有鼠標(biāo)事件都將被禁止。當(dāng)滾動結(jié)束之后，再移除該屬性。

// css 代碼
.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}
// js 代碼
var body = document.body,
    timer;
window.addEventListener("scroll", function() {
  clearTimeout(timer);
  if(!body.classList.contains("disable-hover")) {
    body.classList.add("disable-hover")
  }
  timer = setTimeout(function(){
    body.classList.remove("disable-hover")
  },500);
}, false);

參考 移動 Web 的滾動,高性能滾動及頁面渲染優(yōu)化