談談前端性能優化（一）

前言

性能優化無非就是讓頁面的打開速度更快一些，以獲得更好的用戶體驗。前端在這方面能夠作到的有兩方面，頁面級別的優化，好比減小 Http 請求次數、加快資源的加載速度；二是代碼級別的優化，頁面從新渲染一次會通過瀏覽器的重排（reflow）和重繪(repaint)，這兩部操做是很是耗時的，本文將根據這兩方面的優化途徑，大體總結一下。

頁面級別優化

1. 減小 HTTP請求數

首先，每一個請求都是有成本的，既包含時間成本也包含資源成本。一個完整的請求都須要通過 DNS尋址、與服務器創建鏈接、發送數據、等待服務器響應、接收數據這樣一個 「漫長」 而複雜的過程。時間成本就是用戶須要看到或者 「感覺」 到這個資源是必需要等待這個過程結束的，資源上因爲每一個請求都須要攜帶數據，所以每一個請求都須要佔用帶寬。另外，因爲瀏覽器進行併發請求的請求數是有上限的 (具體參見此處 )，所以請求數多了之後，瀏覽器須要分批進行請求，所以會增長用戶的等待時間，會給用戶形成站點速度慢這樣一個印象，即便可能用戶能看到的第一屏的資源都已經請求完了，可是瀏覽器的進度條會一直存在。

減小 http 請求次數的主要方法：

• 設置 HTTP緩存

http 緩存是 web 性能優化中很是重要的一種手段，把一些經常使用資源在首次加載時緩存到瀏覽器本地，再次加載時可大大減小請求次數，緩存的資源越多，性能固然越好。

緩存的規則主要有兩種，強制緩存和對比協商緩存，兩種緩存分別經過Http報文頭部不一樣的字段進行控制。

具體緩存規則參照這裏 或者 這裏。

• 資源合併壓縮

CSS、 Javascript、Image 均可以用相應的工具(Webpack)進行壓縮，壓縮後每每能省下很多空間。

• CSS Sprites

合併 CSS圖片，減小請求數的又一個好辦法。

• 懶加載

這條策略實際上並不必定能減小 HTTP請求數，可是卻能在某些條件下或者頁面剛加載時減小 HTTP請求數。

2. 把 js 腳本置底加載

js 腳本是很容易造成阻塞，致使資源加載停滯，爲了不這種狀況，先加載其餘資源，最後加載腳本。

3. inline 腳本異步執行

inline 腳本與外鏈引用的腳本相似，也有可能會引發阻塞，因此也要將 inline 腳本放到頁面底部或者異步方式來加載，
例如使用script標籤的defer 和async屬性、使用setTimeOut。

4. 動態加載 js 模塊

5. css 放在 head 中

頁面渲染過程還要經歷重繪重排，這樣作是避免會出現 DOM 加載完以後卻沒有樣式的狀況。

代碼級別優化

DOM操做應該是腳本中最耗性能的一類操做，例如增長、修改、刪除 DOM元素或者對 DOM集合進行操做。

而修改 DOM 會引發網頁的從新渲染。

從新渲染，就須要從新生成佈局和從新繪製。前者叫作"重排"（reflow），後者叫作"重繪"（repaint）。

須要注意的是，"重繪"不必定須要"重排"，好比改變某個網頁元素的顏色，就只會觸發"重繪"，不會觸發"重排"，由於佈局沒有改變。可是，"重排"必然致使"重繪"，好比改變一個網頁元素的位置，就會同時觸發"重排"和"重繪"，由於佈局改變了。

這這兩步只是網頁生成的最後兩部，關於頁面的生成過程，主要有五步：

1. HTML代碼轉化成DOM
2. CSS代碼轉化成CSSOM（CSS Object Model）
3. 結合DOM和CSSOM，生成一棵渲染樹（包含每一個節點的視覺信息）
4. 生成佈局（layout），即將全部渲染樹的全部節點進行平面合成
5. 將佈局繪製（paint）在屏幕上

這五步裏面，第一步到第三步都很是快，耗時的是第四步和第五步。

"生成佈局"（flow）和"繪製"（paint）這兩步，合稱爲"渲染"（render）。

具體技巧參照 http://www.ruanyifeng.com/blo...。

最後

本文主要從頁面和代碼兩個層面分析提升性能的方案，其中還有不少細節和其餘技巧，後續慢慢完善補充。

參考連接： https://blog.csdn.net/w2326ic...
https://blog.csdn.net/w2326ic...
https://www.cnblogs.com/cherr...