WEB前端性能優化

2019-03-22  第一部分 資源合併與壓縮

1  Web前端本質是一種GUI軟件，基於BS架構，軟件開發代碼發佈到webServer或者CDN服務器，瀏覽器向服務器發出請求，經過動態的增量的加載資源。

2  瀏覽器發出http請求到返回經歷了什麼？

　　瀏覽器將URL拆分解析---->DNS 服務器---->根據domain域名服務器查詢IP---->將IP和協議發送服務端：首先進入controller層進行邏輯分析和請求分發，model層進行數據交互調研redis和db數據庫，查詢的渲染頁面返回給view層---->response返回給瀏覽器---->render操做將css和HTML樹從上到下生產DOM節點到DOM樹，進行樣式渲染，而後執行動態的JS腳本，展現返回的能夠交互的頁面。

3  優化點 

　　DNS是否能夠經過緩存減小DNS查詢時間？

 　  網絡請求是否能夠走最近的網絡環境？

　　相同的靜態資源是否能夠緩存？

　　是否能夠減小http請求大小，是否能夠減小http請求數量來減小網絡損耗？

　　是否能夠在服務端渲染？（解決首屏渲染問題）

4 CDN靜態資源解決了路由選擇和緩存問題。要求 CDN域名與主站域名不一樣，不然攜帶無效cookie增長網絡損耗。缺點：沒法訪問API。

5 爲何要進行壓縮與合併？    真實案例：谷歌網絡流量佔全球網絡流量的40%，2016年全球網絡流量1.3ZB，每1MB請求減小一個字節，谷歌將節省500TB流量，若是1GB流量1毛錢，谷歌每一年節省費用上億元。

6 HTML壓縮：

　　在線網站

　　nodejs提供的html-minifier工具，配置參數選擇是否壓縮。Nodejs做爲構建工具在構建階段能夠進行自動化壓縮。Nodejs做爲服務端語言，也能夠對HTML進行壓縮，會增長計算量

　　後端模板引擎渲染

7 css 壓縮: 在線、html-minifier、 clean-css

8 js代碼壓縮與混亂：不只是對無效代碼剔除，對相同語義代碼合併，經過混亂的方式防止別人輕易窺探到代碼邏輯和核心部分，更是對代碼的保護。Html-minifier和uglifyjs工具對代碼進行壓縮。

9 文件合併：http請求首先會創建鏈接，n各文件發送請求，會增長n-1個上行請求時間和延遲，以及丟包和服務中斷問題嚴重。將文件合併後只須要請求一次，減小了網絡損耗。

　　首屏渲染問題：首屏依賴其中某個文件，渲染將會延遲到整個文件所有請求返回，用戶體驗很差。

　　緩存失效問題：其中任意文件改變緩存將大面積失效。

10 文件合併優化點：

　　公共庫文件合併爲一個文件，靜態資源不會常常改變。

　　不一樣頁面應用單獨打包。當頁面請求JS，當路由到時纔會異步加載組件。

　　針對不一樣的業務場景，見機行事。

11 文件合併實現： 在線網站、grunt，fis3，webpack配置entry和output自行分析文件依賴關係進行合併和壓縮。

 

第二部分 圖片有損壓縮JPEG

1  JPG圖片有損壓縮。

　　原始圖片數據——顏色空間轉換——重採樣——高頻部分壓縮——量化——編碼——壓縮圖片——解碼——去量化——反高頻壓縮——反重採樣——逆顏色空間轉換。圖片的內容，即每一個像素的顏色是經過顏色索引表進行表示。如png8，每8bit表示一種顏色。Png24，每24bit表示一種顏色，圖片的體積大小就會增長。

2不一樣的圖片類型

　　JPG ——相比png壓縮率高，不支持透明。適用於大部分不須要透明的圖片的業務場景

　　PNG ——png8 、png24 、png32，支持透明，圖片也能夠進行降階。適用於大部分須要透明圖片的業務場景。

　　SVG矢量圖——圖片不會失真，圖片內容內嵌在HTML中，可使用SVG標籤，不須要加載資源。可是繪製和表達能力有限，適合大部分簡單的業務場景，如logo，現有的iconfont庫，使用一些icon圖標。

　　Webp ——新起的圖片格式，更優的壓縮算法，帶來更小的圖片體積，擁有肉眼識別無差別的圖片質量、存在有損和無損壓縮模式、支持Alpha透明度和動畫特性，jpg和png轉換性能穩定統一優秀。可是對於iOS和view不兼容，適用於安卓系統和應用。

3  圖片優化點：

　　圖片進行壓縮，根據真實case的色彩豐富，捨棄掉可有可無的色彩信息。

　　CSS雪碧圖，將單個圖片整合到一個圖片中，可是要大小合適，不能太多。

　　image inline，將圖片內嵌到HTML中，使用base64來表示，文件大小約1KB。

　　使用SVG矢量圖，iconfont解決icon問題。

　　安卓應用下推薦使用webp格式圖片。

第三部分 CSS和JS如何加載與執行

