前端頁面優化提速

前端頁面優化提速

減小對服務器的文件請求

1. 雪碧圖技術，合併多個圖片文件爲一個，使用background-position來使用；

2. 合併多個css文件爲單個，合併多個js腳本爲一個；劣勢在於多個頁面中的公共腳本和樣式就沒法緩存到客戶端了；

3. 使用base64編碼展現圖片，這個網址能夠轉換圖片；不過不推薦在用戶屢次訪問的頁面中，由於雖然不須要從服務器get代碼，可是也沒法緩存在客戶端，會致使每次訪問都要重複渲染。10k以上的圖片base64碼就會很龐大，給瀏覽器解析都形成很大壓力

4. 把小塊的css，js腳本寫在頁面中，雖然可能增長了代碼量，不利於維護，可是，能夠有效下降http請求數量。

5. 使用http-equiv="expires"元標籤,設置在某一時刻過時，以前一直從緩存中獲取頁面文件。

   content="Sunday 26 October 2008 01:00 GMT"

減小文件大小

1. 壓縮腳本或者樣式文件，gulp,grunt等(混淆變量函數名)

2. 圖片壓縮低品質gif，中jpg,高png,還有淘寶的webp

3. 使用Font Awesome來加載頁面中的小圖標，原理是用@font-face來下載一個小的文字ui包，將圖標用文字形式展示。

4. 使用svg圖片格式，圖片做爲代碼引入，極大下降文件大小。

適度使用CDN

若是用戶在其餘的頁面中已經下載了這個cdn中的文件，就無需下載便可訪問，減小了對服務器訪問的壓力，並且多個域名中下載，提升了效率（firefox只容許一個域名中異步下載2個腳本）。

固然了，cdn也帶來了dns解析的壓力。若是引入了多個cdn的文件，會致使解析dns而陷入等待中。

最好的方式一個頁面是從兩個域（cdn域和站點域）中加載所須要的文件。

延遲請求、異步加載腳本

腳本下載完畢後執行期間會引發執行阻塞，推薦使用requireJS（AMD規範） 或 seaJS（CMD規範） 來異步加載腳本並處理模塊依賴的，前者將「依賴前置」（預加載全部被依賴腳本模塊，執行速度最快），後者走的「依賴就近」（懶加載被依賴腳本模塊，請求腳本更科學），你能夠根據項目具體需求來選擇最合適的。

延遲請求首屏外的文件

就是常說的lazyload，在首屏加載完成後再緩慢加載後面的內容。例如：

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="a.jpg">

頁面初次加載時，用的是base64編碼，或者使用一張很小的load.gif，data-src中是真實的地址，以後在頁面加載完成以後替換該圖片地址。

function init() {
    var imgDefer = document.getElementsByTagName('img');
    for (var i=0; i<imgDefer.length; i++) {
        if(imgDefer[i].getAttribute('data-src')) {
             imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
        } 
    }
}
window.onload = init;

合理安排頁面結構

應當把用戶須要看見的東西放在首要加載的地方，至於那些次要的能夠放在後面加載。

其餘

• css中少使用import，這樣會在加載一個樣式時，引發另外一個樣式的加載；
• 避免頁面文件重定向查找，好像進了一條衚衕，才發現寫個牌子：此路不通，走左邊那條。
• 減小無效請求，請求不存在的資源會引發阻塞（直到返回錯誤信息）。
• 腳本文件放在樣式文件後
• gzip