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

法則1：?減少HTTP請(qǐng)求次數(shù)
80%的最終用戶響應(yīng)時(shí)間花在前端程序上，而其大部分時(shí)間則花在各種頁(yè)面元素，?如圖像、?樣式表、?腳本和?Flash?等的下載上。?減少頁(yè)面元素將會(huì)減少?HTTP?請(qǐng)求?次數(shù)。這是快速顯示頁(yè)面的關(guān)鍵所在。一種減少頁(yè)面元素個(gè)數(shù)的方法是簡(jiǎn)化頁(yè)面設(shè)計(jì)。?但是否存在其他方式，能做到既有豐富內(nèi)容，又能獲得快速響應(yīng)時(shí)間呢？以下是這樣一些技術(shù)：image maps?組合，多個(gè)圖片到一張圖片中?？偽募笮∽兓淮?#xff0c;但減少了HTTP?請(qǐng)求次數(shù)從而加快了頁(yè)面顯示速度。?該方式只適合圖片連續(xù)的情況；同時(shí)坐標(biāo)的定義是煩人又容易出錯(cuò)的工作。?CSS Sprites?是更好的方法。它可以組合頁(yè)面中的圖片到單個(gè)文件中，并使用?CSS?的?background-image?和?background-position?屬性來現(xiàn)實(shí)所需的部分圖片。?inline images?使用?data: URL scheme?來在頁(yè)面中內(nèi)嵌圖片。這將增大HTML文件的大小。組合?inline images?到你的（緩存）樣式表是既能較少HTTP請(qǐng)求，又能避免加大HTML文件大小的方法。?Combined files?通過組合多個(gè)腳本文件到單一文件來減少?HTTP?請(qǐng)求次數(shù)。樣式?表也可采用類似方法處理。?這個(gè)方法雖然簡(jiǎn)單，但沒有得到大規(guī)模的使用。美國(guó)網(wǎng)站每頁(yè)平均有7個(gè)腳本文件和2個(gè)樣式表。當(dāng)頁(yè)面之間腳本和樣式表變化很大時(shí)，該方式將遇到很大的挑戰(zhàn)，但如果做到的話，將能加快響應(yīng)時(shí)間。?減少HTTP請(qǐng)求次數(shù)是性能優(yōu)化的起點(diǎn)。這最提高首次訪問的效率起到很重要的作用。?Tenni Theurer?的文章?Browser Cache Usage – Exposed!描述，40-60%?據(jù)的日常訪問是首次訪問，因此為首次訪問者加快頁(yè)面訪問速度是用戶體驗(yàn)的關(guān)鍵。

法則2：?使用?CDN(Content Delivery Network,?內(nèi)容分發(fā)網(wǎng)絡(luò)?)

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

作為實(shí)現(xiàn)內(nèi)容地理分布的第一步，不要試圖重構(gòu)?web?應(yīng)用以適應(yīng)分布架構(gòu)。?改變?架構(gòu)將導(dǎo)致多個(gè)周期性任務(wù)，如同步session狀態(tài)，在多個(gè)server之間復(fù)制數(shù)據(jù)庫(kù)交易。?這樣縮短用戶與內(nèi)容距離的嘗試可能被應(yīng)用架構(gòu)改版所延遲，或阻止。?我們還記得?80-90%的最終用戶響應(yīng)時(shí)間花在下載頁(yè)面中的各種元素上，如圖像文件、?樣式表、?腳本和Flash等。?與其花在重構(gòu)系統(tǒng)這個(gè)困難的任務(wù)上，還不如先分布靜態(tài)內(nèi)容。?這不僅能大大減少響應(yīng)時(shí)間，而且由于CDN的存在，分布靜態(tài)內(nèi)容非常容易實(shí)現(xiàn)。?CDN是地理上分布的web server的集合，用于更高效地發(fā)布內(nèi)容。?通常基于網(wǎng)絡(luò)遠(yuǎn)近來選擇給具體用戶服務(wù)的?web server。?一些大型網(wǎng)站擁有自己的CDN，但是使用如?Akamai Technologies, Mirror Image Internet,?或?Limelight Networks?等?CDN?服務(wù)提供商的服務(wù)將是劃算的。?在Yahoo!把靜態(tài)內(nèi)容分布到?CDN減少了用戶影響時(shí)間?20%或更多。切換到CDN的代碼修改工作是很容易的，但能達(dá)到提高網(wǎng)站的速度。

