頁面性能優(yōu)化辦法有哪些？| 技術(shù)頭條

長沙7喜 2019-04-07

展開全文

互聯(lián)網(wǎng)有一項著名的8秒原則。用戶在訪問Web網(wǎng)頁時，如果時間超過8秒就會感到不耐煩，如果加載需要太長時間，他們就會放棄訪問。大部分用戶希望網(wǎng)頁能在2秒之內(nèi)就完成加載。事實上，加載時間每多1秒，你就會流失7%的用戶。8秒并不是準確的8秒鐘，只是向網(wǎng)站開發(fā)者表明了加載時間的重要性。那我們?nèi)绾蝺?yōu)化頁面性能，提高頁面加載速度呢？

這是本文主要要探討的問題，然而性能優(yōu)化是個綜合性問題，沒有標準答案，想要面面俱到羅列出來，并非易事。本文只關(guān)注一些核心要點，以下是我總結(jié)性能優(yōu)化常見的辦法。

資源壓縮與合并

主要包括這些方面：html壓縮、css 壓縮、js的壓縮和混亂和文件合并。

資源壓縮可以從文件中去掉多余的字符，比如回車、空格。你在編輯器中寫代碼的時候，會使用縮進和注釋，這些方法無疑會讓你的代碼簡潔而且易讀，但它們也會在文檔中添加多余的字節(jié)。

1.html壓縮

html代碼壓縮就是壓縮這些在文本文件中有意義，但是在HTML中不顯示的字符，包括空格，制表符，換行符等，還有一些其他意義的字符，如HTML注釋也可以被壓縮。

如何進行html壓縮：

使用在線網(wǎng)站進行壓縮(開發(fā)過程中一般不用)；
nodejs 提供了html-minifier工具；
后端模板引擎渲染壓縮。

2.css代碼壓縮

css代碼壓縮簡單來說就是無效代碼刪除和css語義合并。

如何進行css壓縮：

使用在線網(wǎng)站進行壓縮(開發(fā)過程中一般不用)；
使用html-minifier工具；
使用clean-css對css壓縮。

3.js的壓縮和混亂

js的壓縮和混亂主要包括以下這幾部分：

無效字符的刪除；
剔除注釋；
代碼語義的縮減和優(yōu)化；
代碼保護(代碼邏輯變得混亂，降低代碼的可讀性，這點很重要)。

如何進行js的壓縮和混亂：

使用在線網(wǎng)站進行壓縮(開發(fā)過程中一般不用)；
使用html-minifier工具；
使用uglifyjs2對js進行壓縮。

其實css壓縮與js的壓縮和混亂比html壓縮收益要大得多，同時css代碼和js代碼比html代碼多得多，通過css壓縮和js壓縮帶來流量的減少，會非常明顯。所以對大公司來說，html壓縮可有可無，但css壓縮與js的壓縮和混亂必須要有！

4.文件合并

從上圖可以看出不合并請求有以下缺點：

文件與文件之間有插入的上行請求，增加了N-1個網(wǎng)絡(luò)延遲；
受丟包問題影響更嚴重；
keep-alive方式可能會出現(xiàn)狀況，經(jīng)過代理服務(wù)器時可能會被斷開，也就是說不能一直保持keep-alive的狀態(tài)。

壓縮合并css和js可以減少網(wǎng)站http請求的次數(shù)，但合并文件可能會帶來問題:首屏渲染和緩存失效問題。

那該如何處理這問題呢？——公共庫合并和不同頁面的合并。

如何進行文件合并：

使用在線網(wǎng)站進行文件合并；
使用nodejs實現(xiàn)文件合并(gulp、fis3)。

非核心代碼異步加載異步加載的方式

1、異步加載的方式

異步加載的三種方式——async和defer、動態(tài)腳本創(chuàng)建。

① async方式

async屬性是HTML5新增屬性，需要Chrome、FireFox、IE9+瀏覽器支持；
async屬性規(guī)定一旦腳本可用，則會異步執(zhí)行；
async屬性僅適用于外部腳本；
如果是多個腳本，該方法不能保證腳本按順序執(zhí)行。

<script type='text/javascript' src='xxx.js' async='async'></script>

② defer方式

兼容所有瀏覽器；
defer屬性規(guī)定是否對腳本執(zhí)行進行延遲，直到頁面加載為止；
如果是多個腳本，該方法可以確保所有設(shè)置了defer屬性的腳本按順序執(zhí)行；
如果腳本不會改變文檔的內(nèi)容，可將defer屬性加入到script標簽中，以便加快處理文檔的速度。

③動態(tài)創(chuàng)建script標簽

在還沒定義defer和async前，異步加載的方式是動態(tài)創(chuàng)建script，通過window.onload方法確保頁面加載完畢再將script標簽插入到DOM中。

