前端網(wǎng)頁提速的具體方法

前端網(wǎng)頁提速的具體方法

先說說目標(biāo),前端優(yōu)化的目標(biāo)是什么,一個字:快.兩個字:更快.那么下面我們來看看慢的網(wǎng)頁將會給我們帶來什么:

1.慢的頁面可能會網(wǎng)站失去更多的用戶.

2.慢500ms意味著20%的用戶將放棄訪問(google)3.慢100ms意味著1%的用戶將放棄交易(amazon)4.慢???ms意味著??%的用戶將放棄xx(yoursite)

所以我們的目標(biāo)很明確,就是要網(wǎng)頁展現(xiàn)的速度更快.方法如下：

0.減少http請求

我把它排在了第一點,為啥要在第一點呢,很簡單,因為它最重要.

如何做呢.一般來說,我們從變化性上把數(shù)據(jù)分成兩種類型,變和不變.那么不變的數(shù)據(jù)可以緩存,變化的數(shù)據(jù)不能緩存,這是一個常識,也就是說要減少我們的http請求次數(shù)這個目標(biāo)可以轉(zhuǎn)換成把數(shù)據(jù)分為變化和不變化兩個部分.不變化的數(shù)據(jù)不需要再次請求,這樣http請求的次數(shù)就減少了,下面我們分點來描述將數(shù)據(jù)分類的途徑.

1.合并腳本文件

包括腳本,樣式和圖片,可以有選擇的把一些Js和css可以合并成一個文件,一些圖片可以使用csssprites技術(shù).這樣做的原因是什么?做過web開發(fā)的人都知道,js和css基本是不變的,是靜態(tài)文件,圖片亦然.那么不變的文件如果適當(dāng)?shù)暮喜⒃谝黄?會有什么效果呢?請求的次數(shù)從多次變成了一次.這樣http請求的次數(shù)就減少了.當(dāng)時合并之后,文件體積變大了,會影響速度嗎?答:肯定會啊,不過這里是需要權(quán)衡的,比如我100份靜態(tài)文件,合并成10份還是合并成1份這就得看你得具體情況了.

2.指定Expires或者Cache-Control

對于靜態(tài)內(nèi)容：設(shè)置文件頭過期時間Expires的值為“Neverexpire”（永不過期）動態(tài)頁面,在代碼中添加cache-control,表示多少時間之后過期,如:response.setHeader("Cache-Control","max-age=3600");

如果使用了Expires文件頭，當(dāng)頁面內(nèi)容改變時就必須改變內(nèi)容的文件名。通常是在文件內(nèi)容后加版本號

這一點在企業(yè)應(yīng)用的系統(tǒng)中也時有發(fā)生.比如我們使用extjs作為前端的技術(shù),400多k啊,每打開一個頁面都導(dǎo)入,下載這個js,夠無聊的.那么童子們可能就要問了,靜態(tài)文件為啥不用apache,lighttpd等呢,答,用了又怎么樣,不設(shè)expire或者max-age不是一樣要下載,最好的方法是寫一個filter,再filter中判斷,如果url滿足一定的條件(比如符合配置文件中的正則表達(dá)式),那么就設(shè)置一個max-age,這樣就ok,太簡單了,幾行代碼就可以搞定.快哉.

3.緩存Ajax請求

緩存的方法同動態(tài)頁面,ajax請求需要使用get方式,url長度為2k(ie)限制(post請求有兩個過程,1發(fā)送請求headers,2發(fā)送請求數(shù)據(jù),根據(jù)http規(guī)范,get請求只會發(fā)送一個tcp包).--------這一段話來自yahoo,先不管其真假,我們從另外一個方面來考慮一下為什么最好使用get方式,之前有一個項目的ajax請求使用了post方式,后來發(fā)現(xiàn)經(jīng)常出錯,而且拋出了squid的錯誤,因為我們的網(wǎng)站使用了squid,問題就出在這里了,從http協(xié)議上可以了解到,method=post是指把數(shù)據(jù)提交到服務(wù)器上去,那么squid的一個特性是不會緩存post請求(事實上它確實不應(yīng)該緩存,因為這樣會違反http協(xié)議中的語義),把a(bǔ)jax請求改成get方式之后,一切恢復(fù)如常.