法則3：增加?Expires Header
網(wǎng)頁(yè)內(nèi)容正變得越來越豐富，這意味著更多的腳本文件、樣式表、圖像文件和?Flash。首次訪問者將不得不面臨多次HTTP請(qǐng)求，但通過使用Expires header，?您可以在客戶端緩存這些元素。這在后續(xù)訪問中避免了不必要的HTTP請(qǐng)求。?Expires header?最常用于圖像文件，但是它也應(yīng)該用于腳本文件、樣式表和?Flash。?瀏覽器（和代理）使用緩存來減少?HTTP?請(qǐng)求的次數(shù)和大小，使得網(wǎng)頁(yè)加速裝載。?Web server?通過?Expires header?告訴客戶端一個(gè)元素可以緩存的時(shí)間長(zhǎng)度。?如果服務(wù)器是Apache?的話，您可以使用?ExpiresDefault?基于當(dāng)期日期來設(shè)置過期日期，如：?ExpiresDefault “access plus 10 years”?設(shè)置過期時(shí)間為從請(qǐng)求時(shí)間開始計(jì)算的10?年。請(qǐng)記住，如果使用超長(zhǎng)的過期時(shí)間，則當(dāng)內(nèi)容改變時(shí)，您必須修改文件名稱。?在?Yahoo!我們經(jīng)常把改名作為release?的一個(gè)步驟：版本號(hào)內(nèi)嵌在文件名中，如?yahoo_2.0.6.js。

法則4：壓縮頁(yè)面元素
通過壓縮HTTP響應(yīng)內(nèi)容可減少頁(yè)面響應(yīng)時(shí)間。從?HTTP/1.1?開始，web客戶端在?HTTP請(qǐng)求中通過?Accept-Encoding?頭來表明支持的壓縮類型，如：

Accept-Encoding: gzip, deflate.?如果?Web server?檢查到?Accept-Encoding?頭，它會(huì)使用客戶端支持的方法來壓?縮?HTTP?響應(yīng)，會(huì)設(shè)置?Content-Encoding?頭，如：Content-Encoding: gzip。?Gzip?是目前最流行及有效的壓縮方法。?其他的方式如deflate，但它效果較差，也不夠流行。通過?Gzip，內(nèi)容一般可減少?70%。如果是Apache，在?1.3?版本下需?使用?mod_gzip?模塊，而在?2.x?版本下，則需使用mod_deflate。?Web server?根據(jù)文件類型來決定是否壓縮。?大部分網(wǎng)站對(duì)?HTML?文件進(jìn)行壓縮。?但?對(duì)腳本文件和樣式表進(jìn)行壓縮也是值得的。實(shí)際上，對(duì)包括?XML?和JSON?在內(nèi)的任務(wù)文本信息進(jìn)行壓縮都是值得的。?圖像文件和?PDF?文件不應(yīng)該被壓縮，因?yàn)樗?們本來就是壓縮格式保存的。對(duì)它們進(jìn)行壓縮，不但浪費(fèi)?CPU，而且還可能增加?文件的大小。?因此，對(duì)盡量多的文件類型進(jìn)行壓縮是一種減少頁(yè)面大小和提高用戶體驗(yàn)的簡(jiǎn)?便方法。

法則5：?把樣式表放在頭上
我們發(fā)現(xiàn)把樣式表移到HEAD部分可以提高界面加載速度，因此這使得頁(yè)面元素可以順序顯示。?在很多瀏覽器下，如?IE，把樣式表放在?document?的底部的問題在于它禁止了網(wǎng)頁(yè)內(nèi)容的順序顯示。?瀏覽器阻止顯示以免重畫頁(yè)面元素，那用戶只能看到空白頁(yè)了。Firefox?不會(huì)阻止顯示，但這意味著當(dāng)樣式表下載后，有些頁(yè)面元素可能需要重畫，這導(dǎo)致閃爍問題。?HTML?規(guī)范明確要求樣式表被定義在HEAD?中，因此，為避免空白屏幕或閃爍問題，?最好的辦法是遵循HTML規(guī)范，把樣式表放在HEAD中。

