在現(xiàn)代網(wǎng)絡(luò)發(fā)達(dá)的大環(huán)境下，各類(lèi)網(wǎng)站大中型網(wǎng)站橫行，網(wǎng)站性能體現(xiàn)的尤為重要，特別是能給訪問(wèn)用戶(hù)一個(gè)不同感受的體驗(yàn)，同樣的網(wǎng)絡(luò)環(huán)境，有的網(wǎng)站“嗖”地一下出來(lái)，而有的網(wǎng)站等半天才小露頭腳，如此一來(lái)，給用戶(hù)產(chǎn)生反感，網(wǎng)站打開(kāi)速度慢，那訪問(wèn)用戶(hù)幾乎不愿意多等，轉(zhuǎn)頭離開(kāi)了，這樣就大大減少了網(wǎng)頁(yè)訪問(wèn)量，嚴(yán)重影響了用戶(hù)體驗(yàn)，也不利于SEO優(yōu)化。

對(duì)于前端開(kāi)發(fā)人員而言，對(duì)于處理網(wǎng)頁(yè)加載性能也是需要做諸多事情的，那么就介紹一些如何優(yōu)化性能，且讓頁(yè)面提高加載的速度。

1、盡可能減少HTTP請(qǐng)求

減少HTTP請(qǐng)求，其中主要一點(diǎn)就是要合并一些內(nèi)容，諸如css，圖片，js，合并成一個(gè)文件當(dāng)然最好，這樣可以只進(jìn)行一次訪問(wèn)請(qǐng)求即可，同時(shí)利用瀏覽器強(qiáng)大的緩存能力，可以達(dá)到減少HTTP請(qǐng)求。

比如在實(shí)際做法中，使用css精靈圖片，字體圖標(biāo)，圖片地圖等。

具體方案為：

1、瀏覽器緩存：

對(duì)一個(gè)網(wǎng)站，一些靜態(tài)資源文件諸如CSS、javascript、logo、圖標(biāo)更新的頻率都比較低，而這些文件又幾乎是每次http請(qǐng)求還都得需要，那么，如果我們將這些文件緩存在瀏覽器中，可以極好的改善性能。通過(guò)設(shè)置http頭中的cache-control和expires的屬性，可設(shè)定瀏覽器緩存。

2、使用壓縮機(jī)制

通常我們?cè)诜��?wù)端將這些文件進(jìn)行壓縮處理，之后回到瀏覽器端進(jìn)行解壓縮，可有效減少通信傳輸?shù)臄?shù)據(jù)量。但既然使用文件壓縮，或多或少會(huì)對(duì)瀏覽器和服務(wù)端產(chǎn)生一定的壓力，所以實(shí)際中應(yīng)酌情使用。

同時(shí)遵循以下原則：

(1) 減少DNS請(qǐng)求所耗費(fèi)的時(shí)間：

且不說(shuō)對(duì)錯(cuò),因?yàn)閺幕�本�?lái)說(shuō),減少http請(qǐng)求數(shù)的確可以減少DNS請(qǐng)求和解析耗費(fèi)的時(shí)間；

(2) 減少服務(wù)器壓力：

這個(gè)通常是被考慮最多的,也是我用來(lái)講解給別人聽(tīng)的最大理由,因?yàn)槊總�(gè)http請(qǐng)求都會(huì)耗費(fèi)服務(wù)器資源,特別是一些需要計(jì)算合并等操作的服務(wù)器,耗費(fèi)服務(wù)器的cpu資源可不是開(kāi)玩笑的事情,硬盤(pán)可以用錢(qián)買(mǎi)來(lái),cpu資源可就沒(méi)那么廉價(jià)了；

(3) 減少http請(qǐng)求頭：

當(dāng)我們對(duì)服務(wù)器發(fā)起一個(gè)請(qǐng)求的時(shí)候,我們會(huì)攜帶著這個(gè)域名下的cookie和一些其他的信息在http頭部里,然后服務(wù)器響應(yīng)請(qǐng)求的時(shí)候也會(huì)帶回一些cookie之類(lèi)的頭部信息.這些信息有的時(shí)候會(huì)很大,在這種請(qǐng)求和響應(yīng)的時(shí)候會(huì)影響帶寬性能。

2、使用圖片懶加載策略

我們?yōu)g覽網(wǎng)頁(yè)，圖片往往是最引人注目的，而往往圖片很占網(wǎng)絡(luò)資源的，使用懶加載策略，可以是頁(yè)面加載時(shí)只加載首屏頁(yè)面用到的圖片即可，其他的圖片資源可以稍后再加載，這也是增加用戶(hù)體驗(yàn)的方式。

3、css放頭部，js放底部，或使用js/css外鏈