4.移除重復(fù)的js

重復(fù)的js導(dǎo)入也有可能導(dǎo)致ie重新加載該腳本.沒啥好說的,照做.

5.避免重定向

有一種經(jīng)常被網(wǎng)頁開發(fā)者忽略卻往往十分浪費響應(yīng)時間的跳轉(zhuǎn)現(xiàn)象。這種現(xiàn)象發(fā)生在當(dāng)URL本該有斜杠（/）卻被忽略掉時。這時候會返回一個301的狀態(tài)碼,然后瀏覽器重新發(fā)起一次請求.在企業(yè)應(yīng)用里,重定向是我們在企業(yè)應(yīng)用中常用的技術(shù),不過用在網(wǎng)站項目上,您可要小心了,因為普通的重定向其實是server在responseheader中設(shè)置httpstatus=302,瀏覽器收到之后,判斷出是302,會重新發(fā)送一個請求,目標(biāo)地址是前一次返回中指定的地址.在網(wǎng)站項目中如果可以不用重定向就別用吧.如果您做企業(yè)應(yīng)用項目,ok,關(guān)系不大,您就放心的”定”吧.

6.使用cdn

讓內(nèi)容更靠近用戶,這有啥好說呢,原理很簡單,就是根據(jù)用戶瀏覽器所在機(jī)器的ip來判斷哪些服務(wù)器離用戶最近,瀏覽器會再次去請求這些最近的機(jī)器.一般的cdn服務(wù)商是通過開發(fā)自己的dnsserver來達(dá)到這個目的的.不過這個是通常情況哦,技術(shù)實力比較高,或者場景比較特殊的公司會開發(fā)自己的cdn.當(dāng)然不管怎么說,使用cdn肯定可以使頁面響應(yīng)更快(也包括音頻,視頻,圖片,文本文件,等等等等)

7.減小返回數(shù)據(jù)的體積(1)使用gzip壓縮返回數(shù)據(jù)

Gzip壓縮所有可能的文件類型是減少文件體積增加用戶體驗的簡單方法。比如本來400k的文件,壓縮一下之后只有50k-100k,那么網(wǎng)絡(luò)的流量就立刻下來了,壓縮的代價是服務(wù)器端要壓縮文件,需要消耗cpu,瀏覽器需要解壓文件,也需要消耗cpu,不過對于現(xiàn)代這么nb的pc,來說,瀏覽器解壓一下數(shù)據(jù)帶來的cpu消耗簡直不值一提.所以您就壓吧.不過壓的時候要小心哦,有的瀏覽器在特定場景下會出去一些小bug,導(dǎo)致頁面不正常.比如ie6在跨域的時候可能會有些小麻煩,把這部分?jǐn)?shù)據(jù)的gzip去掉就可以了.(2)最小化js文件和css文件

壓縮js可以使用JSMin或者YUICompressor,后者同時可以壓縮css,這個也沒啥好說的,照做吧.

(3)將css和js獨立成外部文件

其實這一點也可以看成是區(qū)分不變數(shù)據(jù)和變化數(shù)據(jù).很多人喜歡在頁面商寫很多很多的js和css,這些數(shù)據(jù)其實都是不會變化的數(shù)據(jù),也就是說這些數(shù)據(jù)也是可以緩存在瀏覽器上的,通過把它們獨立成外部文件,可以把這些數(shù)據(jù)緩存起來.這樣做看上去是增加的請求的次數(shù),但是由于第一次請求之后該部分?jǐn)?shù)據(jù)已經(jīng)被緩存,所以第二次就無需再請求后端,減少了網(wǎng)絡(luò)帶寬的開銷.

8.優(yōu)化Cookie(1)減小cookie體積