法則6：把腳本文件放在底部
與樣式文件一樣，我們需要注意腳本文件的位置。?我們需盡量把它們放在頁(yè)面的底部，這樣一方面能順序顯示，另方面可達(dá)到最大的并行下載。?瀏覽器會(huì)阻塞顯示直到樣式表下載完畢，因此我們需要把樣式表放在?HEAD部分。?而對(duì)于腳本來說，腳本后面內(nèi)容的順序顯示將被阻塞，因此把腳本盡量放在底部意味著更多內(nèi)容能被快速顯示。腳本引起的第二個(gè)問題是它阻塞并行下載數(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)。?在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用?document.write?方法來插入頁(yè)面內(nèi)容。?同時(shí)可能還存在域的問題。?不過在很多情況下，還是有一些方法的。?一個(gè)備選方法是使用延遲腳本（deferred script）。DEFER屬性表明腳本未包含?document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是，Firefox?不支持?DEFER?屬性。?IE中，腳本可能被延遲執(zhí)行，但不一定得到需要的長(zhǎng)時(shí)間延遲。在不過從另外角度來說，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。

法則7：避免?CSS?表達(dá)式
CSS?表達(dá)式是功能強(qiáng)大的(同時(shí)也是危險(xiǎn)的)用于動(dòng)態(tài)設(shè)置CSS屬性的方式。IE從版本5開始支持?CSS?表達(dá)式，如?backgourd-color: expression((new Date()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每個(gè)小時(shí)切換一次。?CSS表達(dá)式的問題是其執(zhí)行次數(shù)超過大部分人的期望。?不僅頁(yè)面顯示和?resize?時(shí)計(jì)算表達(dá)式，而且當(dāng)頁(yè)面滾屏，甚至當(dāng)鼠標(biāo)在頁(yè)面上移動(dòng)時(shí)都會(huì)重新計(jì)算表達(dá)式。?一種減少CSS表達(dá)式執(zhí)行次數(shù)的方法是一次性表達(dá)式，即當(dāng)?shù)谝淮螆?zhí)行時(shí)就以明確的數(shù)值代替表達(dá)式。如果必須動(dòng)態(tài)設(shè)置的話，可使用事件處理函數(shù)代替。如果您必須使用CSS表達(dá)式的話，請(qǐng)記住它們可能被執(zhí)行上千次，從而影響頁(yè)面性能。

法則8：把JavaScript和CSS放到外部文件中

上述很多性能優(yōu)化法則都基于外部文件進(jìn)行優(yōu)化。現(xiàn)在，我們必須問一個(gè)問題：JavaScript?和CSS應(yīng)該包括在外部文件，還是在頁(yè)面文件中？在現(xiàn)實(shí)世界中，使用外部文件會(huì)加快頁(yè)面顯示速度，因?yàn)橥獠课募?huì)被瀏覽器緩存。如果內(nèi)置JavaScript?和CSS?在頁(yè)面中雖然會(huì)減少HTTP請(qǐng)求次數(shù)，但增大了頁(yè)面的大小。?另外一方面，使用外部文件，會(huì)被瀏覽器緩存，則頁(yè)面大小會(huì)減小，同時(shí)又不增加?HTTP?請(qǐng)求次數(shù)。?因此，一般來說，外部文件是更可行的方式。?唯一的例外是內(nèi)嵌方式對(duì)主頁(yè)更有效，如Yahoo!和My Yahoo!都使用內(nèi)嵌方式。一般來說，在一個(gè)?session中，主頁(yè)訪問此時(shí)較少，因此內(nèi)嵌方式可以取得更快的用戶響應(yīng)時(shí)間。

法則9：減少DNS查詢次數(shù)
DNS用于映射主機(jī)名和IP地址，一般一次解析需要?20～120?毫秒。?為達(dá)到更高的性能，DNS解析通常被多級(jí)別地緩存，如由ISP或局域網(wǎng)維護(hù)的caching server，本地機(jī)器操作系統(tǒng)的緩存（如?windows?上的?DNS Client Service）瀏覽器的缺省?DNS?緩存時(shí)間為30分鐘，Firefox的缺省緩沖時(shí)間是1分鐘。?IE減少主機(jī)名可減少DNS?查詢的次數(shù)，但可能造成并行下載數(shù)的減少。避免DNS查詢可減少響應(yīng)時(shí)間，而減少并行下載數(shù)可能增加響應(yīng)時(shí)間。?一個(gè)可行的折中是把內(nèi)容分布到至少2?個(gè)，最多4個(gè)不同的主機(jī)名上。

法則10：最小化JavaScript代碼

