雅虎十四條性能優化原則

歡迎訪問我的博客，祝碼農同胞們早日走上人生巔峰，迎娶白富美~~~

首先我去看了《雅虎十四條性能優化原則》，當然是看大佬博客翻譯過來的，純英文的我看不懂

Web 應用性能優化黃金法則: 先優化前端程序 (front-end) 的性能,因為這是80% 或以上的最終用戶響應時間的花費所在

減少HTTP請求

使用CDN

添加Expires頭

壓縮組件

將樣式表放在頭部

將腳本放在底部

避免CSS表達式

使用外部的js和css

減少DNS查找

精簡js

避免重定向

刪除重復腳本

配置ETag

使Ajax可緩存

原文中寫的很詳細，但是整個文章結構不是很明顯，所以本文總結了下重點，并整理了一下結構，想看更加詳細的請移步14條Yahoo（雅虎）十四條優化原則

減少HTTP請求

80%的最終用戶響應時間花在前端程序上,而其大部分時間則花在各種頁面元素, 如圖像、 樣式表、 腳本和 Flash 等的下載上

減少頁面元素：簡化頁面設計

image：使用精靈圖，配合 background-image 和 background-position實現部分圖片

Combined files ：組合多個腳本文件到單一文件，同樣的，樣式也可以采用類似的方式處理

描述：40-60% 據的日常訪問是首次訪問,因此為首次訪問者加快頁面訪問速度是用戶體驗的關鍵

CDN

CDN(Content Delivery Network, 內容分發網絡 )

是地理上分布的web server的集合,用于更高效地發布內容。 通常基于網絡遠近來選擇給具體用戶服務的 web server

用戶離 web server 的遠近對響應時間也有很大影響。從用戶角度看,把內容部署到多個地理位置分散的服務器上將有效提高頁面裝載速度

分布靜態內容

使用如Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服務提供商的服務將是劃算的

上面是原文中提供的CDN服務商，但我記得國內百度、阿里應該都有CDN服務，應該也是可用的，但由于使用CDN需要域名備案，我的域名暫未來得及備案，所以暫未測試

Expires Header

通過使用Expires header, 在客戶端緩存更多的腳本文件、樣式表、圖像文件和 Flash

Expires header常用于圖像文件,但是它也應該用于腳本文件、樣式表和 Flash

如果服務器是Apache 的話,您可以使用ExpiresDefault基于當期日期來設置過期日期,如: ExpiresDefault “access plus 10 years設置過期時間為從請求時間開始計算的10 年

注意：如果使用超長的過期時間,則當內容改變時,必須修改文件名稱

壓縮頁面元素

通過壓縮HTTP響應內容可減少頁面響應時間

Accept-Encoding: gzip, deflate

如果 Web server 檢查到 Accept-Encoding 頭,它會使用客戶端支持的方法來壓 縮 HTTP 響應,會設置 Content-Encoding 頭,如:Content-Encoding: gzip

Gzip 是目前最流行及有效的壓縮方法

如果是Apache,在 1.3 版本下需 使用 mod_gzip 模塊,而在 2.x 版本下,則需使用mod_deflate

Web server 根據文件類型來決定是否壓縮: 一般HTML、腳本文件、樣式表文件等進行壓縮

圖像文件和 PDF 文件一般不應該被壓縮,因為它 們本來就是壓縮格式保存的

把樣式表放在頭部

瀏覽器會阻塞顯示直到樣式表下載完畢,因此我們需要把樣式表放在 HEAD部分

把樣式表移到HEAD部分可以提高界面加載速度

把腳本文件放在底部

我們需盡量把它們放在頁面的底部,這樣一方面能順序顯示,另方面可達到最大的并行下載

腳本阻塞并行下載數量，HTTP/1.1 規范建議瀏覽器每個主機的并行下載數不超過2 個。 因此如果您把圖像文件分布到多臺機器的話,就可以達到超過2個的并行下載

但是當腳本文件下載時,瀏覽器不會啟動其他的并行下載,甚至其他主機的下載也不啟動

所以直接將腳本放在底部

避免 CSS 表達式

CSS 表達式是功能強大的(同時也是危險的)用于動態設置CSS屬性的方式

直接以明確的數值來寫，不寫表達式

如果必須動態設置的話,可使用事件處理函數代替

把JavaScript和CSS放到外部文件中

在現實世界中,使用外部文件會加快頁面顯示速度,因為外部文件會被瀏覽器緩存

減少DNS查詢次數

DNS用于映射主機名和IP地址,一般一次解析需要 20~120 毫秒

把內容分布到至少2 個,最多4個不同的主機名上

最小化JavaScript代碼

最小化JavaScript代碼指在JS代碼中刪除不必要的字符,從而降低下載時間

兩個流行的工具是JSMin 和YUI Compressor

它通過刪除注釋和空格來減少源碼大小,同時它還可以對代碼進行混淆處理。 作為混淆的一部分,函數名和變量名被替換成短的字符串,這使得代碼更緊湊,同時也更難讀,使得難于被反向工程

Dojo Compressor (ShrinkSafe)是最常見的混淆工具

內嵌的腳本代碼也應該被最小化

避免重定向

重定向功能是通過301和302這兩個HTTP狀態碼完成的

在 Apache 下,可以通過Alias,mod_rewrite或 DirectorySlash 等方式來解決該問題

刪除重復的腳本文件

在一個頁面中包含重復的JS腳本文件會影響性能,即它會建立不必要的HTTP請求和額外的JS執行

一個避免重復的腳本文件的方式是使用模板系統來建立腳本管理模塊。。

除了防止 重復的腳本文件外,該模塊還可以實現依賴性檢查和增加版本號到腳本文件名中,從而實現超長的過期時間

配置 ETags

ETags 是用于確定瀏覽器緩存中元素是否與 Web server 中的元素相匹配的機制, 它是比 last-modified date 更靈活的元素驗證機制

如果您未用到 ETags 系統提供的靈活的驗證機制,最好刪除 ETag。刪除 ETag會減少 http response 及后續請求的 HTTP 頭的大小

緩存 Ajax

性能優化法則同樣適用于web 2.0 應用。提高Ajax的性能最重要的方式是使得其response 可緩存

總結

說實話，以上的十四條，有些是我沒看懂的，例如Expires Header和配置 ETags，先記錄在這里，其實依照我對Web前端開發的理解，也總結出一些優化原則，也可能與上面的有些重復，但可能會更好理解一些

我的優化原則

HTML

避免使用table，因為table要等其中內容完全下載之后才顯示，顯然是比div+css慢的

css

提取css，分離到單獨的頁面

當需要設置的樣式有很多時，設置className而不是直接操作style

刪除多余的選擇器

利用工具最小化css文件，刪除多余空格、符號等

css文件一般放在頭部，link中

js

提取js，分離到單獨的頁面

用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能

多次使用的DOM節點的結果，要變量本地化，減少IO讀取操作

盡量少用全局變量

刪除多余的腳本

刪除多余的變量、函數等

利用工具最小化js文件，刪除多余空格、符號等

一般腳本放在頁面底部

圖片處理

可以使用icon字體圖標代替的圖片盡量使用icon字體圖標

盡量用css3代替， 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等

優化圖片格式為常用格式

精靈圖

用CSS或JavaScript實現預加載

在保證最不失真的情況下盡可能壓縮圖像文件的大小

網絡加速

CDN托管

總結

以上是生活随笔為你收集整理的雅虎十四条性能优化原则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。