?什么是前端性能優(yōu)化（what）轻纪？

?從用戶(hù)訪(fǎng)問(wèn)資源到資源完整的展現(xiàn)在用戶(hù)面前的過(guò)程中，通過(guò)技術(shù)手段和優(yōu)化策略抓于，縮短每個(gè)步驟的處理時(shí)間從而提升整個(gè)資源的訪(fǎng)問(wèn)和呈現(xiàn)速度算色。

?為什么要做前端性能優(yōu)化（why）？

?在構(gòu)建web站點(diǎn)的過(guò)程中怎顾，任何一個(gè)細(xì)節(jié)都有可能影響網(wǎng)站的訪(fǎng)問(wèn)速度论矾，如果不了解性能優(yōu)化知識(shí)，很多不利網(wǎng)站訪(fǎng)問(wèn)速度的因素會(huì)形成累加杆勇，從而嚴(yán)重影響網(wǎng)站的性能贪壳，導(dǎo)致網(wǎng)站訪(fǎng)問(wèn)速度變慢，用戶(hù)體驗(yàn)低下蚜退，最終導(dǎo)致用戶(hù)流失闰靴。

?前端性能優(yōu)化的原則（rule）

?不要按照準(zhǔn)則照本宣科的做彪笼，需要根據(jù)實(shí)際情況因地制宜；

不出bug蚂且！

?從瀏覽器發(fā)起請(qǐng)求到頁(yè)面能正常瀏覽都有哪些階段（process）配猫？

?預(yù)處理——>DNS解析——>建立連接——>發(fā)起請(qǐng)求——>等待響應(yīng)——>接受數(shù)據(jù)——>處理元素——>布局渲染

?性能優(yōu)化的具體方法（way）

?盡量減少HTTP請(qǐng)求個(gè)數(shù)——須權(quán)衡

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

?減少頁(yè)面組件數(shù)的一種方式是簡(jiǎn)化頁(yè)面設(shè)計(jì)玄括。但有沒(méi)有一種方法可以在構(gòu)建復(fù)雜的頁(yè)面同時(shí)加快響應(yīng)時(shí)間呢冯丙？嗯，確實(shí)有魚(yú)和熊掌兼得的辦法遭京。

?合并文件是通過(guò)把所有腳本放在一個(gè)文件中的方式來(lái)減少請(qǐng)求數(shù)的胃惜，當(dāng)然，也可以合并所有的CSS哪雕。如果各個(gè)頁(yè)面的腳本和樣式不一樣的話(huà)船殉，合并文件就是一項(xiàng)比較麻煩的工作了，但把這個(gè)作為站點(diǎn)發(fā)布過(guò)程的一部分確實(shí)可以提高響應(yīng)時(shí)間斯嚎。

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

?圖像映射可以把多張圖片合并成單張圖片列吼，總大小是一樣的，但減少了請(qǐng)求數(shù)并加速了頁(yè)面加載苦始。圖片映射只有在圖像在頁(yè)面中連續(xù)的時(shí)候才有用寞钥，比如導(dǎo)航條。給image map設(shè)置坐標(biāo)的過(guò)程既無(wú)聊又容易出錯(cuò)陌选，用image map來(lái)做導(dǎo)航也不容易理郑，所以不推薦用這種方式。

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

?減少頁(yè)面的HTTP請(qǐng)求數(shù)是個(gè)起點(diǎn)，這是提升站點(diǎn)首次訪(fǎng)問(wèn)速度的重要指導(dǎo)原則。

?合并圖片（如css sprites冀膝，內(nèi)置圖片使用數(shù)據(jù)）唁奢、合并CSS、JS窝剖，這一點(diǎn)很重要麻掸，但是要考慮合并后的文件體積。

?使用CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）

?用戶(hù)與服務(wù)器的物理距離對(duì)響應(yīng)時(shí)間也有影響赐纱。把內(nèi)容部署在多個(gè)地理位置分散的服務(wù)器上能讓用戶(hù)更快地載入頁(yè)面脊奋。但具體要怎么做呢？

?實(shí)現(xiàn)內(nèi)容在地理位置上分散的第一步是：不要嘗試去重新設(shè)計(jì)你的web應(yīng)用程序來(lái)適應(yīng)分布式結(jié)構(gòu)疙描。這取決于應(yīng)用程序诚隙，改變結(jié)構(gòu)可能包括一些讓人望而生畏的任務(wù)，比如同步會(huì)話(huà)狀態(tài)和跨服務(wù)器復(fù)制數(shù)據(jù)庫(kù)事務(wù)（翻譯可能不準(zhǔn)確）淫痰∽羁縮短用戶(hù)和內(nèi)容之間距離的提議可能被推遲整份，或者根本不可能通過(guò)待错，就是因?yàn)檫@個(gè)難題。

?記住終端用戶(hù)80%到90%的響應(yīng)時(shí)間都花在下載頁(yè)面組件上了：圖片烈评，樣式火俄，腳本，F(xiàn)lash等等讲冠，這是業(yè)績(jī)黃金法則瓜客。最好先分散靜態(tài)內(nèi)容，而不是一開(kāi)始就重新設(shè)計(jì)應(yīng)用程序結(jié)構(gòu)竿开。這不僅能夠大大減少響應(yīng)時(shí)間谱仪，還更容易表現(xiàn)出CDN的功勞。

?內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）是一組分散在不同地理位置的web服務(wù)器否彩，用來(lái)給用戶(hù)更高效地發(fā)送內(nèi)容疯攒。典型地，選擇用來(lái)發(fā)送內(nèi)容的服務(wù)器是基于網(wǎng)絡(luò)距離的衡量標(biāo)準(zhǔn)的列荔。例如：選跳數(shù)（hop）最少的或者響應(yīng)時(shí)間最快的服務(wù)器敬尺。

?這里可以關(guān)注CDN的三類(lèi)實(shí)現(xiàn)：鏡像、高速緩存贴浙、專(zhuān)線(xiàn)砂吞，以及智能路由器和負(fù)載均衡；

為文件頭指定Expires或Cache-Control崎溃，使內(nèi)容具有緩存性蜻直。

?這條規(guī)則有兩個(gè)方面：