最小化JavaScript代碼指在JS代碼中刪除不必要的字符，從而降低下載時(shí)間。?兩個(gè)流行的工具是JSMin?和YUI Compressor。?混淆是最小化于源碼的備選方式。?象最小化一樣，它通過刪除注釋和空格來減少源碼大小，同時(shí)它還可以對(duì)代碼進(jìn)行混淆處理。?作為混淆的一部分，函數(shù)名和變量名被替換成短的字符串，這使得代碼更緊湊，同時(shí)也更難讀，使得難于被反向工程。Dojo Compressor (ShrinkSafe)是最常見的混淆工具。?最小化是安全的、直白的過程，而混淆則更復(fù)雜，而且容易產(chǎn)生問題。從對(duì)美國(guó)10大網(wǎng)站的調(diào)查來看，通過最小化，文件可減少?21%，而混淆則可減少25%。?除了最小化外部腳本文件外，內(nèi)嵌的腳本代碼也應(yīng)該被最小化。?即使腳本根據(jù)法則4被壓縮后傳輸，最小化腳本刻減少文件大小?5%或更高。

法則11：?避免重定向
重定向功能是通過301和302這兩個(gè)HTTP狀態(tài)碼完成的，如：HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html?瀏覽器自動(dòng)重定向請(qǐng)求到?Location?指定的?URL?上，重定向的主要問題是降低了?用戶體驗(yàn)。?一種最耗費(fèi)資源、經(jīng)常發(fā)生而很容易被忽視的重定向是URL的最后缺少，如訪?問http://astrology.yahoo.com/astrology?將被重定向到

http://astrology.yahoo.com/astrology/。在?Apache?下，可以通過Alias，mod_rewrite或?DirectorySlash?等方式來解決該問題。

法則12：刪除重復(fù)的腳本文件
在一個(gè)頁(yè)面中包含重復(fù)的JS腳本文件會(huì)影響性能，即它會(huì)建立不必要的HTTP請(qǐng)求和額外的JS執(zhí)行。?不必要的HTTP請(qǐng)求發(fā)生在IE?下，而?Firefox?不會(huì)產(chǎn)生多余的HTTP請(qǐng)求。?額外的JS執(zhí)行，不管在IE下，還是在Firefox下，都會(huì)發(fā)生。?一個(gè)避免重復(fù)的腳本文件的方式是使用模板系統(tǒng)來建立腳本管理模塊。?除了防止?重復(fù)的腳本文件外，該模塊還可以實(shí)現(xiàn)依賴性檢查和增加版本號(hào)到腳本文件名中，從而實(shí)現(xiàn)超長(zhǎng)的過期時(shí)間。

法則13：配置?ETags
ETags?是用于確定瀏覽器緩存中元素是否與?Web server?中的元素相匹配的機(jī)制，?它是比?last-modified date?更靈活的元素驗(yàn)證機(jī)制。ETag?是用于唯一表示元素版本的字符串，它需被包括在引號(hào)中。Web server?首先在?response?中指定?ETag：?HTTP/1.1 200 OK < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f” Content-Length: 12195后來，如果瀏覽器需要驗(yàn)證某元素，它使用?If-None-Match?頭回傳?ETag?給?Web server，如果?ETag?匹配，則服務(wù)器返回304代碼，從而節(jié)省了下載時(shí)間：GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com < 03:03:59 2006 Dec 12> 10c24bc-4ab-457e1c1f” HTTP/1.1 304 Not Modified ETags?的問題在于它們是基于服務(wù)器唯一性的某些屬性構(gòu)造的，如?Apache1.3?和?2.x，其格式是?inode-size-timestamp，而在?IIS5.0和?6.0?下，其格式是?Filetimestamp:ChangeNumber。這樣同一個(gè)元素在不同的?web server?上，其?ETag?是不一樣的。這樣在多?Web server?的環(huán)境下，瀏覽器先從server1?請(qǐng)求某?元素，后來向?server2?驗(yàn)證該元素，由于?ETag?不同，所以緩存失效，必須重新?下載。

因此，如果您未用到?ETags?系統(tǒng)提供的靈活的驗(yàn)證機(jī)制，最好刪除?ETag。刪除?ETag會(huì)減少?http response?及后續(xù)請(qǐng)求的?HTTP?頭的大小。微軟支持文章描述了?如何刪除ETags，而在?Apache?下，只要在配置文件中設(shè)置?FileETag none?即可。

法則14：緩存?Ajax
性能優(yōu)化法則同樣適用于web 2.0?應(yīng)用。提高Ajax的性能最重要的方式是使得其response?可緩存，就像“法則3”增加?Expires Header”討論的那樣。以下其他法則同樣適用于?Ajax，當(dāng)然“法則3”是最有效的方式:

轉(zhuǎn)載于:https://www.cnblogs.com/fashion1993/p/4044975.html

總結(jié)

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

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