能不放就別放吧,為啥呀,cookie就象鑰匙串,只有出門和回家得時候才用,但是一整天你都要帶在身上,麻煩不.(2)合理設(shè)置Cookie域

由于二級域名可以拿到一級域名得cookie,那么如果,而二級域名之間確不能相互共享cookie,所以合理得設(shè)置cookie得域名也可以避免無必要得帶寬浪費和響應(yīng)速度得增加.(3)設(shè)置合理的cookie過期時間

該過期就過期,不要讓不必要的數(shù)據(jù)一直帶在身上走來走去.(4)使用域分離

為圖片或者其他靜態(tài)資源文件使用子域或者建立新的獨立域名(申請新的域名),避免無必要的cookie傳輸,當(dāng)然也是要在有必要得情況下,圖片類網(wǎng)站肯定有必要,javaeye上得圖片并沒有使用域分離,所以我們得cookie其實會帶到壇子得圖片服務(wù)器上去,每次請求圖片都是如此(不過還好,壇子里沒有什么圖片,所以這方面的浪費不大).(5)小結(jié)

其實cookie上得問題,單詞請求看上去也不是什么大問題,好像是無所謂得事情,就那么幾十個byte,至于嗎,不過大家都聽說過水滴石穿,繩鋸木斷的故事.所以該做的,我們還是要做,正所謂,勿以善小而不為,勿以惡小而為之.

9.優(yōu)化瀏覽器加載(1)將css放在頁面頂部加載

把樣式表放在文檔底部的問題是在包括InternetExplorer在內(nèi)的很多瀏覽器中這會中止內(nèi)容的有序呈現(xiàn)。瀏覽器中止呈現(xiàn)是為了避免樣式改變引起的頁面元素重繪。用戶不得不面對一個空白頁面。

HTML規(guī)范清楚指出樣式表要放包含在頁面的區(qū)域內(nèi)：“和不同，只能出現(xiàn)在文檔的區(qū)域內(nèi)，盡管它可以多次使用它”。無論是引起白屏還是出現(xiàn)沒有樣式化的內(nèi)容都不值得去嘗試。最好的方案就是按照HTML規(guī)范在文檔內(nèi)加載你的樣式表。

(2)將js放在頁面底部加載

腳本帶來的問題就是它阻止了頁面的平行下載。HTTP/1.1規(guī)范建議，瀏覽器每個主機(jī)名的并行下載內(nèi)容不超過兩個。如果你的圖片放在多個主機(jī)名上，你可以在每個并行下載中同時下載2個以上的文件。但是當(dāng)下載腳本時，瀏覽器就不會同時下載其它文件了，即便是主機(jī)名不相同。

Js放在底部加載其實并不影響瀏覽器展示頁面,除非用戶會在js加載完成之前就調(diào)用某個js方法,比如說頁面剛展現(xiàn)到一半,但是恰好這一半里有一部分是調(diào)用了還未下載的js,這個時候就會出問題了,如果童子們遇到這種情況,可以把這部分js先加載.

全文總結(jié)

以上這些優(yōu)化點其實只是前端優(yōu)化的部分內(nèi)容,不過根據(jù)80/20原則,這些優(yōu)化點已經(jīng)覆蓋了80%的情況了,同時前端優(yōu)化其實也不是什么復(fù)雜的東西,原理上是很簡單的,更多的是需要我們的實踐,因為我們可能會碰到各種各樣的問題,而很多的這些問題其實一般是預(yù)測不到的.只有遇到過才知道.

說的不對的地方請大家拍磚,或者童子們也可以把自己的經(jīng)驗在這里和大家分享一下.代表其他童子表示十分的感謝.

擴(kuò)展閱讀：網(wǎng)頁加速的14條優(yōu)化法則

網(wǎng)頁加速的14條優(yōu)化法則

關(guān)鍵字:網(wǎng)頁加速,Web

優(yōu)化,性能優(yōu)化,YouMonitor.Us

譯自：

