瀏覽器性能優化

瀏覽器性能優化
關于瀏覽器性能優化這方面，也是web開發一個不可避免地重點。下面就分別從幾個方面談一談如何提高瀏覽器性能。

一、網絡加載類
1.首屏數據請求提前，避免 JavaScript 文件加載后才請求數據
為了進一步提升頁面加載速度，可以考慮將頁面的數據請求盡可能提前，避免在 JavaScript 加載完成后才去請求數據。通常數據請求是頁面內容渲染中關鍵路徑最長的部分，而且不能并行，所以如果能將數據請求提前，可以極大程度上縮短頁面內容的渲染完成時間。那怎么將請求數據提前呢？建議采用首屏數據漸進式預加載的優化思路，具體如下：
1.優化首屏數據加載節點的速度。

2.預先加載首屏數據，使得多個串行節點并行化。
接下來詳細介紹優化步驟，第1點會在第一步優化中體現，但核心思路和主要優化收益更多體現在第2點：多個串行節點并行化。
Step1：資源文件下載與首屏數據請求節點并行
為了達到資源下載與數據請求并行的效果，我們充分利用了 HTTP Chunk 傳輸與瀏覽器的漸進式渲染特性：
將入口頁分為靜態片段和數據片段：靜態片段包含了各個資源標簽（script,link），靜態的導航欄，加載指示器等；數據片段則是包含首屏數據的內聯腳本，大至如下：

HTTP Chunk 方式輸出靜態片段

請求首屏數據并在所有數據請求完成后將數據片段和應用初始化代碼返回給瀏覽器。

注：http chunk 方式輸出在 NodeJS 中及其容易滿足，簡單的 res.write(chunk) 即可。
Step2：應用初始化，資源文件下載，首屏數據請求節點并行
在 Step1 的基礎上繼續分析，應用初始化節點耗時也很明顯，同時該節點要進行必須等待資源文件下載完畢，但理論上可以不依賴我們的首屏數據，還是可以讓其和首屏數據請求并行。這里我們無法在 Step1 方案上直接將應用初始化和數據請求并行化，主要原因在于當首屏數據請求時間大于資源加載+應用初始化完成時間時，應用會在沒有數據的情況下進入首屏渲染節點，從而導致異常。
解決方案是將數據片段的輸出變成 promise 片段：

pending promise 片段，與靜態片段一起輸出，大概如下：

```javascript
<script>
window.__APP_DATA__ = {
 RESOLVERS: {}
 userInfo: new Promise((resolve, reject) => {
   // 超時認為失敗
   let timer = setTimeout(reject.bind(null, {message: 'timeout'}), 12000);
   window.__APP_DATA__.userInfo = (err, data) => {
     clearTimeout(timer);
     err ? reject(err) : resolve(data)
   }
 })
};
</script>

resolve promise 片段，該片段在數據請求成功返回后輸出，大概如下：

```javascript
<script>window.__APP_DATA__.RESOLVERS.userInfo(null, data); </script>

復制代碼
reject promise 片段，該片段在數據請求失敗后輸出，大概如下：

3.模塊化資源并行下載
在移動端資源加載中，盡量保證 JavaScript 資源并行加載，主要指的是模塊化 JavaScript 資源的異步加載，例如 AMD 的異步模塊，使用并行的加載方式能夠縮短多個文件資源的加載時間。

4．inline 首屏必備的 CSS 和 JavaScript
通常為了在 HTML 加載完成時能使瀏覽器中有基本的樣式，需要將頁面渲染時必備的 CSS 和 JavaScript 通過

<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="UTF-8">
   <title>樣例</title>
   <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
   <style>
   /*必備的首屏CSS*/
   html,body{
        margin:0;
        padding:0;
        background-color:#eee;
    }
    </style>
</head>
<body>
</body>
</html>

　　復制代碼5. meta dns prefetch 設置 DNS 預解析
設置文件資源的 DNS 預解析，讓瀏覽器提前解析獲取靜態資源的主機 IP，避免等到請求時才發起 DNS 解析請求。通常在移動端 HTML 中可以采用如下方式完成。

<!--cdn域名預解析-->
<meta http-equiv="x-dns-prefetch-control" content="on" >
<link rel="dns-prefetch"  >

6.資源預加載
對于移動端首屏加載后可能會被使用的資源，需要在首屏完成加載后盡快進行加載，保證在用戶需要瀏覽時已經加載完成，這時候如果再去異步請求就顯得很慢。

7．合理利用 MTU 策略
通常情況下，我們認為 TCP 網絡傳輸的最大傳輸單元（Maximum Transmission Unit，MTU）為 1500B，即一個 RTT（Round-Trip Time，網絡請求往返時間）內可以傳輸的數據量最大為 1500 字節。因此，在前后端分離的開發模式中，盡量保證頁面的 HTML 內容在 1KB 以內，這樣整個 HTML 的內容請求就可以在一個 RTT 內請求完成，最大限度地提高 HTML 載入速度。
緩存類

(1)．合理利用瀏覽器緩存
除了之前說到的使用 Cache-Control、Expires、Etag 和 Last-Modified 來設置 HTTP 緩存外，在移動端還可以使用 localStorage 等來保存 AJAX 返回的數據，或者使用 localStorage 保存 CSS 或 JavaScript 靜態資源內容，實現移動端的離線應用，盡可能減少網絡請求，保證靜態資源內容的快速加載。

(2)．靜態資源離線方案
對于移動端或 Hybrid 應用，可以設置離線文件或離線包機制讓靜態資源請求從本地讀取，加快資源載入速度，并實現離線更新。關于這塊內容，我們會在后面的章節中重點講解。

(3)．嘗試使用 AMP HTML
AMP HTML 可以作為優化前端頁面性能的一個解決方案，使用 AMP Component 中的元素來代替原始的頁面元素進行直接渲染

<!--不推薦-->
<video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4" poster="path/poster.jpg">
   <div fallback>
        <p>Your browser doesn’t support HTML5 video</p>
    </div>
    <source type="video/mp4" src="foo.mp4">
    <source type="video/webm" src="foo.webm">
</video>
<!--推薦-->
<amp-video width="400" height="300" src="http://www.domain.com/videos/myvideo.mp4"
poster="path/poster.jpg">
   <div fallback>
       <p>Your browser doesn’t support HTML5 video</p>
   </div>
   <source type="video/mp4" src="foo.mp4">
   <source type="video/webm" src="foo.webm">
</amp-video>

posted @ 2022-06-17 08:00 青竹之下閱讀(446) 評論(0) 收藏舉報

huaobin

瀏覽器性能優化

公告