網(wǎng)站建設(shè)前端和后臺性能優(yōu)化方法

1、減少HTTP請求數(shù)量 (Minimize HTTP Requests)

80%的用戶響應(yīng)時間被花費(fèi)在前端，而這其中的絕大多數(shù)時間是用于下載頁面中的圖片、樣式表、腳本以及Flash這些組件。減少這些組件的數(shù)量就可以減少展示頁面所需的請求數(shù)，而這是提高網(wǎng)頁響應(yīng)速度的關(guān)鍵。在提供豐富的頁面展現(xiàn)的同時，減少Http請求數(shù)量：合并文件，通過把所有腳本置于一個腳本文件里或者把所有樣式表放于一個樣式表文件中，從而減少Http請求的數(shù)量。當(dāng)不同頁面需要應(yīng)用不同的腳本或樣式時，合并這些文件會是一個很大的挑戰(zhàn)，不過在發(fā)布網(wǎng)站時進(jìn)行這種合并，將是提高網(wǎng)站響應(yīng)速度的重要一步。

CSS Sprites是減少圖片請求的首選方案。把所有的背景圖片合并到一張圖中，使用CSS的background-image 和background-position 屬性去控制展現(xiàn)恰當(dāng)?shù)膱D片區(qū)域。Image maps把多張圖片組合成為一張圖片。圖片的總大小是不變的，但減少Http請求數(shù)會提高頁面的響應(yīng)速度。Image maps只能用于圖片在網(wǎng)頁中相鄰的情況，比如導(dǎo)航條。制定image maps中的圖片坐標(biāo)是個很麻煩的過程，而且容易出錯。同時給導(dǎo)航使用image maps也并不易讀，所以并不推薦使用。

減少頁面的Http請求數(shù)量是第一步，而且對于提高用戶初次訪問體驗是最重要的一步。

2、 給頭部添加一個失效期或者Cache-Control (Add an Expires or a Cache-Control Header

這條法則包含兩方面：

    * 對于靜態(tài)組件：把頭部的緩存期設(shè)為某個遙遠(yuǎn)的未來，使其能夠“永不過期”。

    * 對于動態(tài)組件：使用適當(dāng)?shù)腃ache-Control頭部幫助瀏覽器執(zhí)行特定的請求。

網(wǎng)頁設(shè)計越來越豐富，頁面里包含了越來越多的腳本、樣式表、圖片和Flash。頁面的初次訪問者也許會發(fā)送多個HTTP請求，但通過給頭部添加失效期，你可以使那些組件被緩存。這會避免下次瀏覽頁面時的不必要的HTTP請求。給圖片文件的頭部設(shè)置失效時間更為常用，但包括腳本文件、樣式表和 Flash之類的所有組件的頭部都應(yīng)該被設(shè)置失效時間。

3、把腳本放在最后(Put Scripts at the Bottom)

腳本可能會堵塞并發(fā)的下載。HTTP/1.1規(guī)范建議瀏覽器在每個域名下只進(jìn)行兩個并發(fā)下載。如果你把圖片放在多個域名下，可以實現(xiàn)多于兩個的并發(fā)下載。當(dāng)腳本被下載時，即使使用不同的域名。瀏覽器也不會進(jìn)行任何其它的下載。

有些情況下把腳本放到底部并不太容易。比如，腳本使用了document.write 來添加部分頁面中的內(nèi)容，就不能放到頁面中更后面的位置。還可能有作用域的問題。很多情況下，還有一些變通的方法。

通常的建議是使用延遲腳本。DEFER屬性表明腳本不包含document.write，而且提示瀏覽器繼續(xù)展現(xiàn)。不幸的是，F(xiàn)irefox不支持DEFER屬性。IE中，腳本可以被延遲，但并不如你期望的那么久。如果一個腳本可以被延遲，那么它也可以被放在頁面的底部。這會讓你的頁面加載的更快。

4 、Gzip壓縮組件(Gzip Components)

