web前端性能優化指南

摘要：通常來講頁面訪問的時間有一條著名的「2-5-8原則」。當用戶訪問一個頁面： 一、在2秒內獲得響應時，會感受系統響應很快； 二、在2-5秒之間獲得響應時，會感受系統的響應速度還能夠； 三、在5-8秒之內獲得響應時，會感受系統的響應速度很慢，但能夠接受； 而超過8秒後仍然沒法獲得響應時，用戶會感受系統糟透了，進而選擇離開這個站點，或者發起第二次請求。對於一個網站若是但願抓住用戶，網站的速度以及穩定性是很是重要的。

1、爲何要作性能優化？

從上面能夠看出，網站前端的用戶體驗決定了用戶是否想要去使用網站的功能，而網站的功能決定了用戶是否會一票否決前端體驗。 不只僅如此，若是前端優化得好，他不只能夠爲企業節約成本，他還能給用戶帶來更多的用戶，由於加強的用戶體驗。總結成三點就是： 一、加快頁面展現和運行速度 二、節約服務器帶寬流量 三、減小服務器壓力

2、何時作性能優化最合適？

通常來講，遵循避免過早優化的原則，由於網站再發過程當中的成本相對來講仍是比較高的，web開發工程師、ui、產品、運維、後臺服務等等，因此第一咱們要保證基本功能完成，再考慮優化。第二在沒有找到性能瓶頸以前，不要優化

3、哪方面須要作性能優化？

在這以前，咱們先分析一個頁面從發起請求到展現到用戶大概流程 一、DNS 查詢 二、發送 HTTP 請求 三、等待服務器響應 四、下載服務器響應內容 五、解析 HTML、CSS、JS 六、渲染 HTML、CSS、JS 和圖片 七、響應用戶事件 瞭解了這幾個過程，你們應該知道如何優化了吧，對，就是對症下藥： 一、針對 DNS 查詢優化

減小網站所用的域名個數（現代瀏覽器基本都具有並行下載能），減小 DNS 查詢時間建議一個網站使用至少 2 個域，但很少於 4 個域來提供資源

二、針對發送方面的請求優化

localStorage（本地存儲） 靜態資源打包，開啓 Gzip 壓縮（節省響應流量） Cookie 隔離（節省請求流量） 使用 CDN 加速（訪問最近服務器）

三、針對等待服務器響應方面的優化

合理設置 HTTP 緩存：Etag 與 Cache-control 啓用 HTTP/2（多路複用，並行加載） 優化數據庫查詢 部署負載均衡

四、針對下載服務器響應內容優化

用 CSS3 實現圖片，對小圖標進行 base64（下降請求數） 延遲(defer)加載/異步(async)加載依賴 針對解析 HTML、CSS、JS優化 去掉無用的 HTML、CSS 和 JS 優化首屏時間：腳本後位置、圖片壓縮、懶加載

五、針對渲染 HTML、CSS、JS 和圖片優化

最小化重繪(repaint)和迴流(reflow)：批量修改元素樣式、避免 table 佈局等 針對響應用戶事件優化 儘可能不在前端作複雜的運算

更多分享請關注，微信公衆號：xiaohumuhe13，或今日頭條號：（大話前端），還能得到海量視頻資源哦~ 個人目標：作最好最全的前端資源分享 ​