? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?前端優(yōu)化

1.盡量減少HTTP請求數(shù)

　　80%的終端用戶響應(yīng)時間都花在了前端上，其中大部分時間都在下載頁面上的各種組件：圖片，樣式表，腳本，F(xiàn)lash等等。減少組件數(shù)必然能夠減少頁面提交的HTTP請求數(shù)。這是讓頁面更快的關(guān)鍵。

　　減少頁面組件數(shù)的一種方式是簡化頁面設(shè)計。但有沒有一種方法可以在構(gòu)建復(fù)雜的頁面同時加快響應(yīng)時間呢？嗯，確實有魚和熊掌兼得的辦法。

　　合并文件是通過把所有腳本放在一個文件中的方式來減少請求數(shù)的，當然，也可以合并所有的CSS。如果各個頁面的腳本和樣式不一樣的話，合并文件就是一項比較麻煩的工作了，但把這個作為站點發(fā)布過程的一部分確實可以提高響應(yīng)時間。

　　CSS Sprites是減少圖片請求數(shù)量的首選方式。把背景圖片都整合到一張圖片中，然后用CSS的background-image和background-position屬性來定位要顯示的部分。

　　圖像映射可以把多張圖片合并成單張圖片，總大小是一樣的，但減少了請求數(shù)并加速了頁面加載。圖片映射只有在圖像在頁面中連續(xù)的時候才有用，比如導(dǎo)航條。給image map設(shè)置坐標的過程既無聊又容易出錯，用image map來做導(dǎo)航也不容易，所以不推薦用這種方式。

　　行內(nèi)圖片（Base64編碼）用data:?URL模式來把圖片嵌入頁面。這樣會增加HTML文件的大小，把行內(nèi)圖片放在（緩存的）樣式表中是個好辦法，而且成功避免了頁面變“重”。但目前主流瀏覽器并不能很好地支持行內(nèi)圖片。

　　減少頁面的HTTP請求數(shù)是個起點，這是提升站點首次訪問速度的重要指導(dǎo)原則。

2.減少DNS查找

　　域名系統(tǒng)建立了主機名和IP地址間的映射，就像電話簿上人名和號碼的映射一樣。當你在瀏覽器輸入www.yahoo.com的時候，瀏覽器就會聯(lián)系DNS解析器返回服務(wù)器的IP地址。DNS是有成本的，它需要20到120毫秒去查找給定主機名的IP地址。在DNS查找完成之前，瀏覽器無法從主機名下載任何東西。

　　DNS查找被緩存起來更高效，由用戶的ISP（網(wǎng)絡(luò)服務(wù)提供商）或者本地網(wǎng)絡(luò)存在一個特殊的緩存服務(wù)器上，但還可以緩存在個人用戶的計算機上。DNS信息被保存在操作系統(tǒng)的DNS cache(微軟Windows上的”DNS客戶端服務(wù)”)里。大多數(shù)瀏覽器有獨立于操作系統(tǒng)的自己的cache。只要瀏覽器在自己的cache里還保留著這條記錄，它就不會向操作系統(tǒng)查詢DNS。

　　IE默認緩存DNS查找30分鐘，寫在DnsCacheTimeout注冊表設(shè)置中。Firefox緩存1分鐘，可以用network.dnsCacheExpiration配置項設(shè)置。(Fasterfox把緩存時間改成了1小時 P.S. Fasterfox是FF的一個提速插件)

　　如果客戶端的DNS cache是空的（包括瀏覽器的和操作系統(tǒng)的），DNS查找數(shù)等于頁面上不同的主機名數(shù)，包括頁面URL，圖片，腳本文件，樣式表，F(xiàn)lash對象等等組件中的主機名，減少不同的主機名就可以減少DNS查找。

　　減少不同主機名的數(shù)量同時也減少了頁面能夠并行下載的組件數(shù)量，避免DNS查找削減了響應(yīng)時間，而減少并行下載數(shù)量卻增加了響應(yīng)時間。我的原則是把組件分散在2到4個主機名下，這是同時減少DNS查找和允許高并發(fā)下載的折中方案。

讓Ajax可緩存

　　Ajax的一個好處是可以給用戶提供即時反饋，因為它能夠從后臺服務(wù)器異步請求信息。然而，用了Ajax就無法保證用戶在等待異步JavaScript和XML響應(yīng)返回期間不會非常無聊。在很多應(yīng)用程序中，用戶能夠一直等待取決于如何使用Ajax。例如，在基于web的電子郵件客戶端中，用戶為了尋找符合他們搜索標準的郵件消息，將會保持對Ajax請求返回結(jié)果的關(guān)注。重要的是，要記得“異步”并不意味著“即時”。

　　要提高性能，優(yōu)化這些Ajax響應(yīng)至關(guān)重要。最重要的提高Ajax性能的方法就是讓響應(yīng)變得可緩存，就像在添上Expires或者Cache-Control HTTP頭中討論的一樣。下面適用于Ajax的其它規(guī)則：

Gzip組件

減少DNS查找

壓縮JavaScript

避免重定向

配置ETags

