前端效能優化利器:Chrome Timeline學習及實踐
Timeline
Chrome相信是絕大部分前端工程師的基礎開發除錯環境,正所謂,工欲善其事必先利其器,當然這裡說的不是打磨Chrome,說的是怎麼用好Chrome。
基礎介紹
在Chrome裡開啟(滑鼠右鍵選擇檢查/Mac下CMD
+option
+i
)開發介面,如上圖。簡單介紹一下各個tab對應的作用:
- Element:頁面元素的選定,實時修改css樣式。
- Console:檢視程式輸出資訊。
- Sources:頁面的所有資源(HTML文件,js,css,圖片)。
- Network:按時間順序展示了頁面載入過程及後續過程的所有網路請求。
- Timeline:最為強大的工具,按時間順序展示頁面載入過程及後續過程的網路請求、頁面渲染過程、JS執行時長、頁面幀率、CPU/GPU使用情況等。
- Profiles:監控CPU使用情況,記憶體分配情況等,深入分析階段會用到。
- Application:以前好像叫Resource,改名了,裡面包含service worker,storage,cache相關資訊。
- Security:安全相關吧,很少接觸,望大神補充。
- Audits:效能優化相關,chrome會重新載入頁面並進行評估和給出意見(gzip,快取等)
- Adblock是自己裝的去廣告外掛,請忽略。
主角出場
上面說的一些相信大家在開發的過程中都非常熟悉(不熟悉的同學自己先去把各個tab點一遍吧,紙上得來終覺淺),下面重點講一下Timeline。
先上學習資料:
直接上圖(在timeline下重新整理頁面可得):
- 綠色框:監測選項(網路,js執行,截圖,記憶體,渲染)
- 黃色框:監測內容,依次是FPS,CPU,螢幕截圖,網路請求,js執行詳情
- 黑色框:選中區域的詳情
效能優化
工具終究是為需求服務的,我們的需求是效能優化,那麼什麼是效能優化,效能優化對初學者來說比較抽象,概念也比較廣泛,這裡轉換概念成確保使用者體驗,使用者體驗也不夠具體,我們轉換成,避免出現使用者體驗不好的情況,那就是卡。
卡有兩種,一種是頁面載入慢(主要原因在網路上),看能不能減少載入(壓縮,GZIP,快取,預載入/只加載當前頁面資源),另一種是頁面幀率低(低於60FPS),會在視覺上有卡頓,從網上找了個DEMO。
基於前面的分析,效能優化在於兩點:
1,在timeline中觀測頁面資源載入情況(時長,順序),降低頁面載入時長。
2,在timeline中觀測FPS情況(由上圖可知,變紅部分是幀率較低,是需要重點優化的地方),這個時候觀測底下的JS執行耗時,能分析出哪部分耗時過長,導致幀率下降。
實踐
基本原理和操作方式在前面都提及了,這裡說說我最近做的一個小優化。
基於timeline的資料,在某一小段我發現:
請注意紅色框的內容,Chrome提醒我強制迴流會有效能問題,上面那個get innerHeight也引起了我的注意,第一個想法是,因為設定了元素高度造成了迴流?
果然:
關於這個什麼時候設定高度會導致recalculate styles,我寫了個DEMO:具體分析寫在了程式碼裡面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHeight cause recalculate style</title>
</head>
<body>
<section id="section">
<header>結論</header>
<ul>
<li>console.log會耗費效能(與列印的內容多少有關),產品上儘量去除</li>
<li>監聽window.onload會耗費效能</li>
<li>獲取innerHeight不會導致recalculate</li>
<li>頁面渲染完成前設定height會導致recalculate</li>
<li>頁面渲染完成後設定height會導致recalculate</li>
</ul>
<footer>end</footer>
</section>
<script>
//js會阻塞頁面載入,所以下面的指令碼不會導致recalculate
var section = document.querySelector("#section");
var height = window.innerHeight;
section.style.height = height + "px";
//下面指令碼執行時頁面已渲染完成,再次改變為不同的height會到導致recalculate
setTimeout(function() {
var section = document.querySelector("#section");
var height = window.innerHeight;
section.style.height = height + 20 + "px";
},1000)
</script>
</body>
</html>
接下來的事情就很簡單了,我只要在頁面渲染過程中就指定元件高度,而不是在元件載入完成(頁面已經渲染完)再指定元件高度,就不會導致recalculate了。
最近
上面的東西都比較淺顯,但深入下去也是深不見底的,想寫的東西還很多,暫且當做拋磚引玉。
最近工作經驗豐富的同事聊起了前端天花板的問題,我也在思考自己兩三年的職業規劃,目前的看法是,如果保持好奇心和耐心,可以學習,可以深入的東西很多吧。其實想來這些都比較實在,說點虛的吧。
我還是比較關心自己能創造多大價值,能多大程度上推進社會發展。
“少年,要加油呀。”