web性能優化

幾乎全部的開發者都會面臨着開發的網站存在加載問題，想要加快網頁的加載速度。前端的頁面更須要在性能優化上下功夫，只有這樣才能實現更好的用戶體驗。本文從構建、瀏覽器渲染、緩存、PWA、服務端優化等多方面，梳理前端性能優化的技術點、綜合分析技術的原理，根據不一樣的業務場景選擇合適的性能優化點進行應用，最終爲你的網站帶來顯著的速度提高和總體性能提高。

先看一下早期CS架構的開發與部署過程

再看一下如今BS架構的開發與部署過程

從地址欄輸入url到頁面渲染出來，整個過程經歷了什麼（一道經典的面試題。。）讓咱們用一張圖來了解整個過程：

從上圖這個請求過程，咱們能夠思考一下其中一些潛在的性能優化點：

• dns是否能夠經過緩存減小dns查詢時間？
• 網絡請求的過程走最近的網絡環境？
• 相同的靜態資源是否能夠緩存？
• 可否減小請求http的請求大小？
• 減小http請求數量？
• 服務端渲染？

綜上，咱們得出深刻理解http請求過程是前端性能優化的核心

資源合併與壓縮

html壓縮

HTML代碼壓縮就是壓縮這些在文本文件中有意義，可是在HTML中不顯示的字符，包括空格、製表符、換行符等，還有一些其餘意義的字符，如HTML註釋也能夠被壓縮。

HTML代碼壓縮的意義：
以google爲例，google的流量，佔到整個互聯網的40%，2016年全球網絡流量達到1.3ZB（1ZB=10^9TB），那麼google在2016年的流量就是1.3ZB*40%，若是google每1MB請求減小一個字節，每一年能夠節省流量近500TB。

那麼如何進行HTML的壓縮呢？

• 使用在線網站進行壓縮
• nodejs提供了html-minifier工具
• 後端模版引擎渲染壓縮

css及js壓縮

如何進行css壓縮：

• 使用在線網站進行壓縮
• 使用html-minifier對html中的css進行壓縮
• 使用clean-css對css進行壓縮

如何進行js壓縮和混亂：

• 使用在線網站進行壓縮
• 使用html-minifier對html中對js進行壓縮
• 使用uglify2對js進行壓縮

文件合併

可是文件合併也存在它本身的問題：

• 首屏渲染問題
• 緩存失效問題

解決方案：

• 公共庫合併
• 不一樣頁面的合併
• 隨機應變，根據業務場景做出抉擇，選出最優方案

如何進行文件合併：

• 使用在線網站進行文件合併
• 使用nodejs實現文件合併

圖片相關的優化

一張JPG圖片的解析過程

png八、png2四、png32之間的區別

區別主要仍是文件大小和色彩的豐富程度

• png8:256色 + 支持透明
• png24:2^24色 + 不支持透明
• png32:2^24色 + 支持透明

每種圖片格式都有本身的特色，針對不一樣的業務場景選擇不一樣的圖片格式很重要。

不一樣格式圖片經常使用的業務場景

先看一下四種經常使用圖片格式的各自特色吧：

• jpg有損壓縮，壓縮率高，不支持透明
• png支持透明，瀏覽器兼容好
• webp壓縮程度更好，在ios webview有兼容性問題
• svg矢量圖，代碼內嵌，相對較小，圖片樣式相對簡單的場景

根據各自不一樣的特色獲得適用的業務場景分別爲：

• jpg:大部分不須要透明圖片的業務場景
• png:大部分須要透明圖片的業務場景
• webp:安卓所有
• svg:圖片樣式相對簡單的業務場景，如icon

圖片壓縮幾種方法-雪碧圖、Image inline

css雪碧圖

image inline

矢量圖

• 使用svg進行矢量圖的繪製
• 使用iconfont解決icon問題

在安卓下使用webp

webp的優點體如今它具備更優的圖像數據壓縮算法，能帶來更小的圖片體積，並且擁有肉眼識別無差別的圖像質量；同時具有了無損和有損的壓縮模式、Alpha透明以及動畫的特性，在JPEG和PNG上的轉化效果都很是優秀、穩定和統一。

css 和 js 的裝載與執行

先用一張圖來理解html頁面加載渲染的過程：

html渲染過程當中有如下特色：

順序執行、併發加載

（1）詞法分析 （2）併發加載 （3）併發上限

是否阻塞

• css阻塞：（1）css head中阻塞頁面的渲染 （2）css阻塞js的執行 （3）css不阻塞外部腳本的加載
• js阻塞：（1）直接引入的js阻塞頁面的渲染 （2）js不阻塞資源的加載 （3）js順序執行，阻塞後續js邏輯的執行

依賴關係
引入方式

懶加載與預加載

懶加載

• 圖片進入可視區域以後請求資源
• 對於電商等圖片不少，頁面很長的業務場景適用
• 減小無效資源的加載
• 併發加載的資源過多會阻塞js的加載，影響網站的正常使用

預加載

• 圖片等靜態資源在使用以前的提早請求
• 資源使用到時能從緩存中加載，提高用戶體驗
• 頁面展現的依賴關係維護

重繪與迴流

瀏覽器存儲

緩存優化