?對(duì)于靜態(tài)組件：通過(guò)設(shè)置一個(gè)遙遠(yuǎn)的將來(lái)時(shí)間作為Expires來(lái)實(shí)現(xiàn)永不失效

?多余動(dòng)態(tài)組件：用合適的Cache-ControlHTTP頭來(lái)讓瀏覽器進(jìn)行條件性的請(qǐng)求

?網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越豐富，這意味著頁(yè)面里有更多的腳本，圖片和Flash概而。站點(diǎn)的新訪(fǎng)客可能還是不得不提交幾個(gè)HTTP請(qǐng)求唤殴，但通過(guò)使用有效期能讓組件變得可緩存，這避免了在接下來(lái)的瀏覽過(guò)程中不必要的HTTP請(qǐng)求到腥。有效期HTTP頭通常被用在圖片上朵逝，但它們應(yīng)該用在所有組件上，包括腳本乡范、樣式和Flash組件配名。

?瀏覽器（和代理）用緩存來(lái)減少HTTP請(qǐng)求的數(shù)目和大小，讓頁(yè)面能夠更快加載晋辆。web服務(wù)器通過(guò)有效期HTTP響應(yīng)頭來(lái)告訴客戶(hù)端渠脉，頁(yè)面的各個(gè)組件應(yīng)該被緩存多久。用一個(gè)遙遠(yuǎn)的將來(lái)時(shí)間做有效期瓶佳，告訴瀏覽器這個(gè)響應(yīng)在2010年4月15日前不會(huì)改變芋膘。

?Expires: Thu, 15 Apr 2010 20:00:00 GMT

?如果你用的是Apache服務(wù)器，用ExpiresDefault指令來(lái)設(shè)置相對(duì)于當(dāng)前日期的有效期霸饲。下面的例子設(shè)置了從請(qǐng)求時(shí)間起10年的有效期：

?ExpiresDefault "access plus 10 years"

?區(qū)分靜態(tài)內(nèi)容和動(dòng)態(tài)內(nèi)容为朋，避免以后頁(yè)面訪(fǎng)問(wèn)中不必要的HTTP請(qǐng)求。

避免空的src和href

Image with empty string src屬性是空字符串的圖片很常見(jiàn)厚脉，主要以?xún)煞N形式出

現(xiàn)：

straight HTML

<img src=””>

JavaScript

var img = new Image();

img.src = “”;

?這兩種形式都會(huì)引起相同的問(wèn)題：瀏覽器會(huì)向服務(wù)器發(fā)送另一個(gè)請(qǐng)求习寸。

留意具有這兩個(gè)屬性的標(biāo)簽如link，script傻工，img霞溪，iframe等；

使用gzip壓縮內(nèi)容

?前端工程師可以想辦法明顯地縮短通過(guò)網(wǎng)絡(luò)傳輸HTTP請(qǐng)求和響應(yīng)的時(shí)間中捆。毫無(wú)疑問(wèn)鸯匹，終端用戶(hù)的帶寬速度，網(wǎng)絡(luò)服務(wù)商泄伪，對(duì)等交換點(diǎn)的距離等等殴蓬，都是開(kāi)發(fā)團(tuán)隊(duì)所無(wú)法控制的。但還有別的能夠影響響應(yīng)時(shí)間的因素臂容，壓縮可以通過(guò)減少HTTP響應(yīng)的大小來(lái)縮短響應(yīng)時(shí)間科雳。

從HTTP/1.1開(kāi)始，web客戶(hù)端就有了支持壓縮的Accept-Encoding HTTP請(qǐng)求頭脓杉。1 Accept-Encoding: gzip, deflate

?如果web服務(wù)器看到這個(gè)請(qǐng)求頭糟秘，它就會(huì)用客戶(hù)端列出的一種方式來(lái)壓縮響應(yīng)。

?web服務(wù)器通過(guò)Content-Encoding相應(yīng)頭來(lái)通知客戶(hù)端球散。

?Content-Encoding: gzip

?盡可能多地用gzip壓縮能夠給頁(yè)面減肥尿赚，這也是提升用戶(hù)體驗(yàn)最簡(jiǎn)單的方法。

?壓縮具體來(lái)說(shuō)就是從代碼中去除不必要的字符以減少大小，從而提升加載速度凌净。代碼最小化就是去掉所有注釋和不必要的空白字符（空格悲龟，換行和tab）。在JavaScript中這樣做能夠提高響應(yīng)性能冰寻，因?yàn)橐螺d的文件變小了须教。兩個(gè)最常用的JavaScript代碼壓縮工具是JSMin和YUI Compressor，YUI compressor還可以壓縮CSS斩芭。

?混淆是一種可選的源碼優(yōu)化措施轻腺，要比壓縮更復(fù)雜，所以混淆過(guò)程也更容易產(chǎn)生bug划乖。在對(duì)美國(guó)前十的網(wǎng)站調(diào)查中贬养，壓縮可以縮小21%，而混淆能縮小25%琴庵。雖然混淆的縮小程度更高误算，但比壓縮風(fēng)險(xiǎn)更大。

?除了壓縮外部腳本和樣式迷殿，行內(nèi)的<script>和<style>塊也可以壓縮儿礼。即使啟用了gzip模塊，先進(jìn)行壓縮也能夠縮小5%或者更多的大小贪庙。JavaScript和CSS的用處越來(lái)越多蜘犁，所以壓縮代碼會(huì)有不錯(cuò)的效果翰苫。

? Gzip壓縮所有可能的文件類(lèi)型以來(lái)減少文件體積

?把CSS放到頂部

?在Yahoo!研究性能的時(shí)候止邮，我們發(fā)現(xiàn)把樣式表放到文檔的HEAD部分能讓頁(yè)面看起來(lái)加載地更快。這是因?yàn)榘褬邮奖矸旁趆ead里能讓頁(yè)面逐步渲染奏窑。

