如何進(jìn)行Web前端性能優(yōu)化

這篇文章給大家介紹如何進(jìn)行Web前端性能優(yōu)化 ，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的貢獻(xiàn)。廣為人知的優(yōu)化規(guī)則也由 13 條到 14 條，再到 20 條，乃至現(xiàn)在的 34 條--真是與時(shí)俱進(jìn)啊。最新的 34 條也針對不同的角度做了分類。

面向內(nèi)容的優(yōu)化規(guī)則目前有 10 條。

1. 盡量減少 HTTP 請求 (Make Fewer HTTP Requests)
作為第一條，可能也是最重要的一條。根據(jù) Yahoo! 研究團(tuán)隊(duì)的數(shù)據(jù)分析，有很大一部分用戶訪問會(huì)因?yàn)檫@一條而取得最大受益。有幾種常見的方法能切實(shí)減少 HTTP 請求：

•1) 合并文件，比如把多個(gè) CSS 文件合成一個(gè)；
•2) CSS Sprites 利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對定位；參見：CSS Sprites: Image Slicing's Kiss of Death
•3) 圖像地圖
•4) 內(nèi)聯(lián)圖象 使用 data: URL scheme 在實(shí)際的頁面嵌入圖像數(shù)據(jù).
2. 減少 DNS 查找 (Reduce DNS Lookups)
    必須明確的一點(diǎn)，DNS 查找的開銷是很大的。另外，我倒是覺得這是 Yahoo! 所有站點(diǎn)的通病，Yahoo！主站點(diǎn)可能還不夠明顯，一些分站點(diǎn)，存在明顯的類似問題。對于國內(nèi)站點(diǎn)來說，如果過多的使用了站外的 Widget ，也很容易引起過多的 DNS 查找問題。

3. 避免重定向 (Avoid Redirects)
     不是絕對的避免，盡量減少。另外，應(yīng)該注意一些不必要的重定向。比如對 Web 站點(diǎn)子目錄的后面添加個(gè) / (Slash) ，就能有效避免一次重定向。http://www.dbanotes.net/arch 與 http://www.dbanotes.net/arch/ 二者之間是有差異的。如果是 Apache 服務(wù)器，通過配置 Alias 或mod_rewrite 或是 DirectorySlash 能夠消除這個(gè)問題。

4. 使得 Ajax 可緩存 (Make Ajax Cacheable)
     響應(yīng)時(shí)間對 Ajax 來說至關(guān)重要，否則用戶體驗(yàn)絕對好不到哪里去。提高響應(yīng)時(shí)間的有效手段就是 Cache 。其它的一些優(yōu)化規(guī)則對這一條也是有效的。

5. 延遲載入組件 (Post-load Components)
6. 預(yù)載入組件 (Preload Components)
      上面兩條嚴(yán)格說來，都是屬于異步這個(gè)思想靈活運(yùn)用的事兒。

7. 減少 DOM 元素?cái)?shù)量 (Reduce the Number of DOM Elements)
8. 切分組件到多個(gè)域 (Split Components Across Domains)
    主要的目的是提高頁面組件并行下載能力。但不要跨太多域名，否則就和第二條有些沖突了。

9. 最小化 iframe 的數(shù)量 (Minimize the Number of iframes)
      熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。針對前端優(yōu)化來說 iframe 有其好處，也有其弊端，一分為二看問題吧。

10. 杜絕 http 404 錯(cuò)誤 (No 404s)
               對頁面鏈接的充分測試加上對 Web 服務(wù)器 error 日志的不斷跟蹤能有效減少 404 錯(cuò)誤，亦能提升用戶體驗(yàn)。值得一提的是，CSS 與 Java Script 引起的 404 錯(cuò)誤因?yàn)槎ㄎ簧陨?quot;難"一點(diǎn)而往往容易被忽略。

這是內(nèi)容篇的 10 條。應(yīng)該說具體引導(dǎo)性的內(nèi)容還不夠詳細(xì)。逐漸會(huì)根據(jù)自己的理解補(bǔ)充上來。

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐第二部分面向 Server 。

目前共計(jì)有 6 條實(shí)踐規(guī)則?！咀ⅲ@最多算技術(shù)筆記，查看最原始內(nèi)容，還請?jiān)L問：Exceptional Performance : Best Practices for Speeding Up Your Web Site 】