前臺工程師的決策能夠顯著的減少在網(wǎng)絡(luò)上傳輸 HTTP請求和響應(yīng)花費(fèi)的時間。確實，終端用戶的帶寬速度、Internet服務(wù)提供商和連接交換機(jī)的服務(wù)器這些因素都是開發(fā)小組所不能控制的。但還有一些其它因素會影響響應(yīng)的時間，比如壓縮文件，就會減少HTTP響應(yīng)的大小從而減少響應(yīng)的時間。從HTTP/1.1開始，Web客戶端就被設(shè)定為支持HTTP請求的頭部中

瀏覽器和代理會有一些已知的問題，可能導(dǎo)致瀏覽器的預(yù)期內(nèi)容和獲得的實際壓縮內(nèi)容不匹配。幸運(yùn)的是，這種情況隨著舊瀏覽器的使用者減少而減少。 Apache的模塊可以通過自動添加適當(dāng)?shù)淖兓憫?yīng)文件頭來解決這些問題。

服務(wù)器會根據(jù)文件類型選擇gzip壓縮的內(nèi)容，但一般情況下，服務(wù)器選擇壓縮的內(nèi)容會過于局限。大部分網(wǎng)站會壓縮它們的Html文檔，而壓縮腳本和樣式表也是值得一做的，但很多網(wǎng)站并沒有這樣做，事實上，壓縮在包括 XML和JSON在內(nèi)的任何文本響應(yīng)都是值得的。

5、使用內(nèi)容分布式網(wǎng)絡(luò) (Use a Content Delivery Network)

用戶連接你的網(wǎng)站服務(wù)器的速度影響響應(yīng)的快慢。把你的網(wǎng)站布置在多臺分布于不同地域的服務(wù)器上，會讓用戶覺得你的頁面加載速度更快。

用戶80-90%的訪問時間被花費(fèi)在下載頁面中的圖片、樣式表、腳本、Flash這些組件上。這是網(wǎng)站展示的黃金法則。那么與其重新設(shè)計網(wǎng)站的結(jié)構(gòu)，不如先實現(xiàn)這些靜態(tài)組件的分布。這不僅僅可以大幅減少響應(yīng)時間，而且由于內(nèi)容分布式網(wǎng)絡(luò)（content delivery networks）的存在，這將是個很簡單的工作。

內(nèi)容分布式網(wǎng)絡(luò)（CDN）是一系列分布在不同地域的服務(wù)器的集合，能夠更有效的給用戶發(fā)送信息。它會根據(jù)一種衡量網(wǎng)域距離的方法，選取為某個用戶發(fā)送數(shù)據(jù)的服務(wù)器。比如，到達(dá)用戶最少跳或者最快相應(yīng)速度的服務(wù)器會被選中。

6、把樣式表放在前面(Put Stylesheets at the Top)

關(guān)心網(wǎng)站設(shè)計的前臺工程師通常希望頁面能夠逐步加載；即，我們希望瀏覽器能夠把已經(jīng)獲得的內(nèi)容盡快展現(xiàn)。這對于內(nèi)容很多的頁面以及網(wǎng)絡(luò)連接較慢的用戶尤為重要。給予用戶視覺上的反饋（比如進(jìn)度提示）的重要性，已經(jīng)經(jīng)過了很詳盡的論證。而對于我們來說，Html 頁面本身就可以作為進(jìn)度提示！當(dāng)瀏覽器逐步加載頁面時，頭部、導(dǎo)航條、頂部的logo等等這些都可以作為對正在等待頁面的用戶的可視的反饋。而這會從整體上提高用戶體驗。

把樣式表放在文檔的最后，會導(dǎo)致包括IE在內(nèi)的大部分瀏覽器不進(jìn)行逐步呈現(xiàn)。瀏覽器為了避免當(dāng)樣式改變時重繪元素而中止呈現(xiàn)。用戶會十分無聊的看到一個空白的頁面。

-------北京網(wǎng)站建設(shè)------