根據(jù)瀏覽器加載渲染網(wǎng)頁(yè)的機(jī)制，瀏覽器會(huì)在下載完成全部CSS之后才對(duì)整個(gè)頁(yè)面進(jìn)行渲染，因此最好的做法是將CSS放在頁(yè)面最上面，讓瀏覽器盡快下載CSS。如果將 CSS放在其他地方比如 BODY中，則瀏覽器有可能還未下載和解析到 CSS就已經(jīng)開(kāi)始渲染頁(yè)面了，這就導(dǎo)致頁(yè)面由無(wú) CSS狀態(tài)跳轉(zhuǎn)到 CSS狀態(tài)，用戶(hù)體驗(yàn)比較糟糕，所以可以考慮將CSS放在HEAD中。

對(duì)于javascript而言，如果瀏覽器立即加載javascript腳本，可能會(huì)阻塞頁(yè)面執(zhí)行，表現(xiàn)緩慢，所以此時(shí)盡量放在頁(yè)面底部（除了必要的立即執(zhí)行等的情況）。

有時(shí)候，我們合理地使用js/css外鏈加載，使用緩存，是HTML文件大大減小，也一定程度上提高加載的速度，當(dāng)然這也是據(jù)實(shí)際情況來(lái)看，比如說(shuō)根據(jù)實(shí)際用戶(hù)訪問(wèn)的情況（經(jīng)常性頻繁的瀏覽某一網(wǎng)頁(yè)等）。

3、傳輸方面，控制cookie

cookie應(yīng)盡可能地控制大小，寫(xiě)入cookie的數(shù)據(jù)應(yīng)合理控制，減少傳輸數(shù)據(jù)量及次數(shù)，也是一個(gè)優(yōu)化方案。

4、減少DOM操作

網(wǎng)頁(yè)中對(duì)DOM操作往往是代價(jià)很大的，修改和訪問(wèn)DOM元素會(huì)造成頁(yè)面的Repaint和Reflow，循環(huán)對(duì)DOM操作更是罪惡的行為。所以請(qǐng)合理的使用JavaScript變量?jī)?chǔ)存內(nèi)容，考慮大量DOM元素中循環(huán)的性能開(kāi)銷(xiāo)，在循環(huán)結(jié)束時(shí)一次性寫(xiě)入。減少對(duì)DOM元素的查詢(xún)和修改，查詢(xún)時(shí)可將其賦值給局部變量。

5、使用CDN加速

CDN的全稱(chēng)是Content Delivery Network，即內(nèi)容分發(fā)網(wǎng)絡(luò)。是一個(gè)經(jīng)策略性部署的整體系統(tǒng)，從技術(shù)上全面解決由于網(wǎng)絡(luò)帶寬小、用戶(hù)訪問(wèn)量大、網(wǎng)點(diǎn)分布不均而產(chǎn)生的用戶(hù)訪問(wèn)網(wǎng)站響應(yīng)速度慢的根本原因。其目的是通過(guò)在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶(hù)的網(wǎng)絡(luò)“邊緣”，使用戶(hù)可以就近取得所需的內(nèi)容，提高用戶(hù)訪問(wèn)網(wǎng)站的響應(yīng)速度。

6、減少DNS查找

DNS用于映射主機(jī)名和IP地址，如同電話本映射人名與電話號(hào)碼一樣，DNS解析有代價(jià)，一般一次解析需要20～120毫秒。瀏覽器在DNS查詢(xún)完成前不會(huì)下載任何東西。

為達(dá)到更高的性能，DNS解析通常被多級(jí)別地緩存。如由ISP或本地網(wǎng)絡(luò)維護(hù)的DNS緩存服務(wù)器，用戶(hù)機(jī)器操作系統(tǒng)的緩存。DNS信息會(huì)保存在操作系統(tǒng)的DNS緩存中（如windows上的 DNS Client Service）。大多數(shù)瀏覽器有自己的緩存，與操作系統(tǒng)的緩存有所不同。只要瀏覽器在自己的緩存上面保留DNS記錄，它不會(huì)向操作系統(tǒng)請(qǐng)求DNS記錄。

IE的缺省 DNS緩存時(shí)間為 30分鐘，由注冊(cè)表中的DnsCacheTimeout值指定。Firefox的缺省緩沖時(shí)間是1分鐘，由network.dnsCacheExpiration配置設(shè)定。（Fasterfox將此值改為1小時(shí)）。

當(dāng)客戶(hù)端的DNS緩存為空時(shí)（瀏覽器與操作系統(tǒng)），DNS查詢(xún)的次數(shù)等同于網(wǎng)頁(yè)中各域名的個(gè)數(shù)。包括該網(wǎng)頁(yè)URL、圖片、腳本文件、樣式表、FLASH對(duì)象等使用的域名。減少域名數(shù)量可以減少DNS查詢(xún)次數(shù)。

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

...

關(guān)于網(wǎng)頁(yè)加載性能的優(yōu)化還有很多解決方案，但實(shí)際開(kāi)發(fā)中也是根據(jù)具體情況來(lái)合理分配使用，最大限度地提高網(wǎng)頁(yè)性能，提升網(wǎng)頁(yè)加載速度，增強(qiáng)用戶(hù)體驗(yàn)性，從而加大用戶(hù)訪問(wèn)量。