不知不覺，春節(jié)就過完了，還沒來得及好好享受就沒了。好想來一場說走就走的旅行??，不吹水了，直接進(jìn)入正題。
最近在做一個需求，發(fā)現(xiàn)了薄弱的地方，趁這個好機會深入了解一下，拓寬一下視野～
眾所周知，網(wǎng)頁不僅應(yīng)該被快速加載，同時還應(yīng)該流暢運行，比如快速響應(yīng)的交互，如絲般順滑的動畫……
在實際開發(fā)中如何做到上面所說的效果呢？
1. 確認(rèn)渲染性能的分析標(biāo)準(zhǔn)
2. 準(zhǔn)備尺子去衡量渲染性能標(biāo)準(zhǔn)
3. 對耗時多的地方進(jìn)行優(yōu)化
我們可以粗略的得到下面的優(yōu)化目標(biāo)
第一個是 首屏呈現(xiàn)時間，網(wǎng)上的資料已經(jīng)非常非常多了，壓縮代碼，使用webp圖片，使用sprite，按需加載，“直出”，CDN……
第二個是 16ms 優(yōu)化，本篇重點講16ms的優(yōu)化。
一. 瀏覽器渲染原理介紹
大多數(shù)設(shè)備的刷新頻率是60次/秒，（1000/60 = 16.6ms）也就說是瀏覽器對每一幀畫面的渲染工作要在16ms內(nèi)完成，超出這個時間，頁面的渲染就會出現(xiàn)卡頓現(xiàn)象，影響用戶體驗。
這就是上圖中的<16ms。瀏覽器在一幀里面，會做以下這些動作。 當(dāng)然，有些步驟（比如 layout，paint）是可以省略的。