?關(guān)注性能的前端工程師想讓頁(yè)面逐步渲染导披。也就是說(shuō)，我們想讓瀏覽器盡快顯示已有內(nèi)容埃唯，這在頁(yè)面上有一大堆內(nèi)容或者用戶(hù)網(wǎng)速很慢時(shí)顯得尤為重要撩匕。給用戶(hù)顯示反饋（比如進(jìn)度指標(biāo)）的重要性已經(jīng)被廣泛研究過(guò)，并且被記錄下來(lái)了墨叛。在我們的例子中止毕，HTML頁(yè)面就是進(jìn)度指標(biāo)！當(dāng)瀏覽器逐漸加載頁(yè)面頭部漠趁，導(dǎo)航條扁凛，頂部logo等等內(nèi)容的時(shí)候，這些都被正在等待頁(yè)面加載的用戶(hù)當(dāng)作反饋闯传，能夠提高整體用戶(hù)體驗(yàn)谨朝。

?實(shí)現(xiàn)頁(yè)面有秩序地加載，這對(duì)于擁有較多內(nèi)容的頁(yè)面和網(wǎng)速較慢的用戶(hù)來(lái)說(shuō)更為重要，同時(shí)字币，HTML規(guī)范清楚指出樣式表要放包含在頁(yè)面的<head />區(qū)域內(nèi)则披；

?把JS放到底部，腳本會(huì)阻塞并行下載洗出，HTTP/1.1官方文檔建議瀏覽器每個(gè)主機(jī)名下并行下載的組件數(shù)不要超過(guò)兩個(gè)士复，如果圖片來(lái)自多個(gè)主機(jī)名，并行下載的數(shù)量就可以超過(guò)兩個(gè)翩活。如果腳本正在下載判没，瀏覽器就不開(kāi)始任何其它下載任務(wù)，即使是在不同主機(jī)名下的隅茎。

?有時(shí)候澄峰，并不容易把腳本移動(dòng)到底部。舉個(gè)例子辟犀，如果腳本是用document.write插入到頁(yè)面內(nèi)容中的俏竞，就沒(méi)辦法再往下移了。還可能存在作用域問(wèn)題堂竟，在多數(shù)情況下魂毁，這些問(wèn)題都是可以解決的。

?一個(gè)常見(jiàn)的建議是用推遲（deferred）腳本出嘹，有DEFER屬性的腳本意味著不能含有document.write席楚，并且提示瀏覽器告訴他們可以繼續(xù)渲染。不幸的是税稼，F(xiàn)irefox不支持DEFER屬性烦秩。在IE中，腳本可能被推遲郎仆，但不盡如人意只祠。如果腳本可以推遲，我們就可以把它放到頁(yè)面底部扰肌，頁(yè)面就可以更快地載入抛寝。

?HTTP/1.1規(guī)范建議，瀏覽器每個(gè)主機(jī)名的并行下載內(nèi)容不超過(guò)兩個(gè)曙旭，而問(wèn)題在于腳本阻止了頁(yè)面的平行下載盗舰，即便是主機(jī)名不相同

?避免使用CSS表達(dá)式

?用CSS表達(dá)式動(dòng)態(tài)設(shè)置CSS屬性，是一種強(qiáng)大又危險(xiǎn)的方式桂躏。從IE5開(kāi)始支持钻趋，但從IE8起就不推薦使用了。例如沼头，可以用CSS表達(dá)式把背景顏色設(shè)置成按小時(shí)交替的：

background-color: expression( (newDate()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

?頁(yè)面顯示和縮放书劝，滾動(dòng)、乃至移動(dòng)鼠標(biāo)時(shí)土至，CSS表達(dá)式的計(jì)算頻率是我們要關(guān)注的购对。可以考慮一次性的表達(dá)式或者使用事件句柄來(lái)代替CSS表達(dá)式陶因。

?將CSS和JS放到外部文件中

?很多性能原則都是關(guān)于如何管理外部組件的骡苞，然而，在這些顧慮出現(xiàn)之前你應(yīng)該問(wèn)一個(gè)更基礎(chǔ)的問(wèn)題：應(yīng)該把JavaScript和CSS放到外部文件中還是直接寫(xiě)在頁(yè)面里楷扬？

?實(shí)際上解幽，用外部文件可以讓頁(yè)面更快，因?yàn)镴avaScript和CSS文件會(huì)被緩存在瀏覽器烘苹。HTML文檔中的行內(nèi)JavaScript和CSS在每次請(qǐng)求該HTML文檔的時(shí)候都會(huì)重新下載躲株。這樣做減少了所需的HTTP請(qǐng)求數(shù)，但增加了HTML文檔的大小镣衡。另一方面霜定，如果JavaScript和CSS在外部文件中，并且已經(jīng)被瀏覽器緩存起來(lái)了廊鸥，那么我們就成功地把HTML文檔變小了望浩，而且還沒(méi)有增加HTTP請(qǐng)求數(shù)。

?我們需要權(quán)衡內(nèi)置代碼帶來(lái)的HTTP請(qǐng)求減少與通過(guò)使用外部文件進(jìn)行緩存帶來(lái)的好處的折中點(diǎn)惰说。

?減少DNS查找次數(shù)

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

?DNS查找被緩存起來(lái)更高效丰滑，由用戶(hù)的ISP（網(wǎng)絡(luò)服務(wù)提供商）或者本地網(wǎng)絡(luò)存在一個(gè)特殊的緩存服務(wù)器上，但還可以緩存在個(gè)人用戶(hù)的計(jì)算機(jī)上倒庵。DNS信息被保存在操作系統(tǒng)的DNS cache(微軟Windows上的”DNS客戶(hù)端服務(wù)”)里褒墨。大多數(shù)瀏覽器有獨(dú)立于操作系統(tǒng)的自己的cache。只要瀏覽器在自己的cache里還保留著這條記錄擎宝，它就不會(huì)向操作系統(tǒng)查詢(xún)DNS郁妈。

IE默認(rèn)緩存DNS查找30分鐘，寫(xiě)在DnsCacheTimeout注冊(cè)表設(shè)置中绍申。Firefox緩存1分鐘噩咪，可以用network.dnsCacheExpiration配置項(xiàng)設(shè)置顾彰。(Fasterfox把緩存時(shí)間改成了1小時(shí)P.S. Fasterfox是FF的一個(gè)提速插件)

?如果客戶(hù)端的DNS cache是空的（包括瀏覽器的和操作系統(tǒng)的），DNS查找數(shù)等于頁(yè)面上不同的主機(jī)名數(shù)胃碾，包括頁(yè)面URL涨享，圖片，腳本文件仆百，樣式表厕隧，F(xiàn)lash對(duì)象等等組件中的主機(jī)名，減少不同的主機(jī)名就可以減少DNS查找俄周。

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

?我們需要權(quán)衡減少 DNS查找次數(shù)和保持較高程度并行下載兩者之間的關(guān)系波势。

精簡(jiǎn)CSS和JS

?目的就是減少下載的文件體積茶鹃，可考慮壓縮工具JSMin和YUICompressor。? 避免跳轉(zhuǎn)艰亮，為了確北蒸妫“后退”按鈕可以正確地使用拜银，使用標(biāo)準(zhǔn)的 3XXHTTP狀態(tài)代碼陷遮；同域中注意避免反斜杠 “/” 的跳轉(zhuǎn)；

?跨域使用 Alias或者 mod_rewirte建立 CNAME（保存一個(gè)域名和另外一個(gè)域名之間關(guān)系的DNS記錄）

?剔除重復(fù)的JS和CSS

?頁(yè)面含有重復(fù)的腳本文件會(huì)影響性能李命，這可能和你想象的不一樣侄非。在對(duì)美國(guó)前10大web站點(diǎn)的評(píng)審中蕉汪，發(fā)現(xiàn)只有2個(gè)站點(diǎn)含有重復(fù)腳本。兩個(gè)主要原因增加了在單一頁(yè)面中出現(xiàn)重復(fù)腳本的幾率：團(tuán)隊(duì)大小和腳本數(shù)量逞怨。在這種情況下者疤，重復(fù)腳本會(huì)創(chuàng)建不必要的HTTP請(qǐng)求，執(zhí)行無(wú)用的JavaScript代碼叠赦，而影響頁(yè)面性能驹马。

?IE會(huì)產(chǎn)生不必要的HTTP請(qǐng)求，而Firefox不會(huì)除秀。在IE中糯累，如果一個(gè)不可緩存的外部腳本被頁(yè)面引入了兩次，它會(huì)在頁(yè)面加載時(shí)產(chǎn)生兩個(gè)HTTP請(qǐng)求册踩。即使腳本是可緩存的泳姐，在用戶(hù)重新加載頁(yè)面時(shí)也會(huì)產(chǎn)生額外的HTTP請(qǐng)求。

?除了產(chǎn)生沒(méi)有意義的HTTP請(qǐng)求之外暂吉，多次對(duì)腳本求值也會(huì)浪費(fèi)時(shí)間胖秒。因?yàn)闊o(wú)論腳本是否可緩存缎患，在Firefox和IE中都會(huì)執(zhí)行冗余的JavaScript代碼。

