性能黃金法則:
只有10%~20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上。其余的80%~90%時(shí)間花在了下載頁面中的所有組件上。
規(guī)則1 減少HTTP請(qǐng)求
可以通過使用圖片地圖,CSS Sprites(有利有弊),內(nèi)聯(lián)圖片(data:URL模式,IE不支持,不能被緩存),合并腳本和樣式表。
規(guī)則2 使用內(nèi)容發(fā)布網(wǎng)絡(luò)
如果應(yīng)用程序web服務(wù)器離用戶更近,則一個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短 ;
如果組件web服務(wù)器離用戶更近,則多個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。
內(nèi)容發(fā)布網(wǎng)絡(luò)(CDN)是一組分布在多個(gè)不同地理位置的web服務(wù)器,用于更加有效地向用戶發(fā)布內(nèi)容。
規(guī)則3 添加Expires頭
web服務(wù)器使用Expires頭告訴web客戶端他可以使用一個(gè)組件的當(dāng)前副本,直到指定的時(shí)間為止。要求服務(wù)器與客戶端的時(shí)鐘嚴(yán)格同步,并且要在時(shí)間過期后在服務(wù)器配置中提供一個(gè)新的日期。
Max-Age和mod_expires可以彌補(bǔ)Expires的不足。
規(guī)則4 壓縮組件
從HTTp1.1開始,
規(guī)則5 將樣式表放在頂部
逐步呈現(xiàn),避免白屏
規(guī)則6 將腳本放在底部
HTTP1.1規(guī)范建議瀏覽器從每個(gè)主機(jī)名并行下載兩個(gè)組件,在下載腳本時(shí),并行下載實(shí)際上是被禁用的。
原因之一是腳本有可能使用document.write來修改頁面內(nèi)容,因此瀏覽器會(huì)等待,以確保頁面能夠恰當(dāng)?shù)夭季郑?br />原因之二是為了保證腳本能夠按照正確的順序執(zhí)行,如果并行下載多個(gè)腳本,就無法保證響應(yīng)是按照特定順序到達(dá)瀏覽器。
將腳本放在頂部將會(huì)阻塞對(duì)其后面內(nèi)容的呈現(xiàn),并且會(huì)阻塞對(duì)其后面組件的下載。
規(guī)則7 避免CSS表達(dá)式
表達(dá)式expression方法被其他瀏覽器忽略,但是對(duì)于IE來說是一個(gè)有用的工具。能夠在IE中設(shè)置屬性,創(chuàng)建跨瀏覽器的一致體驗(yàn)。例如,IE[IE6,IE7(Quirk),IE8(Quirk]不支持min-width屬性,用表達(dá)式的方法可以解決這一問題:
新聞熱點(diǎn)
疑難解答
圖片精選