1. 使用 CDN (Use a Content Delivery Network)
國內(nèi) CDN 的普及還不夠。不過我們有獨(dú)特的電信、網(wǎng)通之間的問題，如果針對這個(gè)作優(yōu)化，基本上也算能收到 CDN 或類似的效果吧(假裝如此)?！綯in 說國內(nèi) CDN 用的挺多，看看 CDN 廠商的市場就知道了，還沒走入尋常百姓家】

2. 添加 Expires 或 Cache-Control 信息頭 (Add an Expires or a Cache-Control Header)
各個(gè)瀏覽器都有針對的方案, Apache 例子【注意：下面的說明例子還不夠精細(xì)，具體的環(huán)境上還要加一些調(diào)整】:

ExpiresActive On
ExpiresByType image/gif "modification plus 1 weeks"Lighttpd 啟用 mod_expire 模塊 后：

$HTTP["url"] =~ "\.(jpg|gif|png)___FCKpd___1quot; {
     expire.url = ( "" => "access 1 years" )
}Nginx 例子參考:

location ~* \.(jpg|gif|png)$ {
  if (-f $request_filename) {
        expires      max;
    break;
  }       
}

3. 壓縮內(nèi)容 (Gzip Components)
對于絕大多數(shù)站點(diǎn)，這都是必要的一步，能有效減輕網(wǎng)絡(luò)流量壓力?；蛟S有人擔(dān)心對 CPU 壓縮對于 CPU 的影響，放心大膽的整吧，沒事兒。Nginx 例子：

gzip            on;
gzip_types      text/plain text/html text/css ext/javascript;另外參見：

IIS 如何啟用 Gzip 壓縮?
4. 設(shè)置 Etags (Configure ETags)
對于 Etag，可能是多數(shù)網(wǎng)站維護(hù)者都會(huì)忽略的地方。在這一系列優(yōu)化規(guī)則出現(xiàn)之前，可能互聯(lián)網(wǎng)上絕大多數(shù)站點(diǎn)都對這個(gè)問題忽略了。當(dāng)然，Etag 對多數(shù)站點(diǎn)性能的影響并不是很大。除非是面向 RSS 的網(wǎng)站?！究吹接信笥雅u說寫的簡略，并且說 IE 不支持 ETag。明確說一下：IE 支持 ETag，倒是使用 IIS 要注意相關(guān) Etag Bug?！?/p>

補(bǔ)充：我的意思是"很多網(wǎng)站在不注意的情況下都是打開 Etag 的，而沒有網(wǎng)站關(guān)心如何用，消耗資源而不知。并不是說 Etag 不好，合理利用 Etag ，絕對能取得很好的收益.

5. 盡早刷新 Buffer (Flush the Buffer Early)
對這一條，琢磨了半天，貌似還是異步的思路。能更好的提升用戶體驗(yàn)?

6. 對 AJAX 請求使用 GET 方法 (Use GET for AJAX Requests)
XMLHttpRequest POST 要兩步，而 GET 只需要一步。但要注意的是在 IE 上 GET 最大能處理的 URL 長度是 2K。

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐第三部分面向 Cookie 。目前只有 2 條實(shí)踐規(guī)則。

1. 縮小 Cookie (Reduce Cookie Size)
Cookie 是個(gè)很有趣的話題。根據(jù) RFC 2109 的描述，每個(gè)客戶端最多保持 300 個(gè) Cookie，針對每個(gè)域名最多 20 個(gè) Cookie (實(shí)際上多數(shù)瀏覽器現(xiàn)在都比這個(gè)多，比如 Firefox 是 50 個(gè)) ，每個(gè) Cookie 最多 4K，注意這里的 4K 根據(jù)不同的瀏覽器可能不是嚴(yán)格的 4096 。別扯遠(yuǎn)了，對于 Cookie 最重要的就是，盡量控制 Cookie 的大小，不要塞入一些無用的信息。

2. 針對 Web 組件使用域名無關(guān)性的 Cookie (Use Cookie-free Domains for Components)
這個(gè)話題在此前針對 Web 圖片服務(wù)器的討論中曾經(jīng)提及。這里說的 Web 組件(Component)，多指靜態(tài)文件，比如圖片 CSS 等，Yahoo! 的靜態(tài)文件都在 yimg.com 上，客戶端請求靜態(tài)文件的時(shí)候，減少了 Cookie 的反復(fù)傳輸對主域名 (yahoo.com) 的影響。

從這篇 When the Cookie Crumbles 能看出，MySpace 和 eBay 的 Cookie 都不小的，想必是對用戶行為比較關(guān)心。eBay 前不久構(gòu)造了 Personalization Platform ，就是從 Cookie 的限制中跳出來。

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐第四部分面向 CSS。

