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