這麼多前端優化點你都記得住嗎？

zwwill發表於2017-12-06
前端優化

　　圍繞前端的效能多如牛毛，涉及到方方面面，以下我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列。注意，是羅列不是展開，遇到不會不懂的點還請站外擴充套件。

　　開車速度有點快，坐穩了。

　　tips : 這麼多前端優化點你都記得住嗎？反正我是收藏起來備查的。

　PC瀏覽器前端優化策略

　　PC端優化的策略很多，如 YSlow（YSlow 是 Yahoo 釋出的一款 Firefox 外掛，現 Chrome 也可安裝，可以對網站的頁面效能進行分析，提出對該頁面效能優化的建議）原則，或者 Chrome 自帶的 Audits 等，總結起來主要包括網路載入類、頁面渲染類、CSS 優化類、JavaScript 執行類、快取類、圖片類、架構協議類等幾類，下面逐一介紹。

　　網路載入類

　　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,20Jul201623:00:00GMT">

　　6．合理設定 Etag 和 Last-Modified

　　合理設定 Etag 和 Last-Modified 使用瀏覽器快取，對於未修改的檔案，靜態資源伺服器會向瀏覽器端返回304，讓瀏覽器從快取中讀取檔案，減少 Web 資源下載的頻寬消耗並降低伺服器負載。

<meta http-equiv="last-modified" content="Sun,05 Nov 2017 13:45:57 GMT">

　　7．減少頁面重定向

　　頁面每次重定向都會延長頁面內容返回的等待延時，一次重定向大約需要200毫秒不等的時間開銷（無快取），為了保證使用者儘快看到頁面內容，要儘量避免頁面重定向。

　　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 方法會發起兩次 TCP 資料包傳輸，首先傳送檔案頭，然後傳送 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" >

　　頁面渲染類

　　1．把 CSS 資源引用放到 HTML 檔案頂部

　　一般推薦將所有 CSS 資源儘早指定在 HTML 文件 <head> 中，這樣瀏覽器可以優先下載 CSS 並儘早完成頁面渲染。

　　2．JavaScript 資源引用放到 HTML 檔案底部

　　JavaScript 資源放到 HTML 文件底部可以防止 JavaScript 的載入和解析執行對頁面渲染造成阻塞。由於 JavaScript 資源預設是解析阻塞的，除非被標記為非同步或者通過其他的非同步方式載入，否則會阻塞 HTML DOM 解析和 CSS 渲染的過程。

　　3．儘量預先設定圖片等大小

　　在載入大量的圖片元素時，儘量預先限定圖片的尺寸大小，否則在圖片載入過程中會更新圖片的排版資訊，產生大量的重排

　　4．不要在 HTML 中直接縮放圖片

　　在 HTML 中直接縮放圖片會導致頁面內容的重排重繪，此時可能會使頁面中的其他操作產生卡頓，因此要儘量減少在頁面中直接進行圖片縮放。

　　5．減少 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="圖片" >

　　6．儘量避免在選擇器末尾新增萬用字元

　　CSS 解析匹配到 渲染樹的過程是從右到左的逆向匹配，在選擇器末尾新增萬用字元至少會增加一倍多計算量。

　　7．減少使用關係型樣式表的寫法

　　直接使用唯一的類名即可最大限度的提升渲染引擎繪製渲染樹等效率

　　8．儘量減少使用JS動畫

　　JS 直接操作 DOM 極容易引起頁面的重排

　　9．CSS 動畫使用 translate、scale 代替 top、height

　　儘量使用 CSS3 的 translate、scale 屬性代替 top、left 和 height、width，避免大量的重排計算

　　10．儘量避免使用<table>、<iframe>

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

　　11．避免執行耗時的 JavaScript

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

　　12．避免使用 CSS 表示式或 CSS 濾鏡

　　CSS 表示式或 CSS 濾鏡的解析渲染速度是比較慢的，在有其他解決方案的情況下應該儘量避免使用。

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

　移動端瀏覽器前端優化策略