?避免不小心把相同腳本引入兩次的一種方法就是在模版系統(tǒng)中實(shí)現(xiàn)腳本管理模塊阎肝。典型的腳本引入方法就是在HTML頁(yè)面中用SCRIPT標(biāo)簽：

?重復(fù)調(diào)用腳本挤渔，除了增加額外的HTTP請(qǐng)求外，多次運(yùn)算也會(huì)浪費(fèi)時(shí)間盗痒。在IE和Firefox中不管腳本是否可緩存蚂蕴，它們都存在重復(fù)運(yùn)算JavaScript的問(wèn)題。

配置ETags

?實(shí)體標(biāo)簽（ETags）俯邓，是服務(wù)器和瀏覽器用來(lái)決定瀏覽器緩存中組件與源服務(wù)器中的組件是否匹配的一種機(jī)制（“實(shí)體”也就是組件：圖片骡楼，腳本，樣式表等等）稽鞭。添加ETags可以提供一種實(shí)體驗(yàn)證機(jī)制鸟整，比最后修改日期更加靈活。一個(gè)ETag是一個(gè)字符串朦蕴，作為一個(gè)組件某一具體版本的唯一標(biāo)識(shí)符篮条。唯一的格式約束是字符串必須用引號(hào)括起來(lái)，源服務(wù)器用相應(yīng)頭中的ETag來(lái)指定組件的ETag：

1234 HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59

GMT ETag: "10c24bc-4ab-457e1c1f" Content-Length: 12195

然后吩抓，如果瀏覽器必須驗(yàn)證一個(gè)組件涉茧，它用If-None-Match請(qǐng)求頭來(lái)把ETag傳回源服務(wù)器。如果ETags匹配成功疹娶，會(huì)返回一個(gè)304狀態(tài)碼伴栓，這樣就減少了12195個(gè)字節(jié)的響應(yīng)體。

GET /i/yahoo.gif HTTP/1.1 Dec 2006 03:03:59 GMT HTTP/1.1 304 Not Modified

Host: us.yimg.com If-Modified-Since: Tue, 12

If-None-Match: "10c24bc-4ab-457e1c1f"

?Entity tags（ETags）（實(shí)體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制（“實(shí)體”就是所說(shuō)的“內(nèi) 容”雨饺，包括圖片钳垮、腳本、樣式表等）额港，是比last-modified date更更加靈活的機(jī)制饺窿，單位時(shí)間內(nèi)文件被修過(guò)多次，Etag可以綜合Inode(文件的索引節(jié)點(diǎn)(inode)數(shù))移斩，MTime(修改時(shí)間)和Size來(lái)精準(zhǔn)的進(jìn)行判斷肚医，避開(kāi)UNIX記錄MTime只能精確到秒的問(wèn)題。 服務(wù)器集群使用叹哭，可取后兩個(gè)參數(shù)忍宋。使用ETags減少Web應(yīng)用帶寬和負(fù)載。

使AJAX可緩存

?減少頁(yè)面的HTTP請(qǐng)求數(shù)是個(gè)起點(diǎn)风罩，這是提升站點(diǎn)首次訪(fǎng)問(wèn)速度的重要指導(dǎo)原則。

? Ajax的一個(gè)好處是可以給用戶(hù)提供即時(shí)反饋舵稠，因?yàn)樗軌驈暮笈_(tái)服務(wù)器異步請(qǐng)求信息超升。然而入宦，用了Ajax就無(wú)法保證用戶(hù)在等待異步JavaScript和XML響應(yīng)返回期間不會(huì)非常無(wú)聊。在很多應(yīng)用程序中室琢，用戶(hù)能夠一直等待取決于如何使用Ajax乾闰。例如，在基于web的電子郵件客戶(hù)端中盈滴，用戶(hù)為了尋找符合他們搜索標(biāo)準(zhǔn)的郵件消息涯肩，將會(huì)保持對(duì)Ajax請(qǐng)求返回結(jié)果的關(guān)注。重要的是巢钓，要記得“異步”并不意味著“即時(shí)”病苗。

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

