為什么要提升web性能？

Web性能黃金準則：只有10%~20%的最終用戶響應(yīng)時間花在了下載html文檔上，其余的80%~90%時間花在了下載頁面組件上。

web性能對于用戶體驗有及其重要的影響，根據(jù)著名的`2-5-8`原則：

當(dāng)用戶在2秒以內(nèi)得到響應(yīng)，會感覺系統(tǒng)的響應(yīng)非�？� 當(dāng)用戶在2-5秒之內(nèi)得到響應(yīng)，會感覺系統(tǒng)的響應(yīng)速度還可以 當(dāng)用戶在5-8秒之內(nèi)得到響應(yīng)，會感覺系統(tǒng)的響應(yīng)非常慢，但還可以接受 當(dāng)用戶在8秒之后都沒有得到響應(yīng)，會感覺系統(tǒng)糟透了，甚至系統(tǒng)已經(jīng)掛掉；要么打開競爭對手的網(wǎng)站，要么重新發(fā)起第二次請求。

凡事都需要研究，通過科學(xué)的研究我們就可以找到事物的發(fā)展規(guī)律。這里要感謝雅虎的工程師總結(jié)的14條前端優(yōu)化法則，使得我們可以站在巨人的肩膀上。《高性能網(wǎng)站建設(shè)》這本書中的14條優(yōu)化原則，總結(jié)起來主要是以下個方面的優(yōu)化：

1. 減少HTTP請求
2. 頁面內(nèi)部優(yōu)化
3. 啟用緩存
4. 減少下載量
5. 網(wǎng)絡(luò)連接上的優(yōu)化

為什么減少HTTP請求可以提高Web性能？

要回答這個問題，我們就要了解當(dāng)瀏覽器向服務(wù)器發(fā)送一個http請求知道獲取數(shù)據(jù)都經(jīng)歷哪些過程：

開啟一個鏈接（tcp/ip的三次握手過程） -> 發(fā)送請求 -> 等待（網(wǎng)絡(luò)延遲跟服務(wù)器的處理時間） -> 下載數(shù)據(jù)

我們看一下百度首頁中的http請求在各階段耗費的時間，上面不同的顏色代表下圖中的不同階段

可以看到除了圖片之外，其余大部分http請求的事件花在了建立連接與等待階段。

http協(xié)議建立在TIC/IP協(xié)議之上，在TCP/IP協(xié)議中，TCP協(xié)議提供可靠的連接服務(wù)，采用三次握手建立一個連接。 簡單來說三次握手就是一個身份確認的過程：

（第一次握手：主機A發(fā)送位碼為syn＝1,隨機產(chǎn)生seq number=1234567的數(shù)據(jù)包到服務(wù)器，主機B由SYN=1知道，A要求建立聯(lián)機；）

晴兒：你是瀟哥哥嗎，我是晴兒

（第二次握手：主機B收到請求后要確認聯(lián)機信息，向A發(fā)送ack number=(主機A的seq+1),syn=1,ack=1,隨機產(chǎn)生seq=7654321的包）

瀟劍：這貨是誰，一簫一劍走江湖，下一句是什么？

（第三次握手：主機A收到后檢查ack number是否正確，即第一次發(fā)送的seq number+1,以及位碼ack是否為1，若正確，主機A會再發(fā)送ack number=(主機B的seq+1),ack=1，主機B收到后確認seq值與ack=1則連接建立成功。）

晴兒：這首詩。。。你真的是瀟哥哥，一蕭一劍走江湖，千古情愁酒一回。。。

瀟劍：晴兒，你真的是晴兒。。。。

（啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。）

言歸正傳，這個過程也是需要消耗時間的，在百度首頁找到一個極端的例子：

而等待的時間通常也大于內(nèi)容下載的時間，這里同樣找到一個極端例子：

由此我們可以得出結(jié)論：一個http請求絕大多數(shù)的時間消耗在了建立連接跟等待的時間，優(yōu)化的方法是減少http請求。

如何提高web性能？

1、減少HTTP請求

一般來說要減少http請求通常從兩個方面下手：減少圖片的請求、減少腳本文件與樣式表的請求

圖片的減少通常有兩種方式：css sprites、內(nèi)聯(lián)圖片、IconFont。

CSS Sprites：將多張圖片合并成一幅單獨的圖片，使用css的background-position屬性，將html元素的背景圖片放到sprites 圖片中的期望位置上。使用這項技術(shù)的附加優(yōu)點是他降低了下載量，合并后的圖片比分離的圖片和更小，因為它降低了圖片自身的開銷（顏色表、格式信息等等）。實際項目中css sprites是一項體力活，因為開發(fā)過程中需要對這張大圖進行維護（添加、減少圖片），張鑫旭同學(xué)的文章中有介紹如何管理sprites圖片可以作為參考（這里）。如果需要在頁面中為背景、鏈接、導(dǎo)航欄提供大量的圖片，css sprites絕對是一種優(yōu)秀的解決方案（干凈的標簽、較少的圖片、較短的響應(yīng)時間）。

內(nèi)聯(lián)圖片：通過使用data:URL模式可以再頁面中包含圖片而無需任何額外的請求。缺點就是IE8以下的瀏覽器不支持這種方式，而IE8在數(shù)據(jù)大小上有限制，只能支持23kb以內(nèi)的數(shù)據(jù)。對于較小的圖片來說可以直接內(nèi)聯(lián)到web頁面中，但對于大圖片內(nèi)聯(lián)到頁面里會導(dǎo)致頁面變大，聰明的做法是使用css，將內(nèi)聯(lián)的圖片作為背景使用，并放到外部樣式表中，這意味著數(shù)據(jù)可以緩存在樣式表內(nèi)部。使用外部樣式表雖然增加了一個http請求，但樣式可以被瀏覽器緩存，得到額外的收獲。另外一點需要注意：base64是有損壓縮。

IconFont：圖標字體，這是近年來新流行的一種以字體代替圖片的技術(shù)。它可以適應(yīng)任何分辨率而不會出現(xiàn)圖片模糊問題，與圖片相比它具有更小的容量，更高的靈活性（像字體一樣可以設(shè)置圖標大小、顏色、透明度、hover狀態(tài)、反轉(zhuǎn)等），IE8以上的瀏覽器都支持該技術(shù)。在使用IconFont之前，你首先要確定你選則的字體庫是否是收費。詳細內(nèi)容可以參考這篇文章：圖標字體化淺談

減少腳本與樣式表的請求主要原則就是合并。在實際開發(fā)中我們遵循模塊化的原則將代碼分散到許多小文件中，按照軟件開發(fā)的原則這是完全正確的，但對于上線頁面來說，每一個文件都會產(chǎn)生一個http請求，嚴重影響性能。和css sprites一樣，將這些小文件合并到一個文件中，可以減少http請求的數(shù)量并縮短最終用戶響應(yīng)時間。在合并過程中我們還需要使用工具精簡（移除不必要的字符以減小文件大小縮減下載時間）和混淆（除了移除不必要字符外，還會改寫源代碼，比如函數(shù)和變量名使用更短的標量名）Javascript代碼。對于采用AMD或CMD進行模塊化開發(fā)的同學(xué)，在合并過程中通常會將依賴的其他模塊打包到一個文件中，而模板html通常以字符串的方式內(nèi)聯(lián)到Javascript文件中。目前最常用的前端構(gòu)建工具就是glup，這里有一篇初步應(yīng)用的文章：前端 | gulp 打包 require.js 模塊依賴

標簽： Web性能優(yōu)化 網(wǎng)站優(yōu)化 性能優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。