在大前端時代的今天，前端需要做的事情絕不僅僅是實現頁面需求，完成頁面開發任務。尤其是對於大項目來說，性能優化是一個非常重要，也非常體現前端能力的一個領域，但是前端性能是一個非常嚴肅的事情，一定要對其有系統的理解，不能去盲目的優化，否則會得不償失。
本文是一個系列課程，從原理出發，分爲基礎優化（1，2章）、進階優化（3，4，5，6章）、結合服務端的優化（7章）三大部分，一共7章，章名羅列如下：
- 一、資源合併與壓縮-http 清求的過程及潛在的性能優化點
- 二、圖片相關的優化- 一張JPG圖片的解析過程
因爲篇幅問題，以下幾章的內容會出現在後續文章中
- 三、css和js的裝載與執行-HTML 頁面加載渲染的過程
- 四、懶加載與預加載-懶加載、預加載使用場景
- 五、重繪與迴流- 實戰演練
- 六、瀏覽器存儲-PWA與Service Workers
- 七、緩存
一、資源合併與壓縮-http 清求的過程及潛在的性能優化點
本章目錄：
- 1.html壓縮
- 2.css壓縮
- 3.Js壓縮與混亂
- 4.文件合併
- 5.eleme首頁實戰
首先需要了解瀏覽器的一個請求從發送到返回都經歷了什麼？
從過程中就發現一些可以優化的點
從請求過程中，我們尋找到了一些潛在的性能優化點：
- dns是否可以通過緩存減少dns查詢時間？
- 網絡請求的過程走最近的網絡環境？
- 相同的靜態資源是否可以緩存？
- 能否減少請求http請求大小？
- 減少http請求
- 服務端渲染
注意：深入理解http請求的過程是前端性能優化的核心
很多網站採用cdn去加速靜態資源的加載，但是靜態資源的加載都不需要攜帶cookie，所有cdn的域名最好設置的和普通的域名不一樣，以便去進行識別，當請求cdn的時候不去攜帶cookie，減少http請求的體積。
資源的合併與壓縮的兩個思路：
- 減少http請求數量（合併）
- 減少請求資源的大小（壓縮）
1.html壓縮
HTML的全稱是超文本標記語言，HTML網頁本身是一種文本文件，通過在文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容，包括文字大小，顏色，圖片顯示等等。這就意味着在文本文件中的一些特定意義的字符可以在瀏覽器顯示的時候就不一樣了，HTML代碼壓縮就是壓縮這些在文本文件中有意義，但是在HTML中不顯示的字符，包括空格，製表符，換行符等，還有一些其他意義的字符，如HTML註釋也可以被壓縮。
如何進行html壓縮
- 1.使用在線網站進行壓縮，這種方式在現代化的前端工程中幾乎不會再去使用
- 2.nodejs提供了html-minifier工具（構建層面的壓縮）
- 3.後端模板引擎渲染壓縮（服務端層面的壓縮）
2.css壓縮
壓縮css代碼就是將無效的樣式代碼刪除，將相同語義的css代碼進行合併
如何進行css壓縮
- 1.使用在線網站進行壓縮
- 2.使用html-minifier對html中的css進行壓縮
- 3.使用clean-css對css進行壓縮
3.Js壓縮與混亂
Js壓縮與混亂的意義
- 無效字符的刪除
- 剔除註釋
- 代碼語義的縮減和優化
- 代碼保護(這點非常重要，可以防止別人竊取自己的代碼邏輯，也讓js代碼壓縮成爲最重要的一個環節)
對於大多數公司，HTML壓縮可有可無，但是css和js壓縮是必須要做的
如何進行js壓縮和混亂：
- 1.使用在線網站進行壓縮
- 2.使用html-minifier對html中的js進行壓縮
- 3.使用uglifyjs2對js進行壓縮
4.文件合併
不進行文件合併存在的問題
- 文件與文件之間有插入的上行請求，增加了N-1個網絡延遲
- 受丟包問題影響也更嚴重，每一次網絡請求都可能會存在丟包的情況
- 經過代理服務器時可能會被斷開
但是也不是說合並文件就是萬能的，文件合併存在的問題：
- 首屏渲染問題，文件合併必然會增大文件的體積，如果頁面的顯示依賴於某個文件，但是這個文件因爲體積太大遲遲加載不加來，必須會增加頁面的白屏時間。這個問題在使用vue或者react之類的前端框架的時候尤爲嚴重。
- 緩存失效問題，如果一個合併後的js文件abc.js是由a.js和b.js和c.js合併形成的，那這三個文件的其中一個發生改變都必然會導致abc.js文件緩存的失效。
處理文件合併引發的副作用，可以進行以下操作
- 1.將公共庫單獨打包成一個文件，因爲在實際項目開發中，公共庫往往是很少改變的
- 2.對於單頁面應用，我們肯定也希望當其中某個組件被用到的時候，組件代碼纔會被加載，而不是一定要等到所有的代碼都加載完成纔去顯示首頁，所以我們需要將不同頁面的代碼分開打包（實現方式：異步加載組件）
- 3.見機行事，隨機應變
如何進行文件合併：
- 使用在線網站進行文件合併
- 使用nodejs實現文件合併（基於常見的gulp或者webpack進行配置，如在webpack中，配置好entry和output，webpack自帶的機制就會去自動根據文件之間的依賴關係進行打包）
接下來我們根據非常簡單，容易上手fis3進行資源合併與壓縮的實戰講解。
5.eleme首頁實戰
eleme首頁代碼開發
使用網站進行壓縮與合併
使用fis進行自動化的壓縮與合併
============實戰部分內容持續更新中========================
============2.5============================
=============
二、圖片相關的優化- 一張JPG圖片的解析過程
所有的圖片類型在對原始圖像數據進行處理的時候都會進行壓縮處理，jpg是一種典型的有損壓縮，只是在壓縮過程中丟棄的是一些不是那麼緊要的圖像數據，和原始數據比起來，呈現出來的顯示效果肉眼難辨。
png8/png24/png32之間的區別
png格式除了攜帶有原始圖像數據，還會建立一個自己的圖片數據索引，這個索引就指向了自身所有的所有顏色。
- png8 —— 256色（2^8） + 支持透明
- png24 —— 2^24色 + 不支持透明，相同的圖片，轉換成png24的大小是轉換成png8的三倍
- png32 —— 2^24色 + 支持透明
每種圖片格式都有自己的特點，針對不同的業務場景選擇不同的圖片格式很重要
不同格式圖片常用的業務場景
- jpg有損壓縮，壓縮率高，不支持透明，適合大部分不需要透明圖片的業務場景，jpg相對於png來說，圖片會更小
- png支持透明，瀏覽器兼容好，有png8以及24和32可以選擇，在使用過程中可以進行降階選擇，適合大部分需要透明圖片的業務場景，在實際項目中，png的使用頻率要比jpg高，最大的原因就是png支持透明。
- webp壓縮程度更好，在ios webview有兼容性問題，在只考慮安卓場景時進行使用，缺點就是兼容性問題，但是解碼速率以及壓縮率確定高。
- svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景，適合圖片樣式相對簡單的業務場景，在實際項目中，尤其是簡單的圖片場景，推薦優先考慮使用svg，因爲這種方式讓圖片內嵌在html中，不需要加載更多資源，同時iconfont等字體圖標網站也讓svg的使用變得非常方便。
- 另外還有一種圖片格式gif，如果需要使用動圖，則需要選擇這種格式。
進行圖片壓縮
針對真實圖片情況，捨棄一些相對無關緊要的色彩信息
所以：圖片越簡單，被壓縮之後的體積就越小
CSS雪碧圖
把你的網站上用到的一些圖片整合到一張單獨的圖片中
最大的優點就是減少你的網站的HTTP請求數量
但是在實際項目中，雪碧圖的使用已經越來越小， 因爲當整合圖片比較大時，一次加載會比較慢，如果這張整合圖片的加載失敗了，那後果更慘，所有用到這種圖片的位置都會無法正常顯示。同時其他圖片使用技術（如svg，Image inline等）的強制發展，讓雪碧圖的發展受限嚴重，目前使用雪碧圖的網站基本都是pc端網站。
Image inline
將圖片的內容內嵌到html當中
減少你的網站的HTTP請求數量
方式：將圖片轉換成base64格式
尤其是網站上的一些非常小的圖片，將其轉換成base64內嵌到html中顯得優勢十足。
使用矢量圖
使用SVG進行矢量圖的繪製
使用iconfont解決icon問題
這種方式和Image inline，也不需要讓圖片再去經過http請求才能拿到了。
在安卓下使用webp
WebP 的優勢體現在它具有更優的圖像數據壓縮算法，能帶來更小的圖片體積，而且擁有肉眼識別無差異的圖像質量；同時具備了無損和有損的壓縮模式、Alpha 透明以及動畫的特性，在 JPEG 和 PNG 上的轉化效果都非常優秀、穩定和統一。
eleme首頁實戰
對於之前所提到的圖片相關技術，在上一章完成的相關數據列表中進行實戰
===============實戰部分內容持續更新中=====================
============3.5============================
=============