聲明一點，工作環(huán)境是Chrome瀏覽器

1.頁面滾動是高頻率的動作，在滾動的時候，瀏覽器是怎么來渲染頁面，怎么來查看影響滾動流暢的原因。

2.網(wǎng)絡(luò)上有很多說影響滾動流暢的原因，google，百度都可以搜到。

下面，先說一下瀏覽器渲染的分層和分塊。

分層，分塊是和css相關(guān)。

? ? 先上兩張?zhí)熵埛謱拥慕貓D

? ? 天貓首頁分層截圖

在來一張?zhí)熵埳唐妨斜眄撁娴姆謱咏貓D

天貓首頁分層很少，列表頁面除了圖片單獨處理，基本上也就文檔和單獨的搜索框分層。

具體網(wǎng)頁分層原理可以看這篇文章?Chromium網(wǎng)頁渲染機制簡要介紹

瀏覽器渲染對應(yīng)到滾動性能，需要用performance來分析了。

依舊先來一張圖片

滾動到時候，頁面主線程的執(zhí)行順序如上圖Event log，滾動事件，事件內(nèi)到業(yè)務(wù)代碼，更新層級書，合成新的頁面。按照一幀16至17ms的時間算，代表這個時間段需要完成事件執(zhí)行，圖層合并。如果總時間超出，就出現(xiàn)我們長聽的掉幀。

上面兩張圖對比一下，會發(fā)現(xiàn)update layer tree和 composite layers的時間變長了，原因是因為第一張圖使用的是body滾動沒有添加任何樣式，第二張?zhí)砑恿薿verflow:scroll。

另外就是setTimeout等也會占用主線程的時間