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。
先上學習資料：
- 使用Chrome DevTools的Timeline和Profiles提高Web應用程序的性能(譯文，年代較遠，不過分析思路可參考)
- Chrome開發者文檔
- 知乎：chrome裏的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了。
最近
上面的東西都比較淺顯，但深入下去也是深不見底的，想寫的東西還很多，暫且當做拋磚引玉。
最近工作經驗豐富的同事聊起了前端天花板的問題，我也在思考自己兩三年的職業規劃，目前的看法是，如果保持好奇心和耐心，可以學習，可以深入的東西很多吧。其實想來這些都比較實在，說點虛的吧。
我還是比較關心自己能創造多大價值，能多大程度上推進社會發展。
“少年，要加油呀。”