前端性能優化之桌面瀏覽器優化策略

時間 2019-11-07

原文原文鏈接

經過上篇文章前端性能測試的性能測試和分析，咱們基本能夠獲取收集到頁面上的具體性能數據，如何根據這些數據採起適當的方法和手段對當前的頁面進行優化呢？目前來看，前端優化的策略不少，如YSlow(Yslow 是 Yahoo 發佈的一款 Firefox 插件，能夠對網站的頁面性能進行分析，提出對該頁面性能優化的建議)原則等，總結起來主要包括網絡加載類、頁面渲染類、CSS 優化類、JavaScript 執行類、緩存類、圖片類、架構協議類等幾類，本文主要介紹桌面端瀏覽器的性能優化策略，分爲兩部分，網絡加載類和頁面渲染類。javascript

網絡加載類

1.減小 HTTP 資源請求次數

在前端頁面中，一般建議儘量合併資源圖片、Javascript 或 CSS 代碼，減小頁面請求數和資源請求消耗，這樣能夠縮短頁面首次訪問的用戶等待時間。經過構建工具合併雪碧圖、CSS、JavaScript 文件等都是爲了減小 HTTP 請求次數。另外也要儘可能避免重複的資源，防止增長多餘請求。css

2.減少 HTTP 請求大小

除了減小 HTTP 資源請求次數，也要儘可能減少每一個 HTTP 請求的大小。如減小不必的圖片、JavaScript、CSS 及HTML 代碼，對文件進行壓縮優化，或者使用 gzip 壓縮傳輸內容等均可以用來減少文件大小，縮短網絡傳輸等待延時。前面咱們使用構建工具來壓縮靜態圖片資源以及移除代碼中的註釋並壓縮，目的都是爲了減少 HTTP 請求的大小。前端

3.將CSS 或 JavaScript 放到外部文件中，避免使用 <style> 和 <script> 標籤直接引入

在 HTML 文件中引用外部資源能夠有效利用瀏覽器的靜態資源緩存，但有時候在移動端頁面 CSS 或 JavaScript 比較簡單的狀況下爲了減小請求，也會將 CSS 或 JavaScript 直接寫到 HTML 裏面，具體要根據 CSS 或 JavaScript 文件的大小和業務的場景來分析。若是 CSS 或 JavaScript 文件內容較多，業務邏輯較複雜，建議放到外部文件引入。java

<link rel="stylesheet" href="//cdn.domain.com/path/main.css">
...
<script src="//cdn.domain.com/path/main.js"></script>
複製代碼

4.避免頁面中空的 href 和 src

當 <link>標籤的 href 屬性爲空，或<script>、<img>、<iframe>標籤的 src 屬性爲空時，瀏覽器在渲染的過程當中仍會將 href 屬性或 src 屬性中的空內容進行加載，直到加載失敗，這樣就阻塞了頁面中其餘資源的下載進程，並且最終加載到的內容是無效的，所以要儘可能避免。ajax

<!-- 不推薦 -->
<img src="" alt="photo">
<a href=""></a>
複製代碼

5.爲 HTML 指定 Cache-Control 或 Expires

爲 HTML內容設置 Cache-Control 或 Expires 能夠將 HTML內容緩存起來，避免頻繁向服務器端發送請求。在頁面Cache-Control 或 Expires 頭部有效時，瀏覽器將從緩存中讀取內容，不向服務器發送請求。跨域

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Mon, 20 Jul 2017 23:00:00 GMT" />
複製代碼

6.合理設置 Etag 和 Last-Modified

合理設置 Etag 和 Last-Modified 使用瀏覽器緩存，對於未修改的文件，靜態資源服務器會向瀏覽器端返回 304 ，讓瀏覽器從緩存中讀取文件，減小 Web 資源下載的帶寬消耗並下降服務器負載。瀏覽器

<meta http-equiv="Last-Modified" content="Mon, 03 Oct 2017 17:45:57 GMT" />
複製代碼

7.減小頁面重定向

頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約須要 600 毫秒的時間開銷，爲了保證用戶儘快看到頁面的內容，要儘可能避免頁面重定向。緩存

8.使用靜態資源分域存放來增長下載並行數

瀏覽器在同一時刻向同一個域名請求文件的並行下載數是有限的，所以能夠利用多個域名的主機來存放不一樣的靜態資源，增大頁面加載時資源的並行下載數，縮短頁面資源加載的時間。一般根據多個域名來分別存儲 JavaScript、CSS 和圖片文件。性能優化

<link rel="stylesheet" href="//cdn1.domain.com/path/main.css">
...
<script src="//cdn2.domain.com/path/main.js"></script>
複製代碼

9.使用靜態資源 CDN 來存儲文件

若是條件容許，能夠利用 CDN 網絡加快同一個地理區域內重複靜態資源文件的響應下載速度，縮短資源請求時間。bash

10.使用 CDN Combo 下載傳輸內容

CDN Combo 是在 CDN 服務器端將多個文件請求打包成一個文件的形式來返回的技術，這樣能夠實現 HTTP 鏈接傳輸的一次複用，減小瀏覽器的 HTTP 請求數，加快資源下載速度。例如同一個域名 CDN 服務器上的 a.js，b.js，c.js 就能夠按以下方式在一個請求中下載。

<script src="//cdn.domain.com/path/a.js,b.js,c.js"></script>
複製代碼

11.使用可緩存的 AJAX

對於返回內容相同的請求，不必每次都直接從服務端拉取，合理使用 AJAX 緩存能加快 AJAX 響應速度並減輕服務器壓力。

