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

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

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

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

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

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

這條法則包含兩方面：

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

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

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

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

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

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

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

4 、Gzip壓縮組件(Gzip Components)

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

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

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

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

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

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

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

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

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

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

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