1 URL解析——》IP請求——》到返回http請求文檔，獲得字節轉換字符流文件——詞法分析——》nexttoken根據header，body、footer標籤解析成相應的token對象——》append到DOM節點中，從上至下生產DOM樹，經過link和script標籤引入其餘資源，併發請求CDN靜態資源，如CSS樣式，CSS解析結合DOM樹，生成Render Tree——》佈局layout——》繪製paint渲染。

2 HTML渲染特色：

　　順序執行：「」併發加載引入css和JS外部資源，併發數收域名限制，2-4個域名託管。

　　阻塞加載：css阻塞JS的加載。Css加載慢，放入header中引入。

　　依賴關係：存在必定遵循的依賴關係，JS執行依賴關係要理清楚。

　　引入方式：link和import，怎麼更優引入。

3 CSS阻塞：

　　Link標籤對應得CSS加載完纔會進行樣式渲染，阻塞JS的執行，可是不阻塞外部腳本如JS的加載，操做DOM可能涉及DOM樹和CSS樹樣式修改。邏輯上正確。預加載資源，由於若是直接引入JS會阻塞頁面渲染。JS不阻塞資源加載，順序執行，會阻塞後續JS的執行。

4 優化點：

　　link代替import，或者在css中合併

　　JS腳本置底，防止相關資源阻塞併發執行。

　　合理的使用JS異步加載的能力，同一個域名最多同時加載6個資源。

 

第四部分 懶加載和預加載

1 本質是對瀏覽器加載性能的一個balance，當加載繁忙時將一些暫時無用的資源延遲加載，當瀏覽器空閒時，提早加載接下來要使用的資源。是瀏覽器的加載性能飽和起來，而且提高用戶體驗。

2 懶加載：當前沒有使用的資源延遲加載。

　　圖片進入可視區才進行加載請求圖片資源，如電商等圖片不少，頁面很長的業務場景，同時加載不少圖片，瀏覽器端的性能嚴重損害，域名加載也存在上限，減小無效資源加載。併發加載資源過多會阻塞JS的執行，影響整個網站的正常使用。

3 預加載：將接下來要使用的資源提早請求和加載。

　　如圖片等靜態資源，加載後放置緩存中使用時就能夠直接從緩存中拿，速度快，提高用戶體驗。預加載能夠瞬間得到樣式展現，如九宮格抽獎，動圖效果依賴於提早加載，音樂預加載等，以及遊戲，存在依賴關係的必須加載完成纔會進行真正的渲染。

4 懶加載實現：Zepto.lazyload.js現有的庫，站位符，預加載必須預設圖片的高度，由於頁面會監聽scroll事件，進入可視區進行加載。

5 預加載實現：

　　方法1：使用img標籤設置display：none

　　方法2：new image對象，設置src  

       方法3：xmlrequest對象能夠監聽加載的過程，更好的進行控制，可是存在跨域問題。（使用preload.js庫 HTML，XHR基於負載標籤替換，解決跨域問題。） 

 

 第五部分 重繪和迴流

1  爲何會產生重繪與迴流，如何減小？

2  迴流：render tree的一部分由於元素的大小，佈局隱藏等改變而須要衝構建，頁面尺寸，佈局，幾何屬性改變，迴流從新佈局和繪製，形成的代價很大。

3  重繪：元素的佈局沒有變化，只是顏色外觀，風格，隱藏等發生改變，觸發頁面從新繪製。

4  尤爲是移動端GPU的計算能力有限，發生迴流是會出現卡頓，用戶體驗不好。

如何避免：

　　儘可能減小對盒子模型，浮動，定位，節點內部文字屬性的修改，或者將修改集中在一塊兒，統一一次處理。

　　使用圖層，萬一非要修改這些屬性，將其抽出來放在單獨的圖層中作，減小影響。可是圖層也不是越多越好，圖層在重組生產頁面時，會增長額外的大量的計算，須要時使用，儘可能少用。

 

第六部分 瀏覽器存儲

Cookie

　　1. cookie 由於HTTP請求無狀態，全部須要cookie去維護客戶端狀態

　　2. cookie的限制：做爲瀏覽器存儲，大小4KB左右；須要設置過時時間expire

　　3. cookie的使用：做爲瀏覽器端和服務器端的交互（用戶狀態）；客戶端自身數據的存儲

　　4. cookie中在相關域名下面-cdn的流量損耗，如優酷

　　5. 重要屬性：HTTPonly不支持JS讀寫（防止收到模擬請求攻擊）

　　6. 優化點：cookie中在相關域名下的網絡損耗。解決方案：CDN域名和主站域名要區分開。

LocalStorge

　　1. html5設計出來專門用於瀏覽器存儲的

　　2. 大小5M左右

　　3. 僅在客戶端使用，不和服務器端通訊

　　4. 接口封裝較好

　　5. 屬於瀏覽器本地緩存方案

SessionStorage

　　1.會話級別的瀏覽器存儲

　　2.大小5M左右

　　3. 僅在客戶端使用，不與服務端進行通訊

　　4. 封裝接口較好

　　5. 對於表單數據維護或分佈操做

　　註釋：LocalStorge與SessionStorage區別：會話級別存儲

IndexedDB