最近，YouMonitor.Us在做Web應(yīng)用性能優(yōu)化，在網(wǎng)上發(fā)現(xiàn)了文章HighPerformanceWebSites:TheImportanceofFront-EndPerformance，感覺其

14條優(yōu)化

法則很實用，操作性很強(qiáng)。因此翻譯出來，供大家參考。

Web應(yīng)用性能優(yōu)化黃金法則：

先優(yōu)化前端程序(front-end)的性能，因為這是80%或以上的最終用戶響應(yīng)時間的花費所在。

法則1.減少HTTP請求次數(shù)

80%的最終用戶響應(yīng)時間花在前端程序上，而其大部分時間則花在各種頁面元素，如圖像、樣式表、腳本和Flash等的下載上。減少頁面元素將會減少HTTP請求次數(shù)。這是快速顯示頁面的關(guān)鍵所在。

一種減少頁面元素個數(shù)的方法是簡化頁面設(shè)計。但是否存在其他方式，能做到既有豐富內(nèi)容，又能獲得快速響應(yīng)時間呢？以下是這樣一些技術(shù)：

Imagemaps組合多個圖片到一張圖片中。總文件大小變化不大，但減少了

HTTP請求次數(shù)從而加快了頁面顯示速度。該方式只適合圖片連續(xù)的情況；同時坐標(biāo)的定義是煩人又容易出錯的工作。

CSSSprites是更好的方法。它可以組合頁面中的圖片到單個文件中，并使用

CSS的background-image和background-position屬性來現(xiàn)實所需的部分圖片。

Inlineimages使用data:URLscheme來在頁面中內(nèi)嵌圖片。這將增大HTML文件的大小。組合inlineimages到你的（緩存）樣式表是既能較少HTTP請求，又能避免加大HTML文件大小的方法。Combinedfiles通過組合多個腳本文件到單一文件來減少HTTP請求次數(shù)。樣式表也可采用類似方法處理。這個方法雖然簡單，但沒有得到大規(guī)模的使用。10大美國網(wǎng)站每頁平均有7個腳本文件和2個樣式表。當(dāng)頁面之間腳本和樣式表變化很大時，該方式將遇到很大的挑戰(zhàn)，但如果做到的話，將能加快響應(yīng)時間。

減少HTTP請求次數(shù)是性能優(yōu)化的起點。這最提高首次訪問的效率起到很重要的作用。據(jù)TenniTheurer的文章BrowserCacheUsage-Exposed!描述，40-60%的日常訪問是首次訪問，因此為首次訪問者加快頁面訪問速度是用戶體驗的關(guān)鍵。

法則2.使用CDN(ContentDeliveryNetwork,內(nèi)容分發(fā)網(wǎng)絡(luò))

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

作為實現(xiàn)內(nèi)容地理分布的第一步，不要試圖重構(gòu)web應(yīng)用以適應(yīng)分布架構(gòu)。改變架構(gòu)將導(dǎo)致多個周期性任務(wù)，如同步session狀態(tài)，在多個server之間復(fù)制數(shù)據(jù)庫交易。這樣縮短用戶與內(nèi)容距離的嘗試可能被應(yīng)用架構(gòu)改版所延遲，或阻止。

我們還記得80-90%的最終用戶響應(yīng)時間花在下載頁面中的各種元素上，如圖像文件、樣式表、腳本和Flash等。與其花在重構(gòu)系統(tǒng)這個困難的任務(wù)上，還不如先分布靜態(tài)內(nèi)容。這不僅能大大減少響應(yīng)時間，而且由于CDN的存在，分布靜態(tài)內(nèi)容非常容易實現(xiàn)。

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

一些大型網(wǎng)站擁有自己的CDN，但是使用如AkamaiTechnologies,MirrorImageInternet,或LimelightNetworks等CDN服務(wù)提供商的服務(wù)將是劃算的。在Yahoo!把靜態(tài)內(nèi)容分布到CDN減少了用戶影響時間20%或更多。切換到CDN的代碼修改工作是很容易的，但能達(dá)到提高網(wǎng)站的速度。