　　我們一起看看例子，一個Web 2.0的電子郵件客戶端用了Ajax來下載用戶的通訊錄，以便實現(xiàn)自動完成功能。如果用戶從上一次使用之后再沒有修改過她的通訊錄，而且Ajax響應(yīng)是可緩存的，有尚未過期的Expires或者Cache-Control HTTP頭，那么之前的通訊錄就可以從緩存中讀出。必須通知瀏覽器，應(yīng)該繼續(xù)使用之前緩存的通訊錄響應(yīng)，還是去請求一個新的?？梢酝ㄟ^給通訊錄的Ajax URL里添加一個表明用戶通訊錄最后修改時間的時間戳來實現(xiàn)，例如&t=1190241612。如果通訊錄從上一次下載之后再沒有被修改過，時間戳不變，通訊錄就將從瀏覽器緩存中直接讀出，從而避免一次額外的HTTP往返消耗。如果用戶已經(jīng)修改了通訊錄，時間戳也可以確保新的URL不會匹配緩存的響應(yīng)，瀏覽器將請求新的通訊錄條目。

　　即使Ajax響應(yīng)是動態(tài)創(chuàng)建的，而且可能只適用于單用戶，它們也可以被緩存，而這樣會讓你的Web 2.0應(yīng)用更快。

延遲加載組件

　　可以湊近看看頁面并問自己：什么才是一開始渲染頁面所必須的？其余內(nèi)容都可以等會兒。

　　JavaScript是分隔onload事件之前和之后的一個理想選擇。例如，如果有JavaScript代碼和支持拖放以及動畫的庫，這些都可以先等會兒，因為拖放元素是在頁面最初渲染之后的。其它可以延遲加載的部分包括隱藏內(nèi)容（在某個交互動作之后才出現(xiàn)的內(nèi)容）和折疊的圖片。

　　工具可幫你減輕工作量：YUI Image Loader可以延遲加載折疊的圖片，還有YUI Get utility是一種引入JS和CSS的簡單方法。Yahoo!主頁就是一個例子，可以打開Firebug的網(wǎng)絡(luò)面板仔細看看。

　　最好讓性能目標符合其它web開發(fā)最佳實踐，比如“漸進增強”。如果客戶端支持JavaScript，可以提高用戶體驗，但必須確保頁面在不支持JavaScript時也能正常工作。所以，在確定頁面運行正常之后，可以用一些延遲加載腳本增強它，以支持一些拖放和動畫之類的華麗效果。

用智能的事件處理器

　　有時候感覺頁面反映不夠靈敏，是因為有太多頻繁執(zhí)行的事件處理器被添加到了DOM樹的不同元素上，這就是推薦使用事件委托的原因。如果一個div里面有10個按鈕，應(yīng)該只給div容器添加一個事件處理器，而不是給每個按鈕都添加一個。事件能夠冒泡，所以可以捕獲事件并得知哪個按鈕是事件源。

優(yōu)化圖片

嘗試把GIF格式轉(zhuǎn)換成PNG格式，看看是否節(jié)省空間。在所有的PNG圖片上運行pngcrush（或者其它PNG優(yōu)化工具）

根據(jù)不同終端，切不同格式不同分辨率大小的圖，如png8 png24 gif jpg等（附加）

美工設(shè)計，電腦端設(shè)計建議寬1920以上，移動端以iphone6尺寸為基礎(chǔ)保證失真率最小 ?750畫布（附加）

根據(jù)不同屏幕大小。media query調(diào)用不同尺寸的圖片

把組件放在不含cookie的域下

　　當瀏覽器發(fā)送對靜態(tài)圖像的請求時，cookie也會一起發(fā)送，而服務(wù)器根本不需要這些cookie。所以它們只會造成沒有意義的網(wǎng)絡(luò)通信量，應(yīng)該確保對靜態(tài)組件的請求不含cookie。可以創(chuàng)建一個子域，把所有的靜態(tài)組件都部署在那兒。

　　如果域名是www.example.org，可以把靜態(tài)組件部署到static.example.org。然而，如果已經(jīng)在頂級域example.org或者www.example.org設(shè)置了cookie，那么所有對static.example.org的請求都會含有這些cookie。這時候可以再買一個新域名，把所有的靜態(tài)組件部署上去，并保持這個新域名不含cookie。Yahoo!用的是yimg.com，YouTube是ytimg.com，Amazon是images-amazon.com等等。

　　把靜態(tài)組件部署在不含cookie的域下還有一個好處是有些代理可能會拒絕緩存帶cookie的組件。有一點需要注意：如果不知道應(yīng)該用example.org還是www.example.org作為主頁，可以考慮一下cookie的影響。省略www的話，就只能把cookie寫到*.example.org，所以因為性能原因最好用www子域，并且把cookie寫到這個子域下。

.跨域分離組件

分離組件可以最大化并行下載，但要確保只用不超過2-4個域，因為存在DNS查找的代價。例如，可以把HTML和動態(tài)內(nèi)容部署在www.example.org，而把靜態(tài)組件分離到static1.example.org和static2.example.org。

把樣式表放在頂部

　　在Yahoo!研究性能的時候，我們發(fā)現(xiàn)把樣式表放到文檔的HEAD部分能讓頁面看起來加載地更快。這是因為把樣式表放在head里能讓頁面逐步渲染。

　　關(guān)注性能的前端工程師想讓頁面逐步渲染。也就是說，我們想讓瀏覽器盡快顯示已有內(nèi)容，這在頁面上有一大堆內(nèi)容或者用戶網(wǎng)速很慢時顯得尤為重要。給用戶顯示反饋（比如進度指標）的重要性已經(jīng)被廣泛研究過，并且被記錄下來了。在我們的例子中，HTML頁面就是進度指標！當瀏覽器逐漸加載頁面頭部，導(dǎo)航條，頂部logo等等內(nèi)容的時候，這些都被正在等待頁面加載的用戶當作反饋，能夠提高整體用戶體驗。