前端效能優化利器：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了。
最近
上面的東西都比較淺顯，但深入下去也是深不見底的，想寫的東西還很多，暫且當做拋磚引玉。
最近工作經驗豐富的同事聊起了前端天花板的問題，我也在思考自己兩三年的職業規劃，目前的看法是，如果保持好奇心和耐心，可以學習，可以深入的東西很多吧。其實想來這些都比較實在，說點虛的吧。
我還是比較關心自己能創造多大價值，能多大程度上推進社會發展。
“少年，要加油呀。”