　　1 背景 ：隨着瀏覽器的功能不斷加強，愈來愈多的網賺開始考慮，將大量數據存儲在客戶端，這樣能夠減小從服務器端獲取數據，直接從本地獲取數據，現有的劉安琪數據春初方案，都不適合大量數據存儲，並且不提供搜索功能，不能創建自定義的索引。因此，須要一種新的解決方案，indexedDB誕生了。

　　2 做用：爲application建立離線版本

　　3 特色： 鍵值對存儲、異步、支持事務、同源限制、存儲空間大、支持二進制存儲。

PWA

　　1 PWA（Progressive Web Apps）漸進式網絡應用，是一種能夠提供相似於原生應用程序（native app）體驗的網絡應用程序（web app）。PWA能夠用來作不少事情，最重要的是，離線時（offline）應用程序可以繼續運行功能。這是經過service workers的網絡技術來實現的。

　　2 做爲web開發者，這是咱們傳統構建網站方式的一種轉變。這意味着咱們能夠開始構建應對不斷變化的網絡條件和無網絡鏈接的網站。這還意味着能夠創建更吸引人的網站來爲咱們的用戶提供一流的瀏覽體驗。

　　3 特色：

　　　　可靠：沒有網絡環境也能提供基本的頁面訪問，不會出現「未鏈接到網絡」的頁面

 　　　　快速： 針對頁面渲染和網絡訪問都有較好的優化

 　　　　融入：應該能夠被增長到手機桌面，而且和普通的應用同樣能夠有全屏和推送等特性

Service Worker

　　1 概念：Service Worker是一個腳本，能夠在瀏覽器後臺掛起新線程，來緩解JavaScript的單線程問題，能夠用Service Worker攔截網絡請求進行本地緩存或請求轉發，充當服務器端和瀏覽器端、瀏覽器端與web應用程序之間的代理服務器。

　　2 Service Worker特色：帶來了速度，極大的提升；額用戶體驗，有效加快重複訪問網絡應用的速度。

　　3 做用： 網絡代理、轉發請求、僞造響應、離線緩存、消息推送、後臺消息傳遞。

　　4 PWA與Service Worker：Service Worker能夠看作是實現PWA模式的一項重要技術實現。

 

第七部分  緩存優化

1 大規模的系統和大規模的文件如何進行自動緩存？所以基於瀏覽器和服務器協商的緩存機制出現了，究竟是如何運做的，如何創建一個符合本身業務需求的緩存策略？

2  http請求經過http header傳輸配置本身的緩存策略，叫作cache control，拿到request和response各自的緩存狀況。

3 優先級：Cache control 的控制字段s-mage > Max-age > Expires

　　s-mage：訪問public公共資源，若是公共資源沒有過時，返回304，若是超時，CDN會去相應服務器請求進行回原。

　　Max-age：當前請求開始到max-age這段時間內不會再發起請求，告訴瀏覽器，這段時間有效，不會過時，能夠直接從瀏覽器緩存讀取數據。

　　No-cache：搭配max-age=0使用，向瀏覽器發起請求，全部的請求都會到服務器。

　　No-store: 不使用任何緩存策略。

　　Expires: 設置緩存過時時間，服務器端具體的時間點，沒有過時瀏覽器能夠直接從緩存讀數據。

　　last-modified：精確的時間。問題：很難拿到精確時間，時間變了內容沒變，緩存失效。

　　E-tag：文件內容的MD5值是一個哈希值。

4 若是瀏覽器請求沒有到達服務端，服務端發生變化就沒法告知瀏覽器？此時出現了服務器和瀏覽器協商的機制，基於cache-control，使用last-modified和if-modified-since獲取服務端數據是否修改。

5 分級緩存策略：Max-age和expires沒有過時，返回200from cache。時間過時——》last modified和etag協商看服務器端數據是否修改，沒有修改返回304——》不然從服務端下載文件。（或者歷來沒有請求過資源）返回200。

 

第八部分 服務器端渲染

1  將框架的加載或渲染在服務器端進行，將渲染結果返回到瀏覽器，解決首屏渲染問題。

2  使用fis3或者webpack構建工具。

 

總結

1. 文件壓縮與合併：使用構建工具或者在線壓縮工具進行壓縮。公共庫合併，單獨頁面打包異步請求。

2.  圖片優化：圖片類型選擇，根據真實case顏色需求捨棄部分顏色，圖片壓縮、轉換、降階、內嵌、合併。

3.  CSS加載和執行：CSS文件置頂，使用link代替import，script標籤，合理使用JS異步加載能力

4.  懶加載和預加載：經過對資源的延遲加載或提早加載，使得網頁訪問和顯示更加流暢，提高用戶體驗。

5.  重繪和迴流：減小使用或不使用觸發圖層迴流的屬性。創建圖層，讓迴流在圖層裏單獨進行，隔離開，減小回流和重繪的範圍，減小瀏覽器的運算工做量。

6. 瀏覽器存儲：使用不一樣的瀏覽器春初方式提升客戶端讀取數據的速度。

7. 服務器渲染：將框架的加載和渲染在服務器端進行，將渲染結果返回瀏覽器。