雅虎的Web優(yōu)化最佳實(shí)踐

1.? 內(nèi)容優(yōu)化

• 盡量減少HTTP請(qǐng)求：常見(jiàn)方法包括合并多個(gè)CSS文件和JavaScript文件，利用CSS?Sprites整合圖像，Image map（圖像中不同的區(qū)域設(shè)置不同的鏈接），內(nèi)聯(lián)圖象（使用? data:?URL?scheme?在實(shí)際的頁(yè)面嵌入圖像數(shù)據(jù)）等。
• 減少DNS查找
• 避免重定向
• 使Ajax可緩存
• 延遲加載組件：考慮哪些內(nèi)容是頁(yè)面呈現(xiàn)時(shí)所必需首先加載的、哪些內(nèi)容和結(jié)構(gòu)可以稍后再加載，根據(jù)這個(gè)優(yōu)先級(jí)進(jìn)行設(shè)定。
• 預(yù)加載組件：預(yù)加載是在瀏覽器空閑時(shí)請(qǐng)求將來(lái)可能會(huì)用到的頁(yè)面內(nèi)容（如圖像、樣式表和腳本）。當(dāng)用戶要訪問(wèn)下一個(gè)頁(yè)面時(shí)，頁(yè)面中的內(nèi)容大部分已經(jīng)加載到緩存中了，因此可以大大改善訪問(wèn)速度。
• 減少DOM元素?cái)?shù)量：頁(yè)面中存在大量DOM?元素，會(huì)導(dǎo)致JavaScript遍歷DOM的效率變慢。
• 根據(jù)域名劃分頁(yè)面內(nèi)容：把頁(yè)面內(nèi)容劃分成若干部分可以使你最大限度地實(shí)現(xiàn)平行下載。但要確保你使用的域名數(shù)量在2個(gè)到4個(gè)之間（否則與第2條沖突）。
• 最小化iframe的數(shù)量：iframes 提供了一個(gè)簡(jiǎn)單的方式把一個(gè)網(wǎng)站的內(nèi)容嵌入到另一個(gè)網(wǎng)站中。但其創(chuàng)建速度比其他包括JavaScript和CSS的DOM元素的創(chuàng)建慢了1-2個(gè)數(shù)量級(jí)。
• 避免404：HTTP請(qǐng)求時(shí)間消耗是很大的，因此使用HTTP請(qǐng)求來(lái)獲得一個(gè)沒(méi)有用處的響應(yīng)（例如404沒(méi)有找到頁(yè)面）是完全沒(méi)有必要的，它只會(huì)降低用戶體驗(yàn)而不會(huì)有一點(diǎn)好處。

2. 服務(wù)器優(yōu)化

• 使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）：把你的網(wǎng)站內(nèi)容分散到多個(gè)、處于不同地域位置的服務(wù)器上可以加快下載速度。
• 添加Expires或Cache-Control信息頭：對(duì)于靜態(tài)內(nèi)容，可設(shè)置文件頭過(guò)期時(shí)間Expires的值為“Never expire（永不過(guò)期）”；對(duì)于動(dòng)態(tài)內(nèi)容，可使用恰當(dāng)?shù)腃ache-Control文件頭來(lái)幫助瀏覽器進(jìn)行有條件的請(qǐng)求。
• Gzip壓縮
• 設(shè)置ETag：ETags（Entity tags，實(shí)體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制。
• 提前刷新緩沖區(qū)： 當(dāng)用戶請(qǐng)求一個(gè)頁(yè)面時(shí)，服務(wù)器會(huì)花費(fèi)200到500毫秒用于后臺(tái)組織HTML文件。在這期間，瀏覽器會(huì)一直空閑等待數(shù)據(jù)返回。在PHP中，可以使用 flush()方法，它允許你把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)送給瀏覽器，這時(shí)瀏覽器就會(huì)可以下載文件中的內(nèi)容（腳本等）而后臺(tái)同時(shí)處理剩余的 HTML頁(yè)面。
• 對(duì)Ajax請(qǐng)求使用GET方法：當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法會(huì)首先發(fā)送文件頭，然后才發(fā)送數(shù)據(jù)。因此使用GET最為恰當(dāng)。
• 避免空的圖像src

3. Cookie優(yōu)化

• 減小cookie大小：去除不必要的coockie，并使coockie體積盡量小以減少對(duì)用戶響應(yīng)的影響
• 針對(duì)Web組件使用域名無(wú)關(guān)的Cookie：對(duì)靜態(tài)組件的Cookie讀取是一種浪費(fèi)，使用另一個(gè)無(wú)Cookie的域名來(lái)存放靜態(tài)組件是一個(gè)好方法，或者也可以在Cookie中只存放帶www的域名。

4. CSS優(yōu)化

• 將CSS代碼放在HTML頁(yè)面的頂部
• 避免使用CSS表達(dá)式：CSS表達(dá)式在執(zhí)行時(shí)候的運(yùn)算量非常大，會(huì)對(duì)頁(yè)面性能產(chǎn)生大的影響
• 使用<link>來(lái)代替@import
• 避免使用Filters：IE獨(dú)有屬性AlphaImageLoader用于修正IE 7以下版本中PNG圖片的半透明效果，但它的問(wèn)題在于瀏覽器加載圖片時(shí)它會(huì)終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。

5. JavaScript優(yōu)化

• 將JavaScript腳本放在頁(yè)面的底部
• 將JavaScript和CSS作為外部文件來(lái)引用：在實(shí)際應(yīng)用中使用外部文件可以提高頁(yè)面速度，因?yàn)镴avaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存。
• 縮小JavaScript和CSS
• 刪除重復(fù)的腳本
• 最小化DOM的訪問(wèn)：使用JavaScript訪問(wèn)DOM元素比較慢
• 開(kāi)發(fā)智能的事件處理程序

6. 圖像優(yōu)化

• 優(yōu)化圖片大小
• 通過(guò)CSS Sprites優(yōu)化圖片
• 不要在HTML中使用縮放圖片
• favicon.ico要小而且可緩存

7. 針對(duì)移動(dòng)優(yōu)化

• 保持組件大小在25KB以下：主要是因?yàn)閕Phone不能緩存大于25K的文件（注意這里指的是解壓縮后的大小）。
• 將組件打包成為一個(gè)復(fù)合文檔：把頁(yè)面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email，它能夠使你在一個(gè)HTTP請(qǐng)求中獲取多個(gè)組件。

更多信息：http://developer.yahoo.com/performance/rules.html（中文翻譯）

轉(zhuǎn)載于:https://www.cnblogs.com/FineDay/articles/3553913.html

總結(jié)

以上是生活随笔為你收集整理的雅虎的Web优化最佳实践的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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