不知不覺，春節(jié)就過完了，還沒來得及好好享受就沒了。好想來一場說走就走的旅行??，不吹水了，直接進(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）是可以省略的。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式