?Gzip組件

?減少DNS查找

?壓縮JavaScript

?避免重定向

?配置ETags

?我們一起看看例子背镇，一個(gè)Web 2.0的電子郵件客戶(hù)端用了Ajax來(lái)下載用戶(hù)的通訊錄咬展，以便實(shí)現(xiàn)自動(dòng)完成功能。如果用戶(hù)從上一次使用之后再?zèng)]有修改過(guò)她的通訊錄瞒斩，而且Ajax響應(yīng)是可緩存的破婆，有尚未過(guò)期的Expires或者Cache-Control HTTP頭，那么之前的通訊錄就可以從緩存中讀出胸囱。必須通知瀏覽器祷舀，應(yīng)該繼續(xù)使用之前緩存的通訊錄響應(yīng)，還是去請(qǐng)求一個(gè)新的旺矾∶镳校可以通過(guò)給通訊錄的Ajax URL里添加一個(gè)表明用戶(hù)通訊錄最后修改時(shí)間的時(shí)間戳來(lái)實(shí)現(xiàn)，例如&t=1190241612箕宙。如果通訊錄從上一次下載之后再?zèng)]有被修改過(guò)嚎朽，時(shí)間戳不變，通訊錄就將從瀏覽器緩存中直接讀出柬帕，從而避免一次額外的HTTP往返消耗哟忍。如果用戶(hù)已經(jīng)修改了通訊錄，時(shí)間戳也可以確保新的URL不會(huì)匹配緩存的響應(yīng)陷寝，瀏覽器將請(qǐng)求新的通訊錄條目锅很。即使Ajax響應(yīng)是動(dòng)態(tài)創(chuàng)建的，而且可能只適用于單用戶(hù)凤跑，它們也可以被緩存爆安，而這樣會(huì)讓你的Web 2.0應(yīng)用更快。

?盡早刷新輸出緩沖

?當(dāng)用戶(hù)請(qǐng)求一個(gè)頁(yè)面時(shí)仔引，服務(wù)器需要用大約200到500毫秒來(lái)組裝HTML頁(yè)面扔仓，在這期間褐奥，瀏覽器閑等著數(shù)據(jù)到達(dá)。PHP中有一個(gè)flush()函數(shù)翘簇，允許給瀏覽器發(fā)送一部分已經(jīng)準(zhǔn)備完畢的HTML響應(yīng)撬码，以便瀏覽器可以在后臺(tái)準(zhǔn)備剩余部分的同時(shí)開(kāi)始獲取組件，好處主要體現(xiàn)在很忙的后臺(tái)或者很“輕”的前端頁(yè)面上（P.S. 也就是說(shuō)版保，響應(yīng)時(shí)耗主要在后臺(tái)方面時(shí)最能體現(xiàn)優(yōu)勢(shì)）呜笑。

?較理想的清空緩沖區(qū)的位置是HEAD后面，因?yàn)镠TML的HEAD部分通常更容易生成彻犁，并且允許引入任何CSS和JavaScript文件叫胁，這樣就可以讓瀏覽器在后臺(tái)還在處理的時(shí)候就開(kāi)始并行獲取組件。

?例如：

... ...

尤其對(duì)于css袖裕，js文件的并行下載更有意義

使用GET來(lái)完成AJAX請(qǐng)求Yahoo!郵箱團(tuán)隊(duì)發(fā)現(xiàn)使用XMLHttpRequest時(shí)曹抬，瀏覽器的POST請(qǐng)求是通過(guò)一個(gè)兩步的過(guò)程來(lái)實(shí)現(xiàn)的：先發(fā)送HTTP頭，在發(fā)送數(shù)據(jù)急鳄。所以最好用GET請(qǐng)求谤民，它只需要發(fā)送一個(gè)TCP報(bào)文（除非cookie特別多）。IE的URL長(zhǎng)度最大值是2K疾宏，所以如果要發(fā)送的數(shù)據(jù)超過(guò)2K就無(wú)法使用GET了张足。

?POST請(qǐng)求的一個(gè)有趣的副作用是實(shí)際上沒(méi)有發(fā)送任何數(shù)據(jù)，就像GET請(qǐng)求一樣坎藐。正如HTTP說(shuō)明文檔中描述的为牍，GET請(qǐng)求是用來(lái)檢索信息的。所以它的語(yǔ)義只是用GET請(qǐng)求來(lái)請(qǐng)求數(shù)據(jù)岩馍，而不是用來(lái)發(fā)送需要存儲(chǔ)到服務(wù)器的數(shù)據(jù)碉咆。

?當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭蛀恩，然后才發(fā)送數(shù)據(jù)疫铜。在url小于2K時(shí)使用GET獲取數(shù)據(jù)時(shí)更加有意義。

?延遲加載

?可以湊近看看頁(yè)面并問(wèn)自己：什么才是一開(kāi)始渲染頁(yè)面所必須的双谆？其余內(nèi)容都可以等會(huì)兒壳咕。

?JavaScript是分隔onload事件之前和之后的一個(gè)理想選擇。例如顽馋，如果有JavaScript代碼和支持拖放以及動(dòng)畫(huà)的庫(kù)谓厘，這些都可以先等會(huì)兒，因?yàn)橥戏旁厥窃陧?yè)面最初渲染之后的寸谜。其它可以延遲加載的部分包括隱藏內(nèi)容（在某個(gè)交互動(dòng)作之后才出現(xiàn)的內(nèi)容）和折疊的圖片竟稳。

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

?最好讓性能目標(biāo)符合其它web開(kāi)發(fā)最佳實(shí)踐愁拭，比如“漸進(jìn)增強(qiáng)”讲逛。如果客戶(hù)端支持JavaScript，可以提高用戶(hù)體驗(yàn)岭埠，但必須確保頁(yè)面在不支持JavaScript時(shí)也能正常工作盏混。所以，在確定頁(yè)面運(yùn)行正常之后惜论，可以用一些延遲加載腳本增強(qiáng)它许赃，以支持一些拖放和動(dòng)畫(huà)之類(lèi)的華麗效果。

