今日大(dà)緻閱讀了一下《High Performance Web Sites》。本書(shū)的中文版是《高(gāo)性能網站(zhàn)建立指南》。

本書(shū)另有(yǒu)對其中個(gè)别問題深化探求的進階篇《Even Faster Web Sites》，中譯《高(gāo)性能網站(zhàn)建立進階指南》。

作(zuò)者引見上(shàng)面的豆瓣鏈接中有(yǒu)，就不再照搬過來(lái)了。

這本書(shū)中給出了14條網站(zhàn)性能提升的準繩，每個(gè)準繩獨立成章，配有(yǒu)示例。這些(xiē)準繩大(dà)多(duō)數(shù)都十分适用，合适站(zhàn)點架構師(shī)、前端工程師(shī)。其中關于前端工程師(shī)的意義更大(dà)一些(xiē)。

這次看的是原版。我關于Web開(kāi)發較缺乏理(lǐ)論經曆，加之看得(de)匆忙，因而可(kě)能存在遺漏、表述不當之處，希望廣闊網友(yǒu)不吝指正。

準繩1 減少(shǎo)HTTP懇求數(shù)

結構懇求、等候響應需求時(shí)間(jiān)，因而懇求數(shù)量越少(shǎo)越好。減少(shǎo)懇求的總體(tǐ)思緒就是兼并資源，減少(shǎo)顯現一個(gè)頁面需求的文件數(shù)。

1. Image Map

經過設置标簽的usemap屬性與運用

2. CSS Sprite（CSS貼圖整合/貼圖拼合/貼圖定位）

經過設置元素的background-position款式做(zuò)到。普通(tōng)用于界面圖标。典型的能夠參考TinyMCE編輯器(qì)上(shàng)方的那(nà)些(xiē)小(xiǎo)按鈕。多(duō)個(gè)小(xiǎo)圖本質是從一個(gè)統一的大(dà)圖經過不同的偏移量裁剪而來(lái)，這樣加載界面上(shàng)的衆多(duō)按鈕實踐上(shàng)隻需懇求一次（懇求大(dà)圖一次），從而減少(shǎo)HTTP懇求數(shù)。

3. Inline Image（內(nèi)聯圖片）

在的src中不指定外部圖片文件的URL，而是直接将圖片信息放入。例如src=\"data:image/gif;base64,R0lGODlhDAAMAL...\"某些(xiē)特殊狀況下有(yǒu)用（例如一個(gè)不大(dà)的圖片僅在當前頁面用到）。

準繩2 應用多(duō)線路CDN

為(wèi)你(nǐ)的站(zhàn)點提供多(duō)種線路（例如國內(nèi)電(diàn)信、聯通(tōng)、挪動）、多(duō)個(gè)天文位置（北方、南方、西部）的訪問，使得(de)一切用戶都可(kě)以快速訪問。

準繩3 應用HTTP Cache

給不頻繁更新的資源（例如靜态圖）加較長的Expires頭信息，這些(xiē)資源一經緩存，将來(lái)很(hěn)長時(shí)間(jiān)都能夠不再反複傳輸了。

準繩4 運用Gzip緊縮

運用Gzip緊縮HTTP報文，減小(xiǎo)體(tǐ)積，減少(shǎo)傳輸時(shí)間(jiān)。

準繩5 将款式表置于頁面前部

先加載款式表，這樣頁面渲染得(de)以較早開(kāi)端，給用戶頁面加載較快的覺得(de)。

準繩6 将腳本置于頁面尾部

緣由同5，先處置頁面顯現，頁面渲染較早完成，而腳本邏輯稍後執行(xíng)，這樣給用戶頁面加載較快的覺得(de)。

準繩7 防止運用CSS表達式

過于複雜的JavaScript腳本邏輯、DOM查找、選擇操作(zuò)将會(huì)降低(dī)頁面處置效率。

準繩8 将JavaScript與CSS作(zuò)為(wèi)外聯資源

這似乎與準繩1中的兼并思想相悖，但(dàn)其實不然：思索每個(gè)頁面都引入了一個(gè)公共的JavaScript資源（例如jQuery或是ExtJS這樣的JavaScript庫），單就一個(gè)頁面的表現來(lái)看，內(nèi)聯（行(xíng)将JavaScript嵌入HTML）頁面将比外聯（運用 标簽引入）頁面加載更快（由于其較少(shǎo)的HTTP懇求數(shù)）。但(dàn)假如有(yǒu)很(hěn)多(duō)頁面都引入了這個(gè)公共JavaScript資源，那(nà)麽內(nèi)聯計(jì)劃會(huì)形成反複傳輸（由于這個(gè)資源內(nèi)嵌在每個(gè)頁面中了，所以每次翻開(kāi)一個(gè)頁面都要将這局部資源傳輸一遍，從而形成網絡傳輸資源的糜費）。而将這種資源獨立出來(lái)外聯援用能夠處理(lǐ)這個(gè)問題。

由于JavaScript和(hé)CSS相對穩定，我們能夠對其對應的資源設置較長的失效期（參考準繩3）。