目前共計(jì)有 6 條實(shí)踐規(guī)則。另請參見 Mozilla 開發(fā)者中心的文章：Writing Efficient CSS

1. 把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
官方的解釋我覺得多少有點(diǎn)語焉不詳。這一條其實(shí)和用戶訪問期望有關(guān)。CSS 放到最頂部，瀏覽器能夠有針對性的對 HTML 頁面從頂?shù)较逻M(jìn)行解析和渲染。沒有人喜歡等待，而瀏覽器已經(jīng)考慮到了這一點(diǎn)。

2. 避免 CSS 表達(dá)式 (Avoid CSS Expressions)
個(gè)人認(rèn)為通過 CSS 表達(dá)式能做到的事情，通過其它手段也同樣能做到而且風(fēng)險(xiǎn)更小一些。

3. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
剝離后，能夠有針對性的對其進(jìn)行單獨(dú)的處理策略，比如壓縮或者緩存策略。

4. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
如果沒有 JavaScript 與 CSS 可能更好。但，這是不可能的，SO，盡量小點(diǎn)吧。語法能簡寫的簡寫。

5. 使用 <link> 而不是@importChoose <link> over @import
在 IE 中 @import 指令等同于把 link 標(biāo)記寫在 HTML 的底部。而這與第一條相違背。

6. 避免使用Filter (Avoid Filters)

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐之 JavaScript 篇

這部分有 6 條規(guī)則，和 CSS 篇 重復(fù)的有幾條。前端優(yōu)化最佳實(shí)踐，最重要的還是"實(shí)踐"，要理解這東西容易得很，關(guān)鍵是要去"實(shí)踐"，去"執(zhí)行"，去"反饋"，去獲取受益。

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
當(dāng)一個(gè)腳本在下載的時(shí)候，瀏覽器干不了其它的事兒(串行了)。所以，把它扔到最后面去處理。對于一些功能性的腳本，可能實(shí)現(xiàn)起來有些兩難。不過對于國內(nèi)網(wǎng)站來說，有很多使用 Google Analytics 服務(wù)進(jìn)行網(wǎng)站數(shù)據(jù)分析的。這這一點(diǎn)來說，絕對可行的建議，放到頁面最底下。

2. Make JavaScript and CSS External
參見 CSS 篇的描述

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
參見 CSS 篇的描述

4. 移除重復(fù)腳本 (Remove Duplicate Scripts)
對于一些歷史遺留站點(diǎn)或是論壇類的網(wǎng)站來說，這倒是比較常見的。接手維護(hù)人前后變化過多，每個(gè)人都有自己的一套。這就會(huì)帶來一些潛在的麻煩。

5. 減少 DOM 訪問 (Minimize DOM Access)
有三條指導(dǎo)建議:

&bull;緩存已經(jīng)訪問過的元素 (Cache references to accessed elements)
&bull;"離線"更新節(jié)點(diǎn), 再將它們添加到樹中 (Update nodes "offline" and then add them to the tree)
&bull;避免使用 JavaScript 輸出頁面布局--應(yīng)該是 CSS 的事兒 (Avoid fixing layout with JavaScript)
6. Develop Smart Event Handlers
除了英文解釋外，這里也提醒一下注意關(guān)于 Java Script 內(nèi)存泄漏的問題。

另外推薦一篇《如何優(yōu)化 JavaScript 腳本的性能》，關(guān)于 Ajax 優(yōu)化指導(dǎo)原則，可以參見 提高 Ajax 應(yīng)用程序性能，避開 Web 服務(wù)漏洞。

后記1) ：整理得差不多之后，發(fā)現(xiàn)網(wǎng)絡(luò)上已經(jīng)有一篇 《Yahoo!網(wǎng)站性能最佳體驗(yàn)的34條黃金守則》，是翻譯稿?？磥砦易隽艘徊糠种貜?fù)勞動(dòng)。

后記 2)：CSS / JavaScript 都有優(yōu)化規(guī)則。但似乎缺少了對 Flash 的優(yōu)化實(shí)踐。

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐第六部分面向 圖片(Image)

這部分目前有 4 條規(guī)則。在最近的 Velocity 2008 技術(shù)大會(huì)上，Yahoo! 的 Stoyan Stefanov 做的 Image Optimization: How Many of These 7 Mistakes Are You Making 也非常有參考價(jià)值。結(jié)合一起說一下。