法則3.增加ExpiresHeader

網(wǎng)頁內(nèi)容正變得越來越豐富，這意味著更多的腳本文件、樣式表、圖像

文件和Flash。首次訪問者將不得不面臨多次HTTP請求，但通過使用Expiresheader，您可以在客戶端緩存這些元素。這在后續(xù)訪問中避免了不必要的HTTP請求。Expiresheader最常用于圖像文件，但是它也應(yīng)該用于腳本文件、樣式表和Flash。

瀏覽器（和代理）使用緩存來減少HTTP請求的次數(shù)和大小，使得網(wǎng)頁加速裝載。Webserver通過Expiresheader告訴客戶端一個元素可以緩存的時間長度。

如果服務(wù)器是Apache的話，您可以使用ExpiresDefault基于當(dāng)期日期來設(shè)置過期日期，如：

ExpiresDefault“accessplus10years”設(shè)置過期時間為從請求時間開始計算的10年。

請記住，如果使用超長的過期時間，則當(dāng)內(nèi)容改變時，您必須修改文件名稱。在Yahoo!我們經(jīng)常把改名作為release的一個步驟：版本號內(nèi)嵌在文件名中，如yahoo_2.0.6.js。

法則4.壓縮頁面元素

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

Accept-Encoding:gzip,deflate.

如果Webserver檢查到Accept-Encoding頭，它會使用客戶端支持的方法來壓縮HTTP響應(yīng)，會設(shè)置Content-Encoding頭，如：Content-Encoding:gzip。Gzip是目前最流行及有效的壓縮方法。其他的方式如deflate，但它效果較差，也不夠流行。通過Gzip，內(nèi)容一般可減少70%。如果是Apache，在1.3版本下需使用mod_gzip模塊，而在2.x版本下，則需使用mod_deflate。

Webserver根據(jù)文件類型來決定是否壓縮。大部分網(wǎng)站對HTML文件進(jìn)行壓縮。但對腳本文件和樣式表進(jìn)行壓縮也是值得的。實際上，對包括XML和JSON在內(nèi)的任務(wù)文本信息進(jìn)行壓縮都是值得的。圖像文件和PDF文件不應(yīng)該被壓縮，因為它們本來就是壓縮格式保存的。對它們進(jìn)行壓縮，不但浪費CPU，而且還可能增加文件的大小。

因此，對盡量多的文件類型進(jìn)行壓縮是一種減少頁面大小和提高用戶體驗的簡便方法。

法則5.把樣式表放在頭上

我們發(fā)現(xiàn)把樣式表移到HEAD部分可以提高界面加載速度，因此這使得頁面元素可以順序顯示。

在很多瀏覽器下，如IE，把樣式表放在document的底部的問題在于它禁止了網(wǎng)頁內(nèi)容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁了。Firefox不會阻止顯示，但這意味著當(dāng)樣式表下載后，有些頁面元素可能需要重畫，這導(dǎo)致閃爍問題。

HTML規(guī)范明確要求樣式表被定義在

HEAD中，因此，為避免空白屏幕或閃爍

問題，最好的辦法是遵循HTML規(guī)范，把樣式表放在HEAD中。

法則6.把腳本文件放在底部

與樣式文件一樣，我們需要注意腳本文件的位置。我們需盡量把它們放在頁面的底部，這樣一方面能順序顯示，另方面可達(dá)到最大的并行下載。

瀏覽器會阻塞顯示直到樣式表下載完畢，因此我們需要把樣式表放在HEAD部分。而對于腳本來說，腳本后面內(nèi)容的順序顯示將被阻塞，因此把腳本盡量放在底部意味著更多內(nèi)容能被快速顯示。腳本引起的第二個問題是它阻塞并行下載數(shù)量。HTTP/1.1規(guī)范建議瀏覽器每個主機(jī)的并行下載數(shù)不超過2個。因此如果您把圖像文件分布到多臺機(jī)器的話，您可以達(dá)到超過2個的并行下載。但是當(dāng)腳本文件下載時，瀏覽器不會啟動其他的并行下載，甚至其他主機(jī)的下載也不啟動。