準繩9 減少(shǎo)DNS查找

作(zuò)者給出的倡議是：

1. 運用Keep-Alive堅持銜接

假如銜接斷開(kāi)，那(nà)麽下次銜接又要執行(xíng)DNS查找，即便對應的域名-IP映射已被緩存，查找也是要耗費一些(xiē)時(shí)間(jiān)的

2. 減少(shǎo)域名

每次懇求新域名都需求停止經過DNS查找不同的域名，且DNS緩存無法發揮作(zuò)用。因而應該盡量将站(zhàn)點組織在一個(gè)統一域名下，防止運用過多(duō)子域名

準繩10 緊縮你(nǐ)的JavaScript

運用JS緊縮工具緊縮你(nǐ)的JavaScript吧(ba)，很(hěn)有(yǒu)效哦。看看jQuery的兩個(gè)不同的發行(xíng)版本就曉得(de)區(qū)别了：

static/js/jquery-1.6.2.js 閱讀版jQuery代碼，230KB

static/js/jquery-1.6.2.min.js 緊縮版jQuery代碼（用于實踐部署），89.4KB

準繩11 盡量防止重定向

一次重定向意味着在你(nǐ)真正訪問到想要看到的頁面前參加了一輪額外的HTTP懇求（客戶端發起HTTP懇求→HTTP效勞器(qì)返回重定向響應→客戶端對新URL發起懇求→HTTP效勞器(qì)返回內(nèi)容，下劃線局部為(wèi)額外的懇求），因而耗費更多(duō)的時(shí)間(jiān)（也就給人(rén)反響更慢的覺得(de)）。因而除非必要，不要随意運用重定向。幾個(gè)“必要”的狀況：

1. 防止URL失效

舊(jiù)站(zhàn)點遷移後，為(wèi)了防止舊(jiù)的URL失效，通(tōng)常将對舊(jiù)URL的懇求重定向至新系統的對應地址。

2. URL美化

在可(kě)讀性好的URL與實踐資源URL之間(jiān)轉換，例如關于Google Toolbar，用戶記得(de)住http://toolbar.google.com這個(gè)對人(rén)類富有(yǒu)語義的地址，卻很(hěn)難記住http://www.google.com/tools/firefox/toolbar/FT3/intl/en/index.html這個(gè)真正的資源地址。因而有(yǒu)必要保存前者，并且将對前者的懇求重定向至後者。

準繩12 移除反複的腳本

不要在一個(gè)頁面中反複引入相同的腳本。例如腳本B和(hé)C都依賴于A，那(nà)麽在運用了B和(hé)C的頁面中就有(yǒu)可(kě)能存在對A的反複援用。處理(lǐ)辦法，關于簡單的站(zhàn)點手動檢查依賴性，消去反複引入；關于複雜的站(zhàn)點則需求構建本人(rén)的依賴管理(lǐ)/版本控制(zhì)機制(zhì)。

準繩13 當心處置ETag

ETag是除Last-Modified之外的另一種HTTP Cache手腕。經過hash的方法辨識資源能否被修正。但(dàn)ETag存在一些(xiē)問題，例如：

1. 不分歧：不同Web效勞器(qì)（Apache， IIS等）定義的ETag格式不同

2. ETag的計(jì)算(suàn)是不穩定的（由于思索過多(duō)要素），例如：

1） 相同資源在不同效勞器(qì)上(shàng)計(jì)算(suàn)出來(lái)的ETag不一樣，而大(dà)型Web應用通(tōng)常由不止一台效勞器(qì)提供效勞，這就招緻客戶端在效勞器(qì)A緩存好的資源明(míng)明(míng)依然有(yǒu)效，而在下次懇求B時(shí)由于ETag不同而被認定為(wèi)失效，招緻相同資源的反複傳輸。

2） 資源不變，而由于一些(xiē)其他要素的變化，例如配置文件更改，招緻ETag變化。直接結果是系統更新後客戶端大(dà)範圍發作(zuò)Cache失效，招緻傳輸量大(dà)增，站(zhàn)點性能降落。

作(zuò)者給出的倡議是：要麽依據你(nǐ)的應用特性改良已有(yǒu)的ETag計(jì)算(suàn)辦法，要麽痛快就不用ETag，而改用最簡單的Last-Modified。

準繩14 在Ajax中應用HTTP Cache

Ajax是異步懇求，異步懇求不會(huì)阻塞你(nǐ)如今的操作(zuò)，而且當懇求完成時(shí)，你(nǐ)馬上(shàng)就能夠看到結果。但(dàn)異步不代表可(kě)以瞬時(shí)完成，也不代表可(kě)以容忍它花(huā)無限多(duō)的時(shí)間(jiān)完成。因而關于Ajax懇求的性能也需求注重。有(yǒu)很(hěn)多(duō)Ajax懇求訪問的是一些(xiē)相對穩定的資源，因而别忘了對Ajax懇求應用好HTTP Cache機制(zhì)，詳細參見準繩3、13。