雅虎十四條性能優(yōu)化原則

歡迎訪問我的博客，祝碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰，迎娶白富美~~~

首先我去看了《雅虎十四條性能優(yōu)化原則》，當(dāng)然是看大佬博客翻譯過來(lái)的，純英文的我看不懂

Web 應(yīng)用性能優(yōu)化黃金法則: 先優(yōu)化前端程序 (front-end) 的性能,因?yàn)檫@是80% 或以上的最終用戶響應(yīng)時(shí)間的花費(fèi)所在

減少HTTP請(qǐng)求

使用CDN

添加Expires頭

壓縮組件

將樣式表放在頭部

將腳本放在底部

避免CSS表達(dá)式

使用外部的js和css

減少DNS查找

精簡(jiǎn)js

避免重定向

刪除重復(fù)腳本

配置ETag

使Ajax可緩存

原文中寫的很詳細(xì)，但是整個(gè)文章結(jié)構(gòu)不是很明顯，所以本文總結(jié)了下重點(diǎn)，并整理了一下結(jié)構(gòu)，想看更加詳細(xì)的請(qǐng)移步14條Yahoo（雅虎）十四條優(yōu)化原則

減少HTTP請(qǐng)求

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

減少頁(yè)面元素：簡(jiǎn)化頁(yè)面設(shè)計(jì)

image：使用精靈圖，配合 background-image 和 background-position實(shí)現(xiàn)部分圖片

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

描述：40-60% 據(jù)的日常訪問是首次訪問,因此為首次訪問者加快頁(yè)面訪問速度是用戶體驗(yàn)的關(guān)鍵

CDN

CDN(Content Delivery Network, 內(nèi)容分發(fā)網(wǎng)絡(luò) )

是地理上分布的web server的集合,用于更高效地發(fā)布內(nèi)容。 通?；诰W(wǎng)絡(luò)遠(yuǎn)近來(lái)選擇給具體用戶服務(wù)的 web server

用戶離 web server 的遠(yuǎn)近對(duì)響應(yīng)時(shí)間也有很大影響。從用戶角度看,把內(nèi)容部署到多個(gè)地理位置分散的服務(wù)器上將有效提高頁(yè)面裝載速度

分布靜態(tài)內(nèi)容

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

上面是原文中提供的CDN服務(wù)商，但我記得國(guó)內(nèi)百度、阿里應(yīng)該都有CDN服務(wù)，應(yīng)該也是可用的，但由于使用CDN需要域名備案，我的域名暫未來(lái)得及備案，所以暫未測(cè)試

Expires Header

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

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

如果服務(wù)器是Apache 的話,您可以使用ExpiresDefault基于當(dāng)期日期來(lái)設(shè)置過期日期,如: ExpiresDefault “access plus 10 years設(shè)置過期時(shí)間為從請(qǐng)求時(shí)間開始計(jì)算的10 年

注意：如果使用超長(zhǎng)的過期時(shí)間,則當(dāng)內(nèi)容改變時(shí),必須修改文件名稱

壓縮頁(yè)面元素

通過壓縮HTTP響應(yīng)內(nèi)容可減少頁(yè)面響應(yīng)時(shí)間

Accept-Encoding: gzip, deflate

如果 Web server 檢查到 Accept-Encoding 頭,它會(huì)使用客戶端支持的方法來(lái)壓 縮 HTTP 響應(yīng),會(huì)設(shè)置 Content-Encoding 頭,如:Content-Encoding: gzip

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

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

Web server 根據(jù)文件類型來(lái)決定是否壓縮: 一般HTML、腳本文件、樣式表文件等進(jìn)行壓縮

圖像文件和 PDF 文件一般不應(yīng)該被壓縮,因?yàn)樗?們本來(lái)就是壓縮格式保存的

把樣式表放在頭部

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

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

把腳本文件放在底部

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

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

但是當(dāng)腳本文件下載時(shí),瀏覽器不會(huì)啟動(dòng)其他的并行下載,甚至其他主機(jī)的下載也不啟動(dòng)

所以直接將腳本放在底部

避免 CSS 表達(dá)式

CSS 表達(dá)式是功能強(qiáng)大的(同時(shí)也是危險(xiǎn)的)用于動(dòng)態(tài)設(shè)置CSS屬性的方式

直接以明確的數(shù)值來(lái)寫，不寫表達(dá)式

如果必須動(dòng)態(tài)設(shè)置的話,可使用事件處理函數(shù)代替

把JavaScript和CSS放到外部文件中

在現(xiàn)實(shí)世界中,使用外部文件會(huì)加快頁(yè)面顯示速度,因?yàn)橥獠课募?huì)被瀏覽器緩存

減少DNS查詢次數(shù)

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

把內(nèi)容分布到至少2 個(gè),最多4個(gè)不同的主機(jī)名上

最小化JavaScript代碼

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

兩個(gè)流行的工具是JSMin 和YUI Compressor

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

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

內(nèi)嵌的腳本代碼也應(yīng)該被最小化

避免重定向

重定向功能是通過301和302這兩個(gè)HTTP狀態(tài)碼完成的

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

刪除重復(fù)的腳本文件

在一個(gè)頁(yè)面中包含重復(fù)的JS腳本文件會(huì)影響性能,即它會(huì)建立不必要的HTTP請(qǐng)求和額外的JS執(zhí)行

一個(gè)避免重復(fù)的腳本文件的方式是使用模板系統(tǒng)來(lái)建立腳本管理模塊。。

除了防止 重復(fù)的腳本文件外,該模塊還可以實(shí)現(xiàn)依賴性檢查和增加版本號(hào)到腳本文件名中,從而實(shí)現(xiàn)超長(zhǎng)的過期時(shí)間

配置 ETags

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

如果您未用到 ETags 系統(tǒng)提供的靈活的驗(yàn)證機(jī)制,最好刪除 ETag。刪除 ETag會(huì)減少 http response 及后續(xù)請(qǐng)求的 HTTP 頭的大小

緩存 Ajax

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

總結(jié)

說(shuō)實(shí)話，以上的十四條，有些是我沒看懂的，例如Expires Header和配置 ETags，先記錄在這里，其實(shí)依照我對(duì)Web前端開發(fā)的理解，也總結(jié)出一些優(yōu)化原則，也可能與上面的有些重復(fù)，但可能會(huì)更好理解一些

我的優(yōu)化原則

HTML

避免使用table，因?yàn)閠able要等其中內(nèi)容完全下載之后才顯示，顯然是比div+css慢的

css

提取css，分離到單獨(dú)的頁(yè)面

當(dāng)需要設(shè)置的樣式有很多時(shí)，設(shè)置className而不是直接操作style

刪除多余的選擇器

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

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

js

提取js，分離到單獨(dú)的頁(yè)面

用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能

多次使用的DOM節(jié)點(diǎn)的結(jié)果，要變量本地化，減少IO讀取操作

盡量少用全局變量

刪除多余的腳本

刪除多余的變量、函數(shù)等

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

一般腳本放在頁(yè)面底部

圖片處理

可以使用icon字體圖標(biāo)代替的圖片盡量使用icon字體圖標(biāo)

盡量用css3代替， 比如說(shuō)要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等

優(yōu)化圖片格式為常用格式

精靈圖

用CSS或JavaScript實(shí)現(xiàn)預(yù)加載

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

網(wǎng)絡(luò)加速

CDN托管

總結(jié)

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

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