Web應用性能優化隨筆

優化思路是什麼？

BIG QUESTION: 當咱們談到一個web應用的性能優化，應該從哪些方面去考慮？

思路就是，當咱們去訪問一個web應用的時候，都作了哪些操做？對應這些操做的，就是咱們所能進行的優化的模塊！

1. 瀏覽器請求DNS服務器，獲取IP地址；
2. 創建TCP鏈接；
3. 瀏覽器發出詳細請求，一般爲HTTP(s)、WebSocket之類；
4. 服務器響應請求，並返回數據；
5. 瀏覽器渲染返回的數據到頁面；
6. 釋放TCP鏈接；

那麼，咱們接下來就按照這個流程，一步一步來看如何進行優化。

---

很差控制和不重要的優化內容

1. DNS

首先，DNS查詢的流程以下圖所示

當有瀏覽器緩存時，就不會去查詢以後的步驟，有無緩存的對好比下圖

能夠看到，DNS Lookup這一步，在有緩存以後就不會出現。

2. TCP鏈接創建

一樣如上圖所示，Initial Connection 所佔用的時間即爲TCP創建鏈接的耗時。因爲TCP創建須要3次握手的操做，使其成爲HTTP(s)協議通訊耗時最長的過程。

針對這個過程，咱們可使用HTTP Keep-Alive機制，來保持TCP鏈接狀態，這樣可使客戶端不須要在每次http請求的時候都去與服務器創建TCP鏈接，能夠節省掉很大的時間開支、提升服務器吞吐率。

之因此說這個也是很差控制和不重要的優化點，是由於現代瀏覽器已經默認支持 Keep-Alive，而經常使用的Web服務器也均可以對應進行支持。

如需手動設置，要注意 timeout 和 max 參數，保持時間太長的TCP鏈接，也會對服務器形成無用資源消耗。

重要的優化內容

3. 瀏覽器請求和服務器響應

針對請求和響應的優化，簡而言之，就是：

1. 減小請求次數
2. 下降請求耗時

在這裏，可作的優化點包括：

1. CDN
2. 壓縮傳輸，即GZIP/Deflate
3. 前端模塊化
4. 使用緩存
5. 使用本地存儲
6. 負載均衡：Nginx/SLB

3.1 CDN

CDN是Web應用優化的基礎，也是最重要最影響用戶體驗的一個環節！
在項目中，須要注意將打包後的資源文件上傳到CDN地址，而且在構建工具中配置相關CDN信息。

3.2 數據壓縮

服務端與客戶端的數據交互可經過壓縮來進行優化，經常使用的壓縮方式是 GZip和Deflate，本文以 GZip爲例。
GZip支持 HTML/CSS/JS/XML/PlainText等多種格式的壓縮。

下圖可看出是否使用壓縮，對於傳輸文件大小的影響。

3.3 前端模塊化

前端模塊化便於文件管理、也更利於資源歸類壓縮，模塊化大體經歷了以下歷程。

script -> 閉包函數 -> AMD -> CMD -> CommonJS -> ES6

而對應的構建工具，也有如下發展歷程。

Grunt/Gulp -> Browserify -> Webpack

前端模塊化詳情可參見 《Web前端模塊化方法》

3.4 使用緩存

當客戶端使用服務端返回的內容時，能夠經過緩存機制，減小請求傳輸次數。
緩存分爲 強制緩存和協商緩存 兩種。

強制緩存使用 Expires 和 Cache-Control:max-age 控制緩存有效時間。
協商緩存使用 Last-Modified 配合 ETag 控制緩存有效時間。

一般來說，系統優先匹配強制緩存。
對於靜態資源，系統須要作好相關緩存，避免重複請求。

3.5 使用本地存儲

使用本地存儲，能夠在必定程度上減小服務器請求，也能夠加快內容展現速度。

本地存儲的使用有如下歷程：

Cookie+變量 -> WebStorage -> 單頁面內存式存儲 -> IndexDB

變量 + Cookie


• Cookie 被設計來管理狀態，但在簡單應用中可存儲數據

• 4KB限制 + 域名綁定

單頁面內存式存儲

• 針對單頁面應用設計的變量存儲
• 如VueX

Web Storage

• LocalStorage & SessionStorage
• 區別：生命週期、做用域

IndexDB


• 終極方案、NoSQL

3.6 負載均衡

一般負載均衡包含4中模式：

4. 瀏覽器渲染

4.1 Async和Defer

對於資源文件的引入，使用 async和defer。
async 沒有固定順序，即加載到文件就會引入；
defer會按照dom順序進行插入。

4.2 懶加載

內容的懶加載，如配合 vue-router的按需加載；
圖片的懶加載，即須要展現時纔去加載。

4.3 圖片優化

圖片優化是渲染層面可以最大程度提高性能的優化模塊，也是操做起來最麻煩、須要投入精力最多的模塊。

筆者認爲大體分爲三個方向：

1. 源：確保全部的圖片都從CDN源獲取
2. 裁剪：使用正確大小的圖片
3. 格式：按需使用格式

源和裁剪都比較明確，格式方面咱們細說一下。

經常使用格式包括：

1. JPG：
   體積小、有損壓縮、不支持透明
2. PNG：
   體積大、無損壓縮、支持透明
3. SVG：
   文本文件、體積小、不失真、兼容性好
4. BASE64：
   文本文件、依賴編碼、小圖標解決方案；
   須要少許小圖標時可使用此方案，須要大量小圖標時建議使用CssSprites；

5. WebP
   新格式，支持動圖、體積小；瀏覽器支持的兼容性差。

   # 阿里在1688網站上的使用方法能夠借鑑：
   https://alicdn.com/xxx.jpg_xxx.webp

4.4 Throttle & Debounce

節流（Throttle）

在某段時間內，不論觸發了多少次回調，都只作第一次，並在結束時給出響應。

防抖（Debounce）
在某段時間內，不論觸發了多少次回調，都只作最後一次，並在完成後給出響應。

節流和防抖的目標，都是減小執行，下降損耗，減小卡頓。

示例以下：

Throttle示例

let flag = false
window.onscroll = () => {
    if (flag) {
        return
    }
    flag = true
    setTimeout(()=>{
        doSomething()
        flag = false
    })
}

Debounce示例

<input onKeyUp="kp()">

var timer
var kp = ()=> {
    clearTimeout(timer)
    timer = setTimeout(()=> {
        search()
    }, 500)
}