?確定頁(yè)面運(yùn)行正常后馆类，再加載腳本來(lái)實(shí)現(xiàn)如拖放和動(dòng)畫(huà)混聊，或者是隱藏部分的內(nèi)容以及折疊內(nèi)容等。

?預(yù)加載

?預(yù)加載可能看起來(lái)和延遲加載是相反的乾巧，但它其實(shí)有不同的目標(biāo)句喜。通過(guò)預(yù)加載組件可以充分利用瀏覽器空閑的時(shí)間來(lái)請(qǐng)求將來(lái)會(huì)用到的組件（圖片，樣式和腳本）沟于。用戶(hù)訪(fǎng)問(wèn)下一頁(yè)的時(shí)候咳胃，大部分組件都已經(jīng)在緩存里了，所以在用戶(hù)看來(lái)頁(yè)面會(huì)加載得更快旷太。

?實(shí)際應(yīng)用中有以下幾種預(yù)加載的類(lèi)型：

?無(wú)條件預(yù)加載——盡快開(kāi)始加載展懈，獲取一些額外的組件。google.com就是一個(gè)sprite圖片預(yù)加載的好例子供璧，這個(gè)sprite圖片并不是google.com主頁(yè)需要的存崖，而是搜索結(jié)果頁(yè)面上的內(nèi)容。

?條件性預(yù)加載——根據(jù)用戶(hù)操作猜測(cè)用戶(hù)將要跳轉(zhuǎn)到哪里并據(jù)此預(yù)加載睡毒。在search.yahoo.com的輸入框里鍵入內(nèi)容后来惧，可以看到那些額外組件是怎樣請(qǐng)求加載的。

?提前預(yù)加載——在推出新設(shè)計(jì)之前預(yù)加載吕嘀。經(jīng)常在重新設(shè)計(jì)之后會(huì)聽(tīng)到：“這個(gè)新網(wǎng)站不錯(cuò)违寞，但比以前更慢了”，一部分原因是用戶(hù)訪(fǎng)問(wèn)先前的頁(yè)面都是有舊緩存的偶房，但新的卻是一種空緩存狀態(tài)下的體驗(yàn)趁曼。可以通過(guò)在將要推出新設(shè)計(jì)之前預(yù)加載一些組件來(lái)減輕這種負(fù)面影響棕洋，老站可以利用瀏覽器空閑的時(shí)間來(lái)請(qǐng)求那些新站需要的圖片和腳本挡闰。

?關(guān)注下無(wú)條件加載，有條件加載和有預(yù)期的加載。

?減少DOM元素個(gè)數(shù)

?一個(gè)復(fù)雜的頁(yè)面意味著要下載更多的字節(jié)摄悯，而且用JavaScript訪(fǎng)問(wèn)DOM也會(huì)更慢赞季。舉個(gè)例子，想要添加一個(gè)事件處理器的時(shí)候奢驯，循環(huán)遍歷頁(yè)面上的500個(gè)DOM元素和5000個(gè)DOM元素是有區(qū)別的申钩。

?大量的DOM元素是一種征兆——頁(yè)面上有些內(nèi)容無(wú)關(guān)的標(biāo)記需要清理。正在用嵌套表格來(lái)布局嗎瘪阁？還是為了修復(fù)布局問(wèn)題而添了一堆的<div>s撒遣？或許應(yīng)該用更好的語(yǔ)義化標(biāo)記。

?YUI CSS utilities對(duì)布局有很大幫助：grids.css針對(duì)整體布局管跺，fonts.css和reset.css可以用來(lái)去除瀏覽器的默認(rèn)格式义黎。這是個(gè)開(kāi)始清理和思考標(biāo)記的好機(jī)會(huì)，例如只在語(yǔ)義上有意義的時(shí)候使用<div>豁跑，而不是因?yàn)樗軌蜾秩疽粋€(gè)新行廉涕。

DOM元素的數(shù)量很容易測(cè)試，只需要在Firebug的控制臺(tái)里輸入：

document.getElementsByTagName('*').length

?那么多少DOM元素才算是太多呢艇拍？可以參考其它類(lèi)似的標(biāo)記良好的頁(yè)面狐蜕，例如Yahoo!主頁(yè)是一個(gè)相當(dāng)繁忙的頁(yè)面，但只有不到700個(gè)元素（HTML標(biāo)簽）淑倾。

?使用更適合或者在語(yǔ)意是更貼切的標(biāo)簽馏鹤，要考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)。

?根據(jù)域名劃分頁(yè)面內(nèi)容

?分離組件可以最大化并行下載娇哆，但要確保只用不超過(guò)2-4個(gè)域湃累，因?yàn)榇嬖贒NS查找的代價(jià)。例如碍讨，可以把HTML和動(dòng)態(tài)內(nèi)容部署在www.example.org治力，而把靜態(tài)組件分離到static1.example.org和static2.example.org。

?很顯然勃黍， 是最大限度地實(shí)現(xiàn)平行下載

?盡量減少iframe的個(gè)數(shù)

?用iframe可以把一個(gè)HTML文檔插入到父文檔里宵统，重要的是明白iframe是如何工作的并高效地使用它。

優(yōu)點(diǎn)：

?引入緩慢的第三方內(nèi)容覆获，比如標(biāo)志和廣告

?安全沙箱

?并行下載腳本

缺點(diǎn)：

?代價(jià)高昂马澈，即使是空白的iframe

?阻塞頁(yè)面加載

?非語(yǔ)義

?考慮即使內(nèi)容為空，加載也需要時(shí)間弄息，會(huì)阻止頁(yè)面加載痊班，沒(méi)有語(yǔ)意，注意iframe相對(duì)于其他DOM元素高出1-2個(gè)數(shù)量級(jí)的開(kāi)銷(xiāo)摹量，它會(huì)在典型方式下阻塞onload事件涤伐，IE和Firefox中主頁(yè)面樣式表會(huì)阻塞它的下載馒胆。

避免404