　　相對於桌面端瀏覽器，移動端 Web 瀏覽器上有一些較為明顯的特點：裝置螢幕較小、新特性相容性較好、支援一些較新的 HTML5 和 CSS3 特性、需要與 Native 應用互動等。但移動端瀏覽器可用的 CPU 計算資源和網路資源極為有限，因此要做好移動端 Web 上的優化往往需要做更多的事情。首先，在移動端 Web 的前端頁面渲染中，桌面瀏覽器端上的優化規則同樣適用，此外針對移動端也要做一些極致的優化來達到更好的效果。需要注意的是，並不是移動端的優化原則在桌面瀏覽器端就不適用，而是由於相容性和差異性的原因，一些優化原則在移動端更具代表性。

　　網路載入類

　　1．首屏資料請求提前，避免 JavaScript 檔案載入後才請求資料

　　為了進一步提升頁面載入速度，可以考慮將頁面的資料請求儘可能提前，避免在 JavaScript 載入完成後才去請求資料。通常資料請求是頁面內容渲染中關鍵路徑最長的部分，而且不能並行，所以如果能將資料請求提前，可以極大程度上縮短頁面內容的渲染完成時間。

　　2．首屏載入和按需載入，非首屏內容滾屏載入，保證首屏內容最小化

　　由於移動端網路速度相對較慢，網路資源有限，因此為了儘快完成頁面內容的載入，需要保證首屏載入資源最小化，非首屏內容使用滾動的方式非同步載入。一般推薦移動端頁面首屏資料展示延時最長不超過3秒。目前中國聯通 3G 的網路速度為 338KB/s（2.71Mb/s），所以推薦首屏所有資源大小不超過 1014KB，即大約不超過 1MB。

　　3．模組化資源並行下載

　　在移動端資源載入中，儘量保證 JavaScript 資源並行載入，主要指的是模組化 JavaScript 資源的非同步載入，例如AMD的非同步模組，使用並行的載入方式能夠縮短多個檔案資源的載入時間。

　　4．inline 首屏必備的 CSS 和 JavaScript

　　通常為了在 HTML 載入完成時能使瀏覽器中有基本的樣式，需要將頁面渲染時必備的 CSS 和 JavaScript 通過 <script> 或 <style> 內聯到頁面中，避免頁面 HTML 載入完成到頁面內容展示這段過程中頁面出現空白。

<!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:#ccc;
    }
    </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" href="//cdn.domain.com" >

　　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>

　　4．嘗試使用 PWA 模式

　　PWA（Progressive Web Apps）是 Google 提出的用前沿的 Web 技術為網頁提供 App 般使用體驗的一系列方案。

　　圖片類

　　1．圖片壓縮處理

　　在移動端，通常要保證頁面中一切用到的圖片都是經過壓縮優化處理的，而不是以原圖的形式直接使用的，因為那樣很消耗流量，而且載入時間更長。

　　2．使用較小的圖片，合理使用 base64 內嵌圖片

　　在頁面使用的背景圖片不多且較小的情況下，可以將圖片轉化成 base64 編碼嵌入到 HTML 頁面或 CSS 檔案中，這樣可以減少頁面的 HTTP 請求數。需要注意的是，要保證圖片較小，一般圖片大小超過 2KB 就不推薦使用 base64 嵌入顯示了。

.class-name{
    background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAALCAMAAABxsOwqAAAAYFBMVEWnxwusyQukxQudwQyZvgyhxAyfwgyxzAsUHQGOuA0aJAERGAFIXwSTugyEqgtqhghQZgUwQQIpOQKbuguVtQuKrAuCowp2kQlheghTbQZHWQU7SwVAVgQ6TgQlLwMeKwFOemyQAAAAVElEQVQI1y3JVRaAIAAF0UconXbvf5ei8HfPDIQQhBAAFE10iKig3SLRNN4SP/p+N08VC0YnfIlNWtqIkhg/TPYbCvhqdHAWRXPZSp3g3CWZvVLXC6OJA3ukv0AaAAAAAElFTkSuQmCC');
}

　　3．使用更高壓縮比格式的圖片

　　使用具有較高壓縮比格式的圖片，如 webp（需要設計降級相容方案）等。在同等圖片畫質的情況下，高壓縮比格式的圖片體積更小，能夠更快完成檔案傳輸，節省網路流量。