具體代碼如下：

function addScriptTag(src){  
    var script = document.createElement('script');  
    script.setAttribute('type','text/javascript');  
    script.src = src;  
    document.body.appendChild(script);  
}  
window.onload = function(){  
    addScriptTag('js/index.js');  
}

2、異步加載的區(qū)別

1)defer是在HTML解析完之后才會執(zhí)行，如果是多個，按照加載的順序依次執(zhí)行；

2)async是在加載完之后立即執(zhí)行，如果是多個，執(zhí)行順序和加載順序無關(guān)；

其中藍色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間，這倆都是針對腳本的；綠色線代表 HTML 解析。

利用瀏覽器緩存

對于web應(yīng)用來說，緩存是提升頁面性能同時減少服務(wù)器壓力的利器。

瀏覽器緩存類型

1.強緩存：不會向服務(wù)器發(fā)送請求，直接從緩存中讀取資源，在chrome控制臺的network選項中可以看到該請求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache；

緩存的機制

強制緩存優(yōu)先于協(xié)商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請求的緩存失效，重新獲取請求結(jié)果，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存。

主要過程如下：

用戶行為對瀏覽器緩存的影響

地址欄訪問，鏈接跳轉(zhuǎn)是正常用戶行為，將會觸發(fā)瀏覽器緩存機制；
F5刷新，瀏覽器會設(shè)置max-age=0，跳過強緩存判斷，會進行協(xié)商緩存判斷；
ctrl+F5刷新，跳過強緩存和協(xié)商緩存，直接從服務(wù)器拉取資源。

使用CDN

大型Web應(yīng)用對速度的追求并沒有止步于僅僅利用瀏覽器緩存，因為瀏覽器緩存始終只是為了提升二次訪問的速度，對于首次訪問的加速，我們需要從網(wǎng)絡(luò)層面進行優(yōu)化，最常見的手段就是CDN（Content Delivery Network，內(nèi)容分發(fā)網(wǎng)絡(luò)）加速。

通過將靜態(tài)資源(例如javascript，css，圖片等等）緩存到離用戶很近的相同網(wǎng)絡(luò)運營商的CDN節(jié)點上，不但能提升用戶的訪問速度，還能節(jié)省服務(wù)器的帶寬消耗，降低負載。

CDN是怎么做到加速的呢？

其實這是CDN服務(wù)商在全國各個省份部署計算節(jié)點，CDN加速將網(wǎng)站的內(nèi)容緩存在網(wǎng)絡(luò)邊緣,不同地區(qū)的用戶就會訪問到離自己最近的相同網(wǎng)絡(luò)線路上的CDN節(jié)點，當請求達到CDN節(jié)點后，節(jié)點會判斷自己的內(nèi)容緩存是否有效，如果有效，則立即響應(yīng)緩存內(nèi)容給用戶，從而加快響應(yīng)速度。如果CDN節(jié)點的緩存失效，它會根據(jù)服務(wù)配置去我們的內(nèi)容源服務(wù)器獲取最新的資源響應(yīng)給用戶，并將內(nèi)容緩存下來以便響應(yīng)給后續(xù)訪問的用戶。

因此，一個地區(qū)內(nèi)只要有一個用戶先加載資源，在CDN中建立了緩存，該地區(qū)的其他后續(xù)用戶都能因此而受益。

預解析DNS

資源預加載是另一個性能優(yōu)化技術(shù)，我們可以使用該技術(shù)來預先告知瀏覽器某些資源可能在將來會被使用到。通過 DNS 預解析來告訴瀏覽器未來我們可能從某個特定的 URL 獲取資源，當瀏覽器真正使用到該域中的某個資源時就可以盡快地完成 DNS 解析。例如，我們將來可從 example.com 獲取圖片或音頻資源，那么可以在文檔頂部的標簽中加入以下內(nèi)容：

<link rel='dns-prefetch' href='//example.com'>

當我們從該 URL 請求一個資源時，就不再需要等待 DNS 的解析過程。該技術(shù)對使用第三方資源特別有用。通過簡單的一行代碼就可以告知那些兼容的瀏覽器進行 DNS 預解析，這意味著當瀏覽器真正請求該域中的某個資源時，DNS 的解析就已經(jīng)完成了,從而節(jié)省了寶貴的時間。

另外需要注意的是，瀏覽器會對a標簽的href自動啟用DNS Prefetching，所以a標簽里包含的域名不需要在head中手動設(shè)置link。但是在HTTPS下不起作用，需要meta來強制開啟功能。這個限制的原因是防止竊聽者根據(jù)DNS Prefetching推斷顯示在HTTPS頁面中超鏈接的主機名。

下面這句話作用是強制打開a標簽域名解析：