前端性能優化知識整理

未完，待續。。。。
**性能優化，利用工具或者明白從哪裏下手去優化前端代碼，大概就是知其然 知其因此然。
工具測量目前的性能，指望達到什麼效果達到什麼樣的效果**

查看性能工具

Chrome瀏覽器開發者工具的Timeline面板
和window.performance。

Chrome瀏覽器開發者工具的Timeline面板

待補充。。。

知其然 ：瀏覽器的渲染過程和原理

前言：
1.性能優化以前要明白 瀏覽器渲染機制和js引擎機制；

可從如下角度來：
1.總體：減小請求 減小量 減小內存佔用
2.代碼層面: 按照規範來寫
3.開發階段和生產階段 對webpack的一些配置
4.用戶層面：白屏 首屏 可操做時間 徹底加載
5.js 層面：：更少的代碼 = 更少的解析/編譯 (parse/compile)+ 更少的傳送 + 更少的解壓縮 http://www.infoq.com/cn/artic...
6.圖片層面： cssspite fontsize base64 預加載 懶加載
7.其餘：遵照雅虎性能優化的14條規則
js>img> css

1、總體

1.減小請求數

1.請求合併：將同一時間須要的js合併，目的是節省dns查找的時間
2.按需加載---（1）單頁應用下的按照路由的須要加載 （2）緩存
3.css sprite base64 iconfont
4.cdn託管
5.延遲加載：圖片的延遲加載：（就是先不設置img的src屬性，等合適的時機（好比滾動、滑動、出如今視窗內等）再把圖片真實url放到img的src屬性上。） js的延遲加載：

2.減小量

1.精簡代碼（tree-shaking）----(1)去除無用的代碼  (2)規範些代碼的方式 (3)外部cdn的引入
2.懶加載 ---（1）路由的懶加載 
3.壓縮 ---（1）webpack 壓縮UglifyJsPlugin；（2）gzip壓縮    (3)圖片壓縮、JPG優化
4.緩存http代碼：---瀏覽器的強緩存（max-age Etag）和協商(弱)緩存（last-modified）    
5.第三方組件---第三方組件做爲外部依賴使用，會被打爆進業務代碼。    
6.按需加載 --- （1）第三方庫和工具的按需加載，如echarts  （2）選擇更優的工具 day.js代替moment （3）可用代碼拆分（Code-splitting）只傳送用戶須要的代碼。

3.內存方面：減小內存的消耗

減小IO操做

1.減小全局變量；
2.減小全局組件；
3.減小dom操做---緩存dom,虛擬dom

2、用戶層面：

1.預加載：preload（在主渲染前進行預加載） 和prefetch（利用空閒時間）,可用webpackde PreLoadWebpackPlugin插件，可

2.白屏 首屏 可操做時間

首屏：
1.使用css內嵌
2.延遲加載圖片

1. 代碼規範：
    css樣式放在頁面前面
    延遲js加載
    避免CSS表達式，避免@import
    減小DOM訪問，使用事件代理

3、代碼層面

1.頁面渲染優化（減小重棑） ---
2.雅虎性能規則14條 ---
3.代碼精簡：去除重複的js ,無用的css
4.代碼分割
5.減小dom操做:虛擬dom
6.模塊化 減小強依賴

4、網絡加載優化

1.使用cdn:能幫你選擇最優的服務器下載響應你的資源。

5、基於webpack的性能優化：

1. 遇到webpack打包性能問題，先去npm run build --report，而後根據分析結果來作相應的優化，誰佔體積大就幹誰
2. webpack提供的externals能夠配合外部資源CDN輕鬆大幅度減小打包體積，尤爲對於echarts、jQuery、lodash這種庫來講

3.代碼拆分

JS 層面細細展開
只傳送用戶須要的代碼。可用代碼拆分（Code-splitting）。
優化壓縮代碼（ES5的Uglify，ES2015的babel-minify或者uglify-es）
高度壓縮（用Brotli~q11，Zopfli或gzip）。Brotli的壓縮比優於gzip。它能夠幫CertSimple節省17%的壓縮JS的字節大小，以及幫LinkedIn減小4%的加載時間。
移除無用的代碼。用 Chrome DevTools代碼覆蓋率功能來查找未使用的JS代碼。對於精簡代碼，可參閱tree-shaking， Closure Compiler的高端模式（advanced optimizations）和相似於 lodash-babel-plugin的微調庫插件，或者像Moment.js這類庫的Webpack的ContextReplacementPlugin。用babel-preset-env & browserlist來避免現代瀏覽器中已有的轉譯（transpiling）功能。高級開發人員可能會發現仔細分析Webpack打包（bundle）有助於他們識別和調整沒必要要的依賴關係。
緩存HTTP代碼 來減小網絡傳輸量。肯定腳本最佳的緩存時間（例如：max-age）和提供驗證令牌（Etag）來避免傳送無變化的字節。用Service Worker緩存一方面可讓應用程序網絡更加靈活，另外一方面也可讓你可以快速訪問像V8代碼緩存這樣的功能。長期緩存能夠去了解下Webpack帶哈希值文件名（filename hashing）。

6、總結

1.對性能優化最明顯的是(從上之下)
緩存--強弱緩存
Gzip>壓縮uglify
優化圖片
js代碼分割》按需請求 加載>
虛擬dom

1.一、理解資源加載的過程
包括：TCP握手鍊接、HTTP請求報文、HTTP回覆報文
1.二、理解資源加載的性能約束，包括：TCP鏈接限制、TCP慢啓動
1.三、理解CSS文件、JS文件壓縮，理解不一樣文件放在頁面不一樣位置後對性能的影響
1.四、理解CDN加速
1.五、學會使用HTTP頭控制資源緩存，理解cache-control、expire、max-age、ETag對緩存的影響
1.六、深刻理解瀏覽器的render過程

關於前端性能的 推薦2片優秀的文章：
JavaScript的成本
我本身的前端性能優化概要設計