60fps 與設(shè)備刷新率
目前大多數(shù)設(shè)備的屏幕刷新率為 60 次/秒。因此，如果在頁面中有一個(gè)動(dòng)畫或漸變效果，或者用戶正在滾動(dòng)頁面，那么瀏覽器渲染動(dòng)畫或頁面的每一幀的速率也需要跟設(shè)備屏幕的刷新率保持一致。
其中每個(gè)幀的預(yù)算時(shí)間僅比 16 毫秒多一點(diǎn) (1 秒/ 60 = 16.66 毫秒)。但實(shí)際上，瀏覽器有整理工作要做，因此您的所有工作需要在 10 毫秒內(nèi)完成。如果無法符合此預(yù)算，幀率將下降，并且內(nèi)容會(huì)在屏幕上抖動(dòng)。 此現(xiàn)象通常稱為卡頓，會(huì)對用戶體驗(yàn)產(chǎn)生負(fù)面影響。
瀏覽器渲染過程
JavaScript。一般來說，我們會(huì)使用 JavaScript 來實(shí)現(xiàn)一些視覺變化的效果。比如用 jQuery 的 animate 函數(shù)做一個(gè)動(dòng)畫、對一個(gè)數(shù)據(jù)集進(jìn)行排序或者往頁面里添加一些 DOM 元素等。當(dāng)然，除了 JavaScript，還有其他一些常用方法也可以實(shí)現(xiàn)視覺變化效果，比如：CSS Animations、Transitions 和 Web Animation API。
style。此過程是根據(jù)匹配選擇器（例如 .headline 或 .nav > .nav__item）計(jì)算出哪些元素應(yīng)用哪些 CSS 規(guī)則的過程。從中知道規(guī)則之后，將應(yīng)用規(guī)則并計(jì)算每個(gè)元素的最終樣式。
layout(布局)。在知道對一個(gè)元素應(yīng)用哪些規(guī)則之后，瀏覽器即可開始計(jì)算它要占據(jù)的空間大小及其在屏幕的位置。網(wǎng)頁的布局模式意味著一個(gè)元素可能影響其他元素，例如 <body> 元素的寬度一般會(huì)影響其子元素的寬度以及樹中各處的節(jié)點(diǎn)，因此對于瀏覽器來說，布局過程是經(jīng)常發(fā)生的。
paint（繪制）。繪制是填充像素的過程。它涉及繪出文本、顏色、圖像、邊框和陰影，基本上包括元素的每個(gè)可視部分。繪制一般是在多個(gè)表面（通常稱為層）上完成的。
composite(合成)。由于頁面的各部分可能被繪制到多層，由此它們需要按正確順序繪制到屏幕上，以便正確渲染頁面。對于與另一元素重疊的元素來說，這點(diǎn)特別重要，因?yàn)橐粋€(gè)錯(cuò)誤可能使一個(gè)元素錯(cuò)誤地出現(xiàn)在另一個(gè)元素的上層。
管道的每個(gè)部分都有機(jī)會(huì)產(chǎn)生卡頓，因此務(wù)必準(zhǔn)確了解您的代碼觸發(fā)管道的哪些部分。
修改不同元素，瀏覽器需要執(zhí)行的步驟
1. JS / CSS > 樣式 > 布局 > 繪制 > 合成
如果您修改元素的“l(fā)ayout”屬性，也就是改變了元素的幾何屬性（例如寬度、高度、左側(cè)或頂部位置等），那么瀏覽器將必須檢查所有其他元素，然后“自動(dòng)重排”頁面。任何受影響的部分都需要重新繪制，而且最終繪制的元素需進(jìn)行合成。
2. JS / CSS > 樣式 > 繪制 > 合成
如果您修改“paint only”屬性（例如背景圖片、文字顏色或陰影等），即不會(huì)影響頁面布局的屬性，則瀏覽器會(huì)跳過布局，但仍將執(zhí)行繪制。
3. JS / CSS > 樣式 > 合成
如果您更改一個(gè)既不要布局也不要繪制的屬性，則瀏覽器將跳到只執(zhí)行合成。
這個(gè)最后的版本開銷最小，最適合于應(yīng)用生命周期中的高壓力點(diǎn)，例如動(dòng)畫或滾動(dòng)。