在某些情況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write方法來插入頁面內(nèi)容。同時可能還存在域的問題。不過在很多情況下，還是有一些方法的。

一個備選方法是使用延遲腳本（deferredscript）。DEFER屬性表明腳本未包含document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是，F(xiàn)irefox不支持DEFER屬性。在IE中，腳本可能被延遲執(zhí)行，但不一定得到需要的長時間延遲。不過從另外角度來說，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。

法則7.避免CSS表達(dá)式

CSS表達(dá)式是功能強(qiáng)大的(同時也是危險的)用于動態(tài)設(shè)置CSS屬性的方式。IE，從版本5開始支持CSS表達(dá)式，如backgourd-color:

expression((newDate()).getHours()%2?”#B8D4FF”:”#F08A00”)，即背景色每個小時切換一次。

CSS表達(dá)式的問題是其執(zhí)行次數(shù)超過大部分人的期望。不僅頁面顯示和resize時計算表達(dá)式，而且當(dāng)頁面滾屏，甚至當(dāng)鼠標(biāo)在頁面上移動時都會重新計算表達(dá)式。

一種減少CSS表達(dá)式執(zhí)行次數(shù)的方法是一次性表達(dá)式，即當(dāng)?shù)谝淮螆?zhí)行時就以明確的數(shù)值代替表達(dá)式。如果必須動態(tài)設(shè)置的話，可使用事件處理函數(shù)代替。如果您必須使用CSS表達(dá)式的話，請記住它們可能被執(zhí)行上千次，從而影響頁面性能。

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

上述很多性能優(yōu)化法則都基于外部文件進(jìn)行優(yōu)化�，F(xiàn)在，我們必須問一個問題：JavaScript和CSS應(yīng)該包括在外部文件，還是在頁面文件中？在現(xiàn)實世界中，使用外部文件會加快頁面顯示速度，因為外部文件會被瀏覽器緩存。如果內(nèi)置JavaScript和CSS在頁面中雖然會減少HTTP請求次數(shù)，但增大了頁面的大小。另外一方面，使用外部文件，會被瀏覽器緩存，則頁面大小會減小，同時又不增加HTTP請求次數(shù)。

因此，一般來說，外部文件是更可行的方式。唯一的例外是內(nèi)嵌方式對主頁更有效，如Yahoo!和MyYahoo!都使用內(nèi)嵌方式。一般來說，在一個session中，主頁訪問此時較少，因此內(nèi)嵌方式可以取得更快的用戶響應(yīng)時間。

法則9.減少DNS查詢次數(shù)

DNS用于映射主機(jī)名和IP地址，一般一次解析需要20～120毫秒。為達(dá)到更高的性能，DNS解析通常被多級別地緩存，如由ISP或局域網(wǎng)維護(hù)的cachingserver，本地機(jī)器操作系統(tǒng)的緩存（如windows上的DNSClientService），瀏覽器。IE的缺省DNS緩存時間為30分鐘，F(xiàn)irefox的缺省緩沖時間是1分鐘。

減少主機(jī)名可減少DNS查詢的次數(shù)，但可能造成并行下載數(shù)的減少。避免DNS查詢可減少響應(yīng)時間，而減少并行下載數(shù)可能增加響應(yīng)時間。一個可行的折中是把內(nèi)容分布到至少2個，最多4個不同的主機(jī)名上。

法則10.最小化JavaScript代碼

最小化JavaScript代碼指在JS代碼中刪除不必要的字符，從而降低下載時間。兩個流行的工具是JSMin和YUICompressor。

