前端性能優化

瀏覽器加載過程

網絡請求

graph TD
A[輸入URL] --> B(強緩存)
B --> |no| C(DNS緩存)
B --> |yes| O
C --> |no: DNS協議| D(以太網協議)
C --> |yes| D
D --> E(IP協議)
E --> F(TCP協議)
F --> G(HTTP鏈接)
G --> H(Nginx緩存)
H --> |no: 負載均衡| I(Node集羣/中間層)
H --> |yes| P
I --> J(協商緩存)
J --> |no| K(同構)
J --> |yes| O
K --> N(應用服務器RESTFUL接口/處理業務)
N --> M(數據庫讀寫)
M -.-> P
O(本地緩存)
P[返回響應]
複製代碼

瀏覽器渲染

graph TD
A(瀏覽器解析HTML)
A --> B(HTML)
A --> C(CSS)
A --> D(JS)
B --> BA(DOM)
C --> CA(CSSOM)
CA -.-> E(構建渲染樹)
E --> F(佈局)
F --> G(繪製)
G --> H(DOMContentLoaded)
H --> I(onLoad)
複製代碼

---

網絡優化

離線緩存

Application Cache（Manifest）

HTML5緩存技術。html標籤中添加manifest屬性，屬性值爲manifest文件的路徑。manifest文件是文本文件，它會告知瀏覽器須要緩存的內容以及不須要緩存的內容。

Service workers

是 Web Worker 的一種，至關於代理服務器，能夠攔截請求，意味着能夠在離線環境下響應請求。

• 基於 Https；
• 每一個 Service Workers 只會處理本身做用域下的請求；
• 它不能直接操做 DOM，經過 postMessage 與主窗口通訊。

強緩存

• Expires 是HTTP/1.0提出的表示資源過時時間的響應頭，它描述的是一個絕對時間，由服務器返回。Expires 受限於本地時間，若是修改了本地時間，可能會形成緩存失效。如 Expires: Wed, 11 May 2018 07:20:00 GMT。
• Cache-Control 出現於HTTP/1.1，表示的是相對時間，優先級高於 Expires。如 Cache-Control: max-age=315360000。

DNS緩存

減小DNS查詢和解析域名，儘可能使用同域名。

HTTP協議

HTTPS：

• 二進制協議解析
• 多請求、響應
• 能夠控制數據流優先級，標記、取消數據流
• 頭信息壓縮、重用
• 服務器推送

協商緩存

• Last-Modified（響應頭）與 If-Modified-Since（請求頭）表示本地文件最後修改日期。
• ETag（響應頭）與 If-None-Match（請求頭）表示資源的惟一標識。

同構

• SPA：單頁面應用，前端渲染和交互。
• 直出：服務端渲染，純後端渲染。
• 同構：後端渲染，前端交互。服務端直出和客戶端渲染組合，結合二者的優點並避免二者的不足。代碼部署在後端，代碼同時運行在服務端和客戶端。與SPA相比，SSR返回的數據多了個靜態頁面（字符串形式）。

同構的好處：

• SEO
• Node直出，首屏渲染速度快
• 先後端共享某些代碼

其餘

• 減小http請求
• 避免重定向
• 減少資源大小：如Webpack壓縮合並、打包、緩存、懶加載、去重等
• 使用CDN
• Ajax緩存

---

瀏覽器渲染優化

瀏覽器渲染過程

1. 瀏覽器解析HTML/XHTML/SVG生成DOM樹（DOM Tree）
2. 瀏覽器解析CSS生成CSS規則樹（CSS Rule Tree / CSSOM）
3. 在生成DOM樹過程當中，若是遇到JavaScript，瀏覽器暫停構建DOM，先下載和構建CSSOM（由於JS能夠修改CSSOM），而後再執行JS，最後繼續構建DOM。JS經過DOM API和CSSOM API來操做DOM Tree和CSS Rule Tree
4. 瀏覽器引擎經過DOM樹和CSS規則樹來構造渲染樹（Rendering Tree）。像
   或 display: none; 不會出如今渲染樹中
5. 瀏覽器根據渲染樹佈局/迴流/重排（Flow），佈局完成後繪製/重繪（Paint）。迴流會引起重繪，重繪不必定引起迴流

HTML

• 優化加載順序
• 異步加載css、js（如：使用async、defer）
• 外鏈css、js，利用瀏覽器的緩存機制
• 避免嵌套
• 避免空標籤、空格、註釋，避免空的src、href屬性，刪除默認屬性
• 語義化：有利爬蟲、開發可讀、屏讀

CSS

• 避免嵌套
• 選擇器
• 屬性：重排（如：改變外邊距）、重繪（如：頁面滾動時禁用hover事件）、盒模型順序
• 啓用GPU硬件加速

JS

API Time complexity

• indexOf() O(n)
• hasOwnProperty() O(1)
• (new Set()).has() O(1)

垃圾回收

內存泄漏：再也不用到的內存，沒有及時釋放：

• 做用域未釋放
• 較長生命週期的鍵值對象緩存、多餘的全局變量
• 無效的DOM引用
• 事件監聽未清除
• 定時器未清除

內存泄漏優化：

• 避免並解除閉包
• 避免使用較長生命週期的鍵值對象緩存而是拆分紅多個、清空變量
• 解除引用
• 清除監聽器
• 清除定時器
• WeakSet 和 WeakMap 對於值的引用都不計入垃圾回收機制
• Node 中使用 stream 或 buffer 來操做大文件，不會受 Node 內存限制
• 使用 redis 等外部工具緩存數據

框架

React：

1. 不要進行DOM節點跨層級的操做，能夠經過CSS隱藏顯示節點，避免嵌套
2. 組件保持同類型並結合 shouldComponentUpdate()
3. 惟一key
4. 拆分組件
5. bind在constructor中綁定，不要在使用時綁定
6. 組件中箭頭函數對於組件來講每次綁定的都是新的函數，從而引起從新渲染
7. 默認屬性的值要放在變量中緩存
8. 無狀態組件
9. 繼承 React.PureComponent生成組件，render前進行淺比較，從而決定是否更新組件
10. 官方或第三方庫

Redux：

1. store扁平化，避免嵌套
2. store範式化，儘量少的數據
3. 將和redux有鏈接的多個組件拆分紅多個 connect 的單個組件
4. mapStateToProps會將組件的props做爲第二個參數，在此作比較使傳入組件的props爲boolean

其餘

• 尾調用，尾遞歸
• DocumentFragment
• 防抖、節流
• localStorage，sessionStorage
• Web worker獨立線程

首屏渲染

白屏時間 首屏時間

• 白屏時間是指瀏覽器從響應用戶輸入網址地址，到瀏覽器開始出現第一個元素的時間，影響因素是網絡、服務端性能、前端頁面結構設計。new Date() - performance.timing.navigationStart
• 首屏時間是指瀏覽器從響應用戶輸入網絡地址，到首屏內容渲染完成的時間，影響因素是白屏時間、資源下載執行時間。window.onload => new Date() - performance.timing.navigationStart