對一名前端工作人員來說,性能的優(yōu)化還是很重要的.

減少http請求

? 1.圖片地圖:假設(shè)導(dǎo)航欄有多張圖片,點(diǎn)擊每張圖片都會(huì)進(jìn)入一個(gè)連接,這樣在加載時(shí)就會(huì)產(chǎn)生多個(gè)htttp請求.而此時(shí)如果我們用圖片地圖——所有點(diǎn)擊提交到同一個(gè)url,同時(shí)提交用戶點(diǎn)擊的x,y坐標(biāo),服務(wù)端再根據(jù)坐標(biāo)映射響應(yīng),如此一來就只需一個(gè)http請求即可,大大提高效率.

? 2.CSS Sprites: CSS精靈.將多張圖片融合到一張圖里面,通過css的一些技術(shù)布局得到網(wǎng)頁上.

? 3.字體圖標(biāo):在可以大量使用字體圖標(biāo)的地方我們盡可能使用字體圖標(biāo),可以減少很多圖片的使用,從而減少http請求.

使用CDN

? CDN的全稱Content Delivery Network,即內(nèi)容分發(fā)網(wǎng)絡(luò).其基本思路就是盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)闡述速度和穩(wěn)定性的瓶頸和環(huán)節(jié),使內(nèi)容傳輸更快/更穩(wěn)定.

? 如果應(yīng)用程序web服務(wù)器離用戶更近,那么一個(gè)http請求的響應(yīng)時(shí)間將縮短.

? CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))是一組分布在多個(gè)不同地理位置的web服務(wù)器,用于更加有效的向用戶發(fā)布內(nèi)容. CDN系統(tǒng)能夠?qū)崟r(shí)地根據(jù)網(wǎng)絡(luò)流量(網(wǎng)絡(luò)上傳輸?shù)臄?shù)據(jù)量)和各節(jié)點(diǎn)的連接、負(fù)載狀況以及到用戶的距離和響應(yīng)時(shí)間等綜合信息將用戶的請求重新導(dǎo)向離用戶最近的服務(wù)節(jié)點(diǎn)上。其目的是使用戶可就近取得所需內(nèi)容，解決 Internet網(wǎng)絡(luò)擁擠的狀況，提高用戶訪問網(wǎng)站的響應(yīng)速度。

添加Expires

? 頁面的初次訪問者會(huì)進(jìn)行很多http請求,但是通過使用一個(gè)長久的Expires頭,可以使這些組件被緩存,下次訪問的時(shí)候,就可以減少不必要的http請求,從而提高加載速度.

壓縮組件

? 從HTTP1.1開始,web客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持 Accept-Encoding:gzip,defalte.

? 如果web服務(wù)器看到請求中這個(gè)頭,就會(huì)使用客戶端列出來的方法中的一種來進(jìn)行壓縮.web服務(wù)器通過響應(yīng)中的Content-Encoding來通知web客戶端. Content-Encoding:gzip.

將樣式表放在頭部

? 將樣式表寫在頭部對于實(shí)際頁面加載的事件并不能造成太大影響,但這回減少首屏出現(xiàn)的時(shí)間,使內(nèi)容逐步呈現(xiàn),改善用戶體驗(yàn),防止白屏.

將腳本放在底部

? 更樣式表相同,腳本放在底部對實(shí)際頁面加載的時(shí)間并不能造成太大影響,但會(huì)減少首屏出現(xiàn)的時(shí)間,是內(nèi)容逐步呈現(xiàn).

? js的下載和執(zhí)行會(huì)阻塞DOM樹的構(gòu)建(中斷了DOM樹的更新),所以script標(biāo)簽放在首屏范圍內(nèi)的HTML代碼段了會(huì)截?cái)嗍灼恋膬?nèi)容.

避免CSS表達(dá)式

? CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的一種強(qiáng)大并且危險(xiǎn)的方式,它受到了IE5到IE8之間版本的支持.

? 用js事件處理機(jī)制來動(dòng)態(tài)改變元素的樣式,使函數(shù)運(yùn)行次數(shù)在可控范圍之內(nèi).

