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

1 前言

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

2 減少HTTP請(qǐng)求

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

1. 減少頁面元素：簡化頁面設(shè)計(jì)
2. image：使用精靈圖，配合 background-image 和 background-position實(shí)現(xiàn)部分圖片
3. Combined files ：組合多個(gè)腳本文件到單一文件，同樣的，樣式也可以采用類似的方式處理
4. 描述：40-60% 據(jù)的日常訪問是首次訪問,因此為首次訪問者加快頁面訪問速度是用戶體驗(yàn)的關(guān)鍵

3 CDN

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

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

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

1. 分布靜態(tài)內(nèi)容
2. 使用如Akamai Technologies, Mirror Image Internet, 或 Limelight Networks 等 CDN 服務(wù)提供商的服務(wù)將是劃算的
3. 上面是原文中提供的CDN服務(wù)商，但我記得國內(nèi)百度、阿里應(yīng)該都有CDN服務(wù)，應(yīng)該也是可用的，但由于使用CDN需要域名備案，我的域名暫未來得及備案，所以暫未測試

4 Expires Header

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

1. Expires header常用于圖像文件,但是它也應(yīng)該用于腳本文件、樣式表和 Flash
2. 如果服務(wù)器是Apache 的話,您可以使用ExpiresDefault基于當(dāng)期日期來設(shè)置過期日期,如: ExpiresDefault “access plus 10 years設(shè)置過期時(shí)間為從請(qǐng)求時(shí)間開始計(jì)算的10 年
3. 注意：如果使用超長的過期時(shí)間,則當(dāng)內(nèi)容改變時(shí),必須修改文件名稱

5 壓縮頁面元素

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

1. Accept-Encoding: gzip, deflate
   1. 如果 Web server 檢查到 Accept-Encoding 頭,它會(huì)使用客戶端支持的方法來壓 縮 HTTP 響應(yīng),會(huì)設(shè)置 Content-Encoding 頭,如:Content-Encoding: gzip
   2. Gzip 是目前最流行及有效的壓縮方法
   3. 如果是Apache,在 1.3 版本下需 使用 mod_gzip 模塊,而在 2.x 版本下,則需使用mod_deflate
   4. Web server 根據(jù)文件類型來決定是否壓縮: 一般HTML、腳本文件、樣式表文件等進(jìn)行壓縮
   5. 圖像文件和 PDF 文件一般不應(yīng)該被壓縮,因?yàn)樗?們本來就是壓縮格式保存的

6 把樣式表放在頭部

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

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

7 把腳本文件放在底部

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

1. 腳本阻塞并行下載數(shù)量，HTTP/1.1 規(guī)范建議瀏覽器每個(gè)主機(jī)的并行下載數(shù)不超過2 個(gè)。 因此如果您把圖像文件分布到多臺(tái)機(jī)器的話,就可以達(dá)到超過2個(gè)的并行下載
2. 但是當(dāng)腳本文件下載時(shí),瀏覽器不會(huì)啟動(dòng)其他的并行下載,甚至其他主機(jī)的下載也不啟動(dòng)
3. 所以直接將腳本放在底部

8 避免 CSS 表達(dá)式

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

1. 直接以明確的數(shù)值來寫，不寫表達(dá)式
2. 如果必須動(dòng)態(tài)設(shè)置的話,可使用事件處理函數(shù)代替

9 把JavaScript和CSS放到外部文件中

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

10 減少DNS查詢次數(shù)

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

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

11 最小化JavaScript代碼

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

1. 兩個(gè)流行的工具是JSMin 和YUI Compressor
2. 它通過刪除注釋和空格來減少源碼大小,同時(shí)它還可以對(duì)代碼進(jìn)行混淆處理。 作為混淆的一部分,函數(shù)名和變量名被替換成短的字符串,這使得代碼更緊湊,同時(shí)也更難讀,使得難于被反向工程
3. Dojo Compressor (ShrinkSafe)是最常見的混淆工具
4. 內(nèi)嵌的腳本代碼也應(yīng)該被最小化

12 避免重定向

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

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

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

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

1. 一個(gè)避免重復(fù)的腳本文件的方式是使用模板系統(tǒng)來建立腳本管理模塊。。
2. 除了防止 重復(fù)的腳本文件外,該模塊還可以實(shí)現(xiàn)依賴性檢查和增加版本號(hào)到腳本文件名中,從而實(shí)現(xiàn)超長的過期時(shí)間

14 配置 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 頭的大小

15 緩存 Ajax

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

16 總結(jié)

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

17 我的優(yōu)化原則

17.1 HTML

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

17.2 css

1. 提取css，分離到單獨(dú)的頁面
2. 當(dāng)需要設(shè)置的樣式有很多時(shí)，設(shè)置className而不是直接操作style
3. 刪除多余的選擇器
4. 利用工具最小化css文件，刪除多余空格、符號(hào)等
5. css文件一般放在頭部，link中

17.3 js

1. 提取js，分離到單獨(dú)的頁面
2. 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能
3. 多次使用的DOM節(jié)點(diǎn)的結(jié)果，要變量本地化，減少IO讀取操作
4. 盡量少用全局變量
5. 刪除多余的腳本
6. 刪除多余的變量、函數(shù)等
7. 利用工具最小化js文件，刪除多余空格、符號(hào)等
8. 一般腳本放在頁面底部

17.4 圖片處理

1. 可以使用icon字體圖標(biāo)代替的圖片盡量使用icon字體圖標(biāo)
2. 盡量用css3代替， 比如說要實(shí)現(xiàn)修飾效果，如半透明、邊框、圓角、陰影、漸變等
3. 優(yōu)化圖片格式為常用格式
4. 精靈圖
5. 用CSS或JavaScript實(shí)現(xiàn)預(yù)加載
6. 在保證最不失真的情況下盡可能壓縮圖像文件的大小

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

1. CDN托管

18 參考文章

• 14條Yahoo（雅虎）十四條優(yōu)化原則

總結(jié)

以上是生活随笔為你收集整理的雅虎十四条性能优化原则「建议收藏」(雅虎中国为什么关闭)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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