<img src="//cdn.domain.com/path/photo.webp" alt="webp格式圖片" >

　　4．圖片懶載入

　　為了保證頁面內容的最小化，加速頁面的渲染，儘可能節省移動端網路流量，頁面中的圖片資源推薦使用懶載入實現，在頁面滾動時動態載入圖片。

<img data-src="//cdn.domain.com/path/photo.jpg" alt="懶載入圖片" >

　　5．使用 MediaQuery 或 srcset 根據不同螢幕載入不同大小圖片

　　在介紹響應式的章節中我們瞭解到，針對不同的移動端螢幕尺寸和解析度，輸出不同大小的圖片或背景圖能保證在使用者體驗不降低的前提下節省網路流量，加快部分機型的圖片載入速度，這在移動端非常值得推薦。

　　6．使用 iconfont 代替圖片圖示

　　在頁面中儘可能使用 iconfont 來代替圖片圖示，這樣做的好處有以下幾個：

  • 使用 iconfont 體積較小，而且是向量圖，因此縮放時不會失真；

  • 可以方便地修改圖片大小尺寸和呈現顏色。

　　但是需要注意的是，iconfont 引用不同 webfont 格式時的相容性寫法，根據經驗推薦儘量按照以下順序書寫，否則不容易相容到所有的瀏覽器上。

@font-face{
    font-family:iconfont;
    src:url("./iconfont.eot");
    src:url("./iconfont.eot?#iefix")  format("eot"),
        url("./iconfont.woff")  format("woff"),
        url("./iconfont.ttf")  format("truetype");
}

　　7．定義圖片大小限制

　　載入的單張圖片一般建議不超過 30KB，避免大圖片載入時間長而阻塞頁面其他資源的下載，因此推薦在 10KB 以內。如果使用者上傳的圖片過大，建議設定告警系統，幫助我們觀察瞭解整個網站的圖片流量情況，做出進一步的改善。

　　8．強快取策略

　　對於一些「永遠」不會變的圖片可以使用強快取的方式快取在使用者的瀏覽器上。

　　指令碼類

　　1．儘量使用 id

　　選擇器選擇頁面 DOM 元素時儘量使用 id 選擇器，因為 id 選擇器速度最快。

　　2．合理快取 DOM 物件

　　對於需要重複使用的 DOM 物件，要優先設定快取變數，避免每次使用時都要從整個DOM樹中重新查詢。

//不推薦
$('#mod.active').remove('active');
$('#mod.not-active').addClass('active');

//推薦
let $mod=$('#mod');
$mod.find('.active').remove('active');
$mod.find('.not-active').addClass('active');

　　3．頁面元素儘量使用事件代理，避免直接事件繫結

　　使用事件代理可以避免對每個元素都進行繫結，並且可以避免出現記憶體洩露及需要動態新增元素的事件繫結問題，所以儘量不要直接使用事件繫結。

//不推薦
$('.btn').on('click',function(e){
    console.log(this);
});

//推薦
$('body').on('click','.btn',function(e){
    console.log(this);
});

　　4．使用 touchstart 代替 click

　　由於移動端螢幕的設計， touchstart 事件和 click 事件觸發時間之間存在 300 毫秒的延時，所以在頁面中沒有實現 touchmove 滾動處理的情況下，可以使用 touchstart 事件來代替元素的 click 事件，加快頁面點選的響應速度，提高使用者體驗。但同時我們也要注意頁面重疊元素 touch 動作的點選穿透問題。

//不推薦
$('body').on('click','.btn',function(e){
    console.log(this);
});

//推薦
$('body').on('touchstart','.btn',function(e){
    console.log(this);
});

　　5．避免 touchmove、scroll 連續事件處理

　　需要對 touchmove、scroll 這類可能連續觸發回撥的事件設定事件節流，例如設定每隔 16ms（60 幀的幀間隔為 16.7ms，因此可以合理地設定為 16ms ）才進行一次事件處理，避免頻繁的事件呼叫導致移動端頁面卡頓。

//不推薦
$('.scroller').on('touchmove','.btn',function(e){
    console.log(this);
});