使用外部的js和CSS

? 當(dāng)腳本或者樣式是從外部引入的文件時(shí),瀏覽器就有可能緩存它們,從而在以后加載的時(shí)候能夠直接使用緩存,而HTML文檔的大小減小,從而提高加載速度.

減少DNS查找

? 域名解析是頁面加載的第一步.當(dāng)我們在瀏覽器的地址欄輸入網(wǎng)址,按回車后,先從域名解析開始,過程是域名解析→發(fā)起TCP的3次握手→建立TCP連接后發(fā)起http請求→服務(wù)器響應(yīng)http請求,瀏覽器得到html代碼→瀏覽器解析html代碼,并請求html代碼中的資源(如css,js圖片等)→瀏覽器對頁面進(jìn)行渲染呈現(xiàn)給用戶.

精簡javascript

? 精簡就是從代碼中移除不必要的字符以減少文件大小，降低加載的時(shí)間。代碼精簡的時(shí)候會(huì)移除不必要的空白字符（空格，換行、制表符），這樣整個(gè)文件的大小就變小了。

精簡CSS

? 除了移除空白、注釋之外，CSS可以通過優(yōu)化來獲得更多的節(jié)省：合并相同的類；移除不使用的類；使用縮寫(屬性連寫)

避免重定向

? 重定向的含義:將用戶從一個(gè)url重新跳轉(zhuǎn)到另一個(gè)url.

? 當(dāng)頁面發(fā)生了重定向，就會(huì)延遲整個(gè)HTML文檔的傳輸。在HTML文檔到達(dá)之前，頁面中不會(huì)呈現(xiàn)任何東西，也沒有任何組件會(huì)被下載。

刪除重復(fù)腳本

? 在團(tuán)隊(duì)開發(fā)一個(gè)項(xiàng)目時(shí)，由于不同開發(fā)者之間都可能會(huì)向頁面中添加頁面或組件，因此可能相同的腳本會(huì)被添加多次。

? 重復(fù)的腳本會(huì)造成不必要的HTTP請求（如果沒有緩存該腳本的話），并且執(zhí)行多余的JavaScript浪費(fèi)時(shí)間，還有可能造成錯(cuò)誤。

配置ETag

? ETag含義:實(shí)體標(biāo)簽(EntityTag)是唯一標(biāo)識了一個(gè)組件的一個(gè)特定版本的字符串，是web服務(wù)器用于確認(rèn)緩存組件的有效性的一種機(jī)制，通常可以使用組件的某些屬性來構(gòu)造它。

? 為什么要引入ETag

? ETag主要是為了解決Last-Modified無法解決的一些問題：

一些文件也許會(huì)周期性的更改，但是他的內(nèi)容并不改變(僅僅改變的修改時(shí)間)，這個(gè)時(shí)候我們并不希望客戶端認(rèn)為這個(gè)文件被修改了，而重新GET;

某些文件修改非常頻繁，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改，(比方說1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級的，這種修改無法判斷(或者說UNIX記錄MTIME只能精確到秒);

某些服務(wù)器不能精確的得到文件的最后修改時(shí)間。

使Ajax可緩存

? 什么樣的AJAX請求可以被緩存？

? POST的請求，是不可以在客戶端緩存的，每次請求都需要發(fā)送給服務(wù)器進(jìn)行處理，每次都會(huì)返回狀態(tài)碼200。（可以在服務(wù)器端對數(shù)據(jù)進(jìn)行緩存，以便提高處理速度）

? GET的請求，是可以（而且默認(rèn)）在客戶端進(jìn)行緩存的，除非指定了不同的地址，否則同一個(gè)地址的AJAX請求，不會(huì)重復(fù)在服務(wù)器執(zhí)行，而是返回304。

? Ajax請求使用緩存

? 在進(jìn)行Ajax請求的時(shí)候，可以選擇盡量使用get方法，這樣可以使用客戶端的緩存，提高請求速度。

總結(jié)

以上是生活随笔為你收集整理的web前端性能优化--如何提高页面加载速度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。