$.ajax({
    url:url,
    type: 'get',
    cache: true,        //推薦使用緩存
    data: {}
    success(){
        //...
    },
    error(){
        //...
    }
});
複製代碼

12.使用 GET 來完成 AJAX 請求

使用 XMLHttpRequest 時，瀏覽器中的 POST 方法發送請求首先發送文件頭，而後發送 HTTP 正文數據。而使用 GET 時只發送頭部，因此在拉取服務端數據時使用 GET 請求效率更高。

$.ajax({
    url:url,
    type: 'get',       //推薦使用 get 完成請求
    data: {}
    success(){
        //...
    },
    error(){
        //...
    }
});
複製代碼

13.減小 Cookie 的大小並進行 Cookie 隔離

HTTP 請求一般默認帶上瀏覽器端的 Cookie 一塊兒發送給服務器，因此在非必要的狀況下，要儘可能減小 Cookie 來減少 HTTP 請求的大小。對於靜態資源，儘可能使用不一樣的域名來存放，由於 Cookie 默認是不能跨域的，這樣就作到了不一樣域名下靜態資源請求的 Cookie 隔離。

14. 縮小 favicon.ico 並緩存

有利於 favicon.ico 的重複加載，由於通常一個 Web 應用的 favicon.ico 是不多改變的。

15.推薦使用異步 JavaScript 資源

異步的 JavaScript 資源不會阻塞文檔解析，因此容許在瀏覽器中優先渲染頁面，延後加載腳本執行。例如 JavaScript 的引用能夠以下設置，也可使用模塊化加載機制來實現。

<script src="//main.js" defer></script> //使用defer時，加載後續文檔元素的過程和main.js的加載是並行的，但main.js的執行要在頁面全部元素解析完成以後纔開始執行
<script src="//main.js" async></script> //使用async時，加載後續文檔元素的過程和main.js的加載是並行的
複製代碼

16.消除阻塞渲染的 CSS 及 JavaScript

對於頁面中加載時間過長的 CSS 或 JavaScript 文件，須要進行合理拆分或延後加載，保證關鍵路徑的資源能快速加載完成。

17.避免使用 CSS import 引用加載 CSS

CSS 中的 @import 能夠從另外一個文件中引入樣式，但應該避免這種用法，由於這樣會增長 CSS 資源加載的關鍵路徑長度，帶有 @import 的 CSS 樣式須要在 CSS 文件串行解析到 @import 時纔會加載另外的 CSS 文件，大大延後 CSS 渲染完成的時間。

<!--不推薦-->
<style>
@import "path/main.css";
</style>

<!--推薦-->
<link rel="stylesheet" href="//cdn1.domain.com/path/main.css">
複製代碼

頁面渲染類

1. 把 CSS 資源引用放到 HTML 文件頂部

通常推薦將全部 CSS 資源儘早指定在 HTML 文檔 <head> 中，這樣瀏覽器能夠優先加載 CSS 並儘早完成頁面渲染。

2.JavaScript 資源引用放到 HTML 文件底部

JavaScript 資源放到 HTML 文檔底部能夠防止 JavaScript 的加載和解析執行對頁面渲染形成阻塞。因爲 JavaScript 資源默認是解析阻塞的，除非被標記爲異步或者經過其餘的異步方式加載，不然會阻塞 HTML DOM 解析和 CSS 渲染的過程。

3.不要在 HTML 中直接縮放圖片

在 HTML 中直接縮放圖片會致使頁面內容的重排重繪，此時可能會使頁面中的其餘操做產生卡頓，所以要儘可能減小在頁面中直接進行圖片縮放。

4.減小 DOM 元素數量和深度

HTML 中標籤元素越多，標籤的層級越深，瀏覽器解析 ** DOM** 並繪製到瀏覽器中所花的時間就越長，因此應儘量保持 DOM 元素簡潔和層級較少。

<!--不推薦-->
<div>
    <span>
        <a href="javascript: void(0);">
            <img src="./path/photo.jpg" alt="圖片">
        </a>
    </span>
</div>

<!--推薦-->
<img src="./path/photo.jpg" alt="圖片">
複製代碼

5.儘可能避免使用 <table>、<iframe>等慢元素

<table>內容的渲染是將 table 的 DOM 渲染樹所有生成完並一次性繪製到頁面上的，因此在長表格渲染時很耗性能，應該儘可能避免使用它，能夠考慮使用列表元素 <ul> 代替。儘可能使用異步的方式動態添加 iframe 內資源的下載進程會阻塞父頁面靜態資源的下載與 CSS 及 HTML DOM的解析。

6.避免運行耗時的 Javascript

長時間運行的 JavaScript 會阻塞瀏覽器構建 DOM 樹、DOM 渲染樹、渲染頁面。因此，任何與頁面初次渲染無關的邏輯功能都應該延遲加載執行，這和 JavaScript 資源的異步加載思路是一致的。

7.避免使用 CSS 表達式或 CSS 濾鏡

CSS 表達式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其餘解決方案的狀況下應該儘可能避免使用。

//不推薦
.opacity{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}
複製代碼

關於桌面瀏覽器頁面優化的經常使用技術和思路主要包括以上這些，儘管列出不少，但仍可能有少數遺漏，可見前端性能優化不是一件簡簡單單的事情，其涉及的內容不少。你們能夠根據實際狀況將這些方法應用到本身的項目當中，要想所有作到幾乎是不可能的，但作到用戶可接受的原則仍是很容易實現的。歡迎你們加入QQ 前端技術交流羣 544587175,技術來自於交流。