1. 優(yōu)化圖片 (Optimize Images)
使用 GIF 、JPG 還是 PNG 格式的圖片? 盡可能的使用 PNG 格式的圖片，更多的功能，更小的尺寸(與 GIF 相比)。

對于 PNG 圖片，考慮用 Pngcrush 或類似的工具進(jìn)行優(yōu)化。常見的工具如下表:

&bull;pngcrush http://pmt.sourceforge.net/pngcrush/
&bull;pngrewrite http://www.pobox.com/~jason1/pngrewrite/
&bull;OptiPNG http://www.cs.toronto.edu/~cosmin/pngtech/optipng/ (refer: 教程)
&bull;PNGOut http://advsys.net/ken/utils.htm
另請參見: Five Tips For the Effective Use of PNG Images

對 JPEG 圖片的優(yōu)化工具：

&bull;jpegtran (http://jpegclub.org/)
必需要強(qiáng)調(diào)的是，圖片設(shè)計(jì)的同學(xué)啊，請考慮設(shè)計(jì)面向 Web 的圖片，不要?jiǎng)硬粍?dòng)就設(shè)計(jì)超過可接受尺寸之外大家伙，這應(yīng)該是一種習(xí)慣，而不是什么高超的技能，只需要記住就成了。

2. 使用 CSS Sprites 技巧對圖片優(yōu)化 (Optimize CSS Sprites)
之前提到過，簡單的說就是"利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對定位"，把多次 HTTP 調(diào)用變?yōu)橐淮握{(diào)用，更多參考：CSS Sprites: Image Slicing's Kiss of Death

補(bǔ)充一下：對于這個(gè)技巧我曾經(jīng)見到有人濫用的。把多個(gè)背景圖片揉成一個(gè)，減少　HTTP 調(diào)用，這是一個(gè)很好的思路。但一定要記住這個(gè)大圖片不能太"重"，我看到過 100 多K 的背景圖。一個(gè)圖片就把整個(gè)網(wǎng)站拖得很慢。比較好的例子可以參考雅虎關(guān)系的這個(gè)圖.

更新：使用 CSS Sprites 的一個(gè)潛在的副作用是客戶端將消耗更多內(nèi)存(參考)。

3. 不要在 HTML 中使用縮放圖片 (Don't Scale Images in HTML)
更多的時(shí)候，可能是因?yàn)橥祽卸鴽]有制作合適大小的圖片，如果是批量處理圖片的話，可能一條 ImageMagic 命令（convert ）就能搞定 。必須提及的是，看到太多的對圖片拉伸很難看的頁面，救救這些頁面!

4. 用更小的并且可緩存的 favicon.ico (Make favicon.ico Small and Cacheable)
更小，可緩存，這兩條可能都不是問題。問題是，太多站點(diǎn)根本沒有 favicon.ico 。有的時(shí)候，判斷獨(dú)立域名的 Blog 是否專業(yè)，基本看一下是否有 favicon.ico 就差不多了。

--EOF--

補(bǔ)充：視覺設(shè)計(jì)者應(yīng)該盡量考慮控制圖片大小，推薦在 200K 以下。這不是胡說的，參考頁面。

網(wǎng)頁制作poluoluo文章簡介：Web 前端性能優(yōu)化是個(gè)大話題，是個(gè)值得運(yùn)維人員持續(xù)跟蹤的話題，是被很多網(wǎng)站無情忽視的技術(shù)。

Web 前端優(yōu)化最佳實(shí)踐最后一部分是針對移動(dòng)應(yīng)用的，其實(shí)只是針對 iPhone 的，目前只有兩條規(guī)則。

1. 單個(gè)數(shù)據(jù)對象小于 25K (Keep Components under 25K)
這個(gè)似乎只是針對 iPhone 研究的。建議保持單個(gè) Web 數(shù)據(jù)對象在 25 K 以下。為什么是 25K? Apple 官方信息指出可緩存到內(nèi)存中的 Web 對象最大支持到 10M，但經(jīng)過測試，發(fā)現(xiàn)也就是 25K 左右。

iPhone 在市場上的優(yōu)異表現(xiàn)，讓 Web 人員不得不考慮如何針對其進(jìn)行優(yōu)化。相信這部分內(nèi)容也在不斷變化中。

2. Pack Components into a Multipart Document
把Web 頁面組件打包成一個(gè)多部分組成的文檔。其目的是減少 HTTP 請求。

關(guān)于如何進(jìn)行Web前端性能優(yōu)化 就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。