在網(wǎng)站建設(shè)和seo優(yōu)化中提高網(wǎng)站的訪問(wèn)速度是一個(gè)站點(diǎn)的首先要考慮的問(wèn)題。高性能網(wǎng)站建設(shè)的大致方向就是從緩存、壓縮、減少請(qǐng)求等方面進(jìn)行處理，雅虎的工程師們就總結(jié)出“網(wǎng)站性能黃金法則”：“只有10%~20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上，其余的80%~90%時(shí)間花在了下載頁(yè)面中的所有組件上”。下面十堰網(wǎng)站建設(shè)專家通過(guò)十四個(gè)方面來(lái)聊聊高性能網(wǎng)站建設(shè)的一些經(jīng)驗(yàn)。

一、減少HTTP請(qǐng)求，圖片地圖、CSS Sprites、內(nèi)聯(lián)圖片和腳本、腳本和樣式表的合并。

圖片地圖，Css Sprite，內(nèi)聯(lián)圖片和腳本，樣式表的合并。運(yùn)用這些技術(shù)，估計(jì)頁(yè)面響應(yīng)時(shí)間會(huì)減少到50%左右。

圖片地圖在淘寶中很是蠻常見的，就是用一個(gè)圖來(lái)掛N個(gè)連接地址，通過(guò)分析點(diǎn)擊圖片的坐標(biāo)和位置來(lái)產(chǎn)生連接，這樣，會(huì)減少服務(wù)器的連接。

圖片地圖有很多難點(diǎn)，不太容易控制，但是，如果你正在導(dǎo)航欄或者其他超鏈接中使用多個(gè)圖片，將他們轉(zhuǎn)換為圖片地圖是加速頁(yè)面的最簡(jiǎn)單的方式。

Css Srprites是利用css來(lái)控制的，主要是控制背景圖片的坐標(biāo)來(lái)控制圖片的顯示，可以將毫無(wú)關(guān)聯(lián)的圖片集成到一張圖片中。當(dāng)然，合成圖片有很大的難度，需要專業(yè)人員做，還有，制作成本可能較高。但是可以考慮在那些不經(jīng)常變動(dòng)的地方使用它，例如，如果需要在頁(yè)面中為背景，按鈕，導(dǎo)航欄，連接等提供大量圖片，css sprites絕對(duì)是一種優(yōu)秀的解決方案，干凈的標(biāo)簽，很少的圖片和很短的相應(yīng)時(shí)間。

在站點(diǎn)發(fā)布時(shí)，將多個(gè)js文件，和多個(gè)css文件合并成單個(gè)或者盡可能的合并，是有好處的。

二、使用CDN（內(nèi)容發(fā)布網(wǎng)絡(luò)）。

一組分布在多個(gè)不同地理位置的web服務(wù)器，用于更有效的向用戶發(fā)布內(nèi)容。除了縮短響應(yīng)時(shí)間之外，cdn還可以帶來(lái)其他優(yōu)勢(shì)。他們的服務(wù)包括備份，擴(kuò)展存儲(chǔ)能力和進(jìn)行緩存。CDN還有助于緩和web流量峰值壓力。

三、添加Expires頭，修訂文件名，比如為經(jīng)常需要改變的文件添加版本號(hào)等。

長(zhǎng)久的Exxpires頭最常用于圖片，但應(yīng)該將其用在所有組件上，包括腳本，樣式表和flash。很多頂級(jí)網(wǎng)站現(xiàn)在還沒做到這一點(diǎn)。

web服務(wù)器使用Expires頭來(lái)告訴web客戶端它可以使用一個(gè)組件的當(dāng)前副本，知道指定的時(shí)間位置。

對(duì)于Expires頭來(lái)說(shuō)，它使用了一個(gè)特定的時(shí)間，它要求服務(wù)器和客戶端的時(shí)鐘嚴(yán)格同步。

換種方式，Cache-Control使用max-age指令指定組件被緩存多久。

