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

摘要: 前端性能優化是一個很寬泛的概念，本書前面的部分也多多少少提到一些前端優化方法，這也是咱們一直在關注的一件重要事情。配合各類方式、手段、輔助系統，前端優化的最終目的都是提高用戶體驗，改善頁面性能，咱們經常不遺餘力進行前端頁面優化，但卻忽略了這樣作的效果和意義。先不急於探究前端優化具體能夠怎樣去作，先看看什麼是前端性能，應該怎樣去了解和評價前端頁面的性能。

  

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

 

1、 網絡加載類

 

1．減小HTTP資源請求次數

  

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

 

2．減少HTTP請求大小

  

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

 

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

  

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

 

<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屬性中的空內容進行加載，直至加載失敗，這樣就阻塞了頁面中其餘資源的下載進程，並且最終加載到的內容是無效的，所以要儘可能避免。

 

<!-- 不推薦 -->

<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 2016 23:00:00 GMT" />

 

6．合理設置Etag和Last-Modified

 

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

 

<meta http-equiv="last-modified" content="Mon, 03 Oct 2016 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網絡加快同一個地理區域內重複靜態資源文件的響應下載速度，縮短資源請求時間。

 

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>

<script src="main.js" async></script>

 

使用async時，加載和渲染後續文檔元素的過程和main.js的加載與執行是並行的。使用defer時，加載後續文檔元素的過程和main.js的加載是並行的，可是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">

 

2、 頁面渲染類

 

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，由於iframe內資源的下載進程會阻塞父頁面靜態資源的下載與CSS及HTML DOM的解析。

 

6．避免運行耗時的JavaScript

  

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

 

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

  

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

 

// 不推薦

.opacity{

    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}