HTTP請(qǐng)求代價(jià)高昂，完全沒(méi)有必要用一個(gè)HTTP請(qǐng)求去獲取一個(gè)無(wú)用的響應(yīng)（比如404 Not Found）凝果，只會(huì)拖慢用戶(hù)體驗(yàn)而沒(méi)有任何好處祝迂。

?有些站點(diǎn)用的是有幫助的404——“你的意思是xxx？”器净，這樣做有利于用戶(hù)體驗(yàn),但也浪費(fèi)了服務(wù)器資源（比如數(shù)據(jù)庫(kù)等等）型雳。最糟糕的是鏈接到的外部JavaScript有錯(cuò)誤而且結(jié)果是404。首先掌动，這種下載將阻塞并行下載四啰。其次，瀏覽器會(huì)試圖解析404響應(yīng)體粗恢，因?yàn)樗荍avaScript代碼，需要找出其中可用的部分欧瘪。

?HTTP請(qǐng)求時(shí)間消耗是很大的眷射，有些站點(diǎn)把404錯(cuò)誤響應(yīng)頁(yè)面改為“你是不是要找***”，這雖然改進(jìn)了用戶(hù)體驗(yàn)但是同樣也會(huì)浪費(fèi)服務(wù)器資源（如數(shù)據(jù)庫(kù)等）佛掖。最糟糕的情況是指向外部 JavaScript的鏈接出現(xiàn)問(wèn)題并返回404代碼妖碉。首先，這種加載會(huì)破壞并行加載芥被；其次瀏覽器會(huì)把試圖在返回的404響應(yīng)內(nèi)容中找到可能有用的部分當(dāng)作JavaScript代碼來(lái)執(zhí)行欧宜。

減少Cookie的大小

?使用cookie的原因有很多，比如授權(quán)和個(gè)性化拴魄。HTTP頭中cookie信息在web服務(wù)器和瀏覽器之間交換冗茸。重要的是保證cookie盡可能的小，以最小化對(duì)用戶(hù)響應(yīng)時(shí)間的影響匹中。

去除不必要的coockie

?使coockie體積盡量小以減少對(duì)用戶(hù)響應(yīng)的影響

?注意在適應(yīng)級(jí)別的域名上設(shè)置coockie以便使子域名不受影響

?設(shè)置合理的過(guò)期時(shí)間夏漱。較早地Expire時(shí)間和不要過(guò)早去清除coockie，都會(huì)改善用戶(hù)的響應(yīng)時(shí)間顶捷。

?使用無(wú)cookie的域

?當(dāng)瀏覽器發(fā)送對(duì)靜態(tài)圖像的請(qǐng)求時(shí)挂绰，cookie也會(huì)一起發(fā)送，而服務(wù)器根本不需要這些cookie服赎。所以它們只會(huì)造成沒(méi)有意義的網(wǎng)絡(luò)通信量葵蒂，應(yīng)該確保對(duì)靜態(tài)組件的請(qǐng)求不含cookie≈芈牵可以創(chuàng)建一個(gè)子域践付，把所有的靜態(tài)組件都部署在那兒。

?如果域名是www.example.org嚎尤，可以把靜態(tài)組件部署到static.example.org荔仁。然而，如果已經(jīng)在頂級(jí)域example.org或者www.example.org設(shè)置了cookie，那么所有對(duì)static.example.org的請(qǐng)求都會(huì)含有這些cookie乏梁。這時(shí)候可以再買(mǎi)一個(gè)新域名次洼，把所有的靜態(tài)組件部署上去，并保持這個(gè)新域名不含cookie遇骑。Yahoo!用的是yimg.com卖毁，YouTube是ytimg.com，Amazon是images-amazon.com等等落萎。

?把靜態(tài)組件部署在不含cookie的域下還有一個(gè)好處是有些代理可能會(huì)拒絕緩存帶cookie的組件亥啦。有一點(diǎn)需要注意：如果不知道應(yīng)該用example.org還是www.example.org作為主頁(yè)，可以考慮一下cookie的影響练链。省略www的話(huà)翔脱，就只能把cookie寫(xiě)到*.example.org媒鼓，所以因?yàn)樾阅茉蜃詈糜脀ww子域疚沐，并且把cookie寫(xiě)到這個(gè)子域下究流。

?確定對(duì)于靜態(tài)內(nèi)容的請(qǐng)求是無(wú)coockie的請(qǐng)求灯节。創(chuàng)建一個(gè)子域名并用他來(lái)存放所有靜態(tài)內(nèi)容形入。

?減少DOM訪(fǎng)問(wèn)

?用JavaScript訪(fǎng)問(wèn)DOM元素是很慢的蛇数，所以浦徊，為了讓頁(yè)面反應(yīng)更迅速蚯妇，應(yīng)該：

?緩存已訪(fǎng)問(wèn)過(guò)的元素的索引

?先“離線(xiàn)”更新節(jié)點(diǎn)焕襟，再把它們添到DOM樹(shù)上

避免用JavaScript修復(fù)布局問(wèn)題

緩存已經(jīng)訪(fǎng)問(wèn)過(guò)的有關(guān)元素

線(xiàn)下更新完節(jié)點(diǎn)之后再將它們添加到文檔樹(shù)中

避免使用JavaScript來(lái)修改頁(yè)面布局

開(kāi)發(fā)智能事件處理程序

?有時(shí)候感覺(jué)頁(yè)面反映不夠靈敏，是因?yàn)橛刑囝l繁執(zhí)行的事件處理器被添加到了DOM樹(shù)的不同元素上饭豹，這就是推薦使用事件委托的原因鸵赖。如果一個(gè)div里面有10個(gè)按鈕，應(yīng)該只給div容器添加一個(gè)事件處理器拄衰，而不是給每個(gè)按鈕都添加一個(gè)它褪。事件能夠冒泡，所以可以捕獲事件并得知哪個(gè)按鈕是事件源翘悉。

?有時(shí)候我們會(huì)感覺(jué)到頁(yè)面反應(yīng)遲鈍茫打，這是因?yàn)镈OM樹(shù)元素中附加了過(guò)多的事件句柄并且些事件句病被頻繁地觸發(fā)。這就是為什么說(shuō)使用event delegation（事件代理）是一種好方法了妖混。如果你在一個(gè)div中有10個(gè)按鈕老赤，你只需要在div上附加一次事件句柄就可以了，而不用去為每一個(gè)按 鈕增加一個(gè)句柄制市。事件冒泡時(shí)你可以捕捉到事件并判斷出是哪個(gè)事件發(fā)出的抬旺。