混淆是最小化于源碼的備選方式。象最小化一樣，它通過刪除注釋和空格來減少源碼大小，同時它還可以對代碼進(jìn)行混淆處理。作為混淆的一部分，函數(shù)名和變量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難于被反向工程。DojoCompressor(ShrinkSafe)是最常見的混淆工具。

最小化是安全的、直白的過程，而混淆則更復(fù)雜，而且容易產(chǎn)生問題。從對美國10大網(wǎng)站的調(diào)查來看，通過最小化，文件可減少21%，而混淆則可減少25%。除了最小化外部腳本文件外，內(nèi)嵌的腳本代碼也應(yīng)該被最小化。即使腳本根據(jù)法則4被壓縮后傳輸，最小化腳本刻減少文件大小5%或更高。

法則11.避免重定向

重定向功能是通過301和302這兩個HTTP狀態(tài)碼完成的，如：HTTP/1.1301MovedPermanentlyLocation:Content-Type:text/html

瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是降低了用戶體驗。

一種最耗費資源、經(jīng)常發(fā)生而很容易被忽視的重定向是URL的最后缺少/，如訪問將被重定向到

。在

Apache下，可以通過Alias，

mod_rewrite或DirectorySlash等方式來解決該問題。

法則12.刪除重復(fù)的腳本文件

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

不必要的HTTP請求發(fā)生在IE下，而Firefox不會產(chǎn)生多余的HTTP請求。額外的JS執(zhí)行，不管在IE下，還是在Firefox下，都會發(fā)生。

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

ETags是用于確定瀏覽器緩存中元素是否與Webserver中的元素相匹配的機(jī)制，它是比last-modifieddate更靈活的元素驗證機(jī)制。ETag是用于唯一表示元素版本的字符串，它需被包括在引號中。Webserver首先在response中指定ETag：

HTTP/1.1200OK10c24bc-4ab-457e1c1f"Content-Length:12195

后來，如果瀏覽器需要驗證某元素，它使用If-None-Match頭回傳ETag給Webserver，如果ETag匹配，則服務(wù)器返回304代碼，從而節(jié)省了下載時間：

GET/i/yahoo.gifHTTP/1.1Host:us.yimg.com10c24bc-4ab-457e1c1f"

HTTP/1.1304NotModified

ETags的問題在于它們是基于服務(wù)器唯一性的某些屬性構(gòu)造的，如Apache1.3和2.x，其格式是inode-size-timestamp，而在IIS5.0和6.0下，其格式是Filetimestamp:ChangeNumber。這樣同一個元素在不同的webserver上，其ETag是不一樣的。這樣在多Webserver的環(huán)境下，瀏覽器先從server1請求某元素，后來向server2驗證該元素，由于ETag不同，所以緩存失效，必須重新下載。

因此，如果您未用到ETags系統(tǒng)提供的靈活的驗證機(jī)制，最好刪除ETag。刪除ETag會減少httpresponse及后續(xù)請求的HTTP頭的大小。微軟支持文章描述了如何刪除ETags，而在Apache下，只要在配置文件中設(shè)置FileETagnone即可。法則14.緩存Ajax

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

法則4.壓縮頁面元素

法則9.減少DNS查詢次數(shù)

法則10.最小化腳本文件

法則11.避免重定向

法則13.配置ETags.

友情提示：本文中關(guān)于《前端網(wǎng)頁提速的具體方法》給出的范例僅供您參考拓展思維使用，前端網(wǎng)頁提速的具體方法：該篇文章建議您自主創(chuàng)作。

來源：網(wǎng)絡(luò)整理 免責(zé)聲明：本文僅限學(xué)習(xí)分享，如產(chǎn)生版權(quán)問題，請聯(lián)系我們及時刪除。

《前端網(wǎng)頁提速的具體方法》由互聯(lián)網(wǎng)用戶整理提供,轉(zhuǎn)載分享請保留原作者信息,謝謝!
鏈接地址：http://www.weilaioem.com/gongwen/713196.html

• 上一篇：實驗2-Web開發(fā)
• 下一篇：前端網(wǎng)頁設(shè)計代碼大全