跨瀏覽器改善緩存的最佳解決方案就是使用ExpiresDefault設(shè)置的Expires頭。

解決獲取最新版本的文檔的最有效方式是：修改其所有連接，這樣，全心的請(qǐng)求將從原始服務(wù)器下載最新的內(nèi)容。

四、壓縮組件，即減少HTTP相應(yīng)的大小來(lái)減小響應(yīng)時(shí)間。

web客戶端可以通過(guò)HTTP請(qǐng)求中的Accept-Encoding頭來(lái)標(biāo)識(shí)對(duì)壓縮的支持。

web服務(wù)器通過(guò)響應(yīng)中的Content-Encoding頭來(lái)通知Web客戶端。

gzip是最流行和最有效的壓縮方式。在使用壓縮組件時(shí)，比較常見的壓縮有：HTML文檔壓縮，腳本和樣式表壓縮。

五、將樣式表放在頂部，減少“白屏（Blank White Screen）”現(xiàn)象，盡量使用LINK標(biāo)簽將樣式表放在文檔HEAD中。

將樣式表放在文檔底部會(huì)導(dǎo)致在瀏覽器中組織內(nèi)容逐步呈現(xiàn)。為避免當(dāng)樣式變化時(shí)重繪頁(yè)面中的元素，瀏覽器會(huì)阻塞內(nèi)容逐步呈現(xiàn)。

這個(gè)規(guī)則對(duì)于加載頁(yè)面所需要的時(shí)間沒有太多影響，它影響更多的是瀏覽器對(duì)這些組件順序的反映。

在IE中，將樣式表放在文檔底部會(huì)導(dǎo)致擺平問(wèn)題。

如果樣式表仍在加載，構(gòu)建呈現(xiàn)樹就是一種浪費(fèi)，因?yàn)樵谒袠邮奖砑虞d并解析完畢之前，無(wú)需繪制任何東西，否則，在其準(zhǔn)備好之前顯示內(nèi)容會(huì)遇到FOUC（無(wú)樣式內(nèi)容的閃爍）問(wèn)題。

六、將腳本放在底部，并行下載，腳本阻塞。

HTTP1.1規(guī)范建議瀏覽器從每個(gè)主機(jī)名并行的下載兩個(gè)組件。

如果將腳本放在頁(yè)面頂部，正如通常的情況那樣，頁(yè)面中的所有東西都位于腳本之后，整個(gè)頁(yè)面的呈現(xiàn)和下載都會(huì)被阻塞，知道腳本加載完畢。放置腳本的最好地方就是頁(yè)面的底部，這不會(huì)阻止頁(yè)面內(nèi)容的呈現(xiàn)，而且頁(yè)面中的可視組件可以今早下載。

七、避免CSS表達(dá)式，使用“一次性表達(dá)式”，事件處理器。

css表達(dá)式是動(dòng)態(tài)設(shè)置css屬性的一種強(qiáng)大而且又危險(xiǎn)的方式。

ie中不支持min-width。

有些規(guī)則用于處理頁(yè)面加載之后的性能問(wèn)題，這通常是由CSS表達(dá)式引起的問(wèn)題。然而，有些時(shí)候，css表達(dá)式也會(huì)影響頁(yè)面的加載時(shí)間。

八、使用外部JavaScript和CSS，純粹而言，內(nèi)聯(lián)比外聯(lián)快。加載后下載。

對(duì)于內(nèi)聯(lián)和外聯(lián)來(lái)說(shuō)，內(nèi)聯(lián)相對(duì)是快點(diǎn)的。但是盡管結(jié)果如此，現(xiàn)實(shí)中還是推薦使用外部文件會(huì)產(chǎn)生較快的頁(yè)面。

如果js和css是外部文件，瀏覽器就能緩存他們，HTML文檔的大小減小，而且不會(huì)增加http請(qǐng)求的數(shù)量。