?你同樣也不用為了操作DOM樹(shù)而等待onload事件的發(fā)生。你需要做的就是等待樹(shù)結(jié)構(gòu)中你要訪(fǎng)問(wèn)的元素出現(xiàn)祥楣。你也不用等待所有圖像都加載完畢开财。

?你可能會(huì)希望用DOMContentLoaded事件來(lái)代替 事件應(yīng)用程序中的onAvailable方法汉柒。

?代替@import

?前面提到了一個(gè)最佳實(shí)踐：為了實(shí)現(xiàn)逐步渲染，CSS應(yīng)該放在頂部责鳍。

在IE中用@import與在底部用<link>效果一樣碾褂，所以最好不要用它。

?在IE中薇搁，頁(yè)面底部@import和使用<link>作用是一樣的斋扰，因此最好不要使用它。

?避免使用濾鏡

IE專(zhuān)有的AlphaImageLoader濾鏡可以用來(lái)修復(fù)IE7之前的版本中半透明PNG圖片的問(wèn)題啃洋。在圖片加載過(guò)程中传货，這個(gè)濾鏡會(huì)阻塞渲染，卡住瀏覽器宏娄，還會(huì)增加內(nèi)存消耗而且是被應(yīng)用到每個(gè)元素的问裕，而不是每個(gè)圖片，所以會(huì)存在一大堆問(wèn)題孵坚。

最好的方法是干脆不要用AlphaImageLoader粮宛，而優(yōu)雅地降級(jí)到用在IE中支持性很好的PNG8圖片來(lái)代替。如果非要用AlphaImageLoader卖宠，應(yīng)該用下劃線(xiàn)hack：_filter來(lái)避免影響IE7及更高版本的用戶(hù)巍杈。

?完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式來(lái)代替，這種格式能在IE中很好地工作扛伍。如果你確實(shí)需要使用 AlphaImageLoader筷畦，請(qǐng)使用下劃線(xiàn)_filter又使之對(duì)IE7以上版本的用戶(hù)無(wú)效。

?優(yōu)化圖像

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

?優(yōu)化CSS Spirite

?在Spirite中水平排列你的圖片，垂直排列會(huì)稍稍增加文件大心婧健鼎文；

? Spirite中把顏色較近的組合在一起可以降低顏色數(shù)，理想狀況是低于256色以便適用PNG8格式因俐；

?便于移動(dòng)拇惋，不要在Spirite的圖像中間留有較大空隙。這雖然不大會(huì)增加文件大小但對(duì)于用戶(hù)代理來(lái)說(shuō)它需要更少的內(nèi)存來(lái)把圖片解壓為像素地圖女揭。 100×100的圖片為1萬(wàn)像素蚤假，而1000×1000就是100萬(wàn)像素。

?不要在HTML中縮放圖像——須權(quán)衡

?不要為了在HTML中設(shè)置長(zhǎng)寬而使用比實(shí)際需要大的圖片吧兔。如果你需要：

<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />

?那么你的圖片（mycat.jpg）就應(yīng)該是100×100像素而不是把一個(gè)500×500像素的圖片縮小使用磷仰。這里在下文有更有趣的分析。

favicon.ico要小而且可緩存

?favicon.ico是位于服務(wù)器根目錄下的一個(gè)圖片文件境蔼。它是必定存在的灶平，因?yàn)榧词鼓悴魂P(guān)心它是否有用伺通，瀏覽器也會(huì)對(duì)它發(fā)出請(qǐng)求，因此最好不要返回一 個(gè)404 Not Found的響應(yīng)逢享。由于是在同一臺(tái)服務(wù)器上罐监，它每被請(qǐng)求一次coockie就會(huì)被發(fā)送一次。這個(gè)圖片文件還會(huì)影響下載順序瞒爬，例如在IE中當(dāng)你在 onload中請(qǐng)求額外的文件時(shí)弓柱，favicon會(huì)在這些額外內(nèi)容被加載前下載。

?因此侧但，為了減少favicon.ico帶來(lái)的弊端矢空，要做到：

?文件盡量地小，最好小于1K

?在適當(dāng)?shù)臅r(shí)候（也就是你不要打算再換favicon.ico的時(shí)候禀横，因?yàn)楦鼡Q新文件時(shí)不能對(duì)它進(jìn)行重命名）為它設(shè)置Expires文件頭屁药。你可以很安全地 把Expires文件頭設(shè)置為未來(lái)的幾個(gè)月。你可以通過(guò)核對(duì)當(dāng)前favicon.ico的上次編輯時(shí)間來(lái)作出判斷柏锄。

Imagemagick可以幫你創(chuàng)建小巧的favicon酿箭。

?保持單個(gè)內(nèi)容小于25K

?這個(gè)限制是因?yàn)閕Phone不能緩存大于25K的組件，注意這里指的是未壓縮的大小趾娃。

這就是為什么縮減內(nèi)容本身也很重要缭嫡，因?yàn)閱渭兊膅zip可能不夠。

?因?yàn)閕Phone不能緩存大于25K的文件抬闷。注意這里指的是解壓縮后的大小械巡。由于單純gizp壓縮可能達(dá)不要求，因此精簡(jiǎn)文件就顯得十分重要饶氏。

?打包組件成復(fù)合文本

?把各個(gè)組件打包成一個(gè)像有附件的電子郵件一樣的復(fù)合文檔里，可以用一個(gè)HTTP請(qǐng)求獲取多個(gè)組件（記住一點(diǎn)：HTTP請(qǐng)求是代價(jià)高昂的）有勾。用這種方式的時(shí)候疹启，要先檢查用戶(hù)代理是否支持（iPhone就不支持）。

?頁(yè)面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email蔼卡，它能夠使你在一個(gè)HTTP請(qǐng)求中取得多個(gè)組件（切記：HTTP請(qǐng)求是很奢侈的）喊崖。當(dāng)你使用這條規(guī) 則時(shí)，首先要確定用戶(hù)代理是否支持（iPhone就不支持）雇逞。