//推薦
$('.scroller').on('touchmove','.btn',function(e){
    let self=this;
    setTimeout(function(){
        console.log(self);
    },16);
});

　　6．避免使用 eval、with，使用 join 代替連線符＋，推薦使用 ECMAScript6 的字串模板

　　這些都是一些基礎的安全指令碼編寫問題，儘可能使用較高效率的特性來完成這些操作，避免不規範或不安全的寫法。

　　7．儘量使用 ECMAScript6＋的特性來程式設計

　　ECMAScript6＋ 一定程度上更加安全高效，而且部分特性執行速度更快，也是未來規範的需要，所以推薦使用 ECMAScript6＋ 的新特性來完成後面的開發。

　　渲染類

　　1．使用 Viewport 固定螢幕渲染，可以加速頁面渲染內容

　　一般認為，在移動端設定 Viewport 可以加速頁面的渲染，同時可以避免縮放導致頁面重排重繪。在移動端固定 Viewport 設定的方法如下。

<!--設定viewport不縮放-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

　　2．避免各種形式重排重繪

　　頁面的重排重繪很耗效能，所以一定要儘可能減少頁面的重排重繪，例如頁面圖片大小變化、元素位置變化等這些情況都會導致重排重繪。

　　3．使用 CSS3 動畫，開啟GPU加速

　　使用 CSS3 動畫時可以設定 transform:translateZ(0) 來開啟移動裝置瀏覽器的GPU圖形處理加速，讓動畫過程更加流暢，但需要注意的是，在 Native WebView 下 GPU 加速有機率產生 App Crash。

-webkit-transform:translateZ(0);
    -ms-transform:translateZ(0);
     -o-transform:translateZ(0);
        transform:translateZ(0);

　　4．合理使用 Canvas 和 requestAnimationFrame

　　選擇 Canvas 或 requestAnimationFrame 等更高效的動畫實現方式，儘量避免使用 setTimeout、setInterval 等方式來直接處理連續動畫。

　　5．SVG 代替圖片

　　部分情況下可以考慮使用 SVG 代替圖片實現動畫，因為使用 SVG 格式內容更小，而且 SVG DOM 結構方便調整。

　　6．不濫用 float

　　在 DOM 渲染樹生成後的佈局渲染階段，使用 float 的元素佈局計算比較耗效能，所以儘量減少 float 的使用，推薦使用固定佈局或 flex-box 彈性佈局的方式來實現頁面元素佈局。

　　7．不濫用 web 字型或過多 font-size 宣告

　　過多的 font-size 宣告會增加字型的大小計算，而且也沒有必要的。

　　8．做好指令碼容錯

　　指令碼容錯可以避免「非正常環境」的執行錯誤影響頁面的載入和不相關功能的使用

　　架構協議類

　　1．嘗試使用 SPDY 和 HTTP2

　　在條件允許的情況下可以考慮使用 SPDY 協議來進行檔案資源傳輸，利用連線複用加快傳輸過程，縮短資源載入時間。HTTP2 在未來也是可以考慮嘗試的。

　　2．使用後端資料渲染

　　使用後端資料渲染的方式可以加快頁面內容的渲染展示，避免空白頁面的出現，同時可以解決移動端頁面SEO的問題。如果條件允許，後端資料渲染是一個很不錯的實踐思路。後面的章節會詳細介紹後端資料渲染的相關內容。

　　3．使用 NativeView 代替 DOM 的效能劣勢

　　可以嘗試使用 NativeView 的 MNV＊ 開發模式來避免 HTML DOM 效能慢的問題，目前使用 MNV＊ 的開發模式已經可以將頁面內容渲染體驗做到接近客戶端 Native 應用的體驗了。但需要避免 js Framework 和 native Framework 的頻繁互動。

　總結

　　關於頁面優化的常用技術手段和思路主要包括以上這些，儘管列舉出很多，但仍可能有少數遺漏，可見前端效能優化不是一件簡簡單單的事情，其涉及的內容很多。大家可以根據實際情況將這些方法應用到自己的專案當中，要想全部做到幾乎是不可能的，但做到使用者可接受的原則還是很容易實現的。

　　另外，如果你有比較好的優化點想要擴充，歡迎下方評論。

相關文章