一般而言,關(guān)于網(wǎng)站的加速,大部分人認(rèn)為是后端開發(fā)者和系統(tǒng)管理的職責(zé)。這種觀點(diǎn)不完全正確,因?yàn)橐粋€(gè)高性能的網(wǎng)站,不僅取決于網(wǎng)站的后端,還依賴網(wǎng)站的前端,也就是說(shuō)還依賴于美工和前端開發(fā)人員。
事實(shí)上,就目前的網(wǎng)絡(luò)環(huán)境來(lái)看,我們?cè)跒g覽正常的網(wǎng)站時(shí),通??偤馁M(fèi)時(shí)間的10-20%用在了后端,剩下80-90%的時(shí)間被前端所消耗。所以,如果你計(jì)劃提升網(wǎng)站的速度,不妨在優(yōu)化后端的同時(shí),讓美工和前端開發(fā)人員考慮以下幾個(gè)方面。相信你可能會(huì)感嘆,不大動(dòng)刀戈也可以有效地提升網(wǎng)站的性能。
1.盡可能減少HTTP請(qǐng)求的次數(shù)。例如:用一張圖片代替多張圖片,再用CSS顯示。
2.采用CDN對(duì)網(wǎng)站加速。CDN可以在不改動(dòng)原有網(wǎng)站架構(gòu)的前提下,很大幅度地提升網(wǎng)站的訪問(wèn)速度。特別是對(duì)于那些擁有全國(guó)用戶的網(wǎng)站,效果會(huì)更加明顯。
3.CSS文件放在頁(yè)面頭部。瀏覽器在顯示頁(yè)面之前,必須要得到CSS。否則無(wú)法顯示網(wǎng)頁(yè)。所以,將CSS文件放在頁(yè)面頭部是明智之舉。伯樂(lè)在線的開發(fā)團(tuán)隊(duì)曾經(jīng)做過(guò)測(cè)試,如果一張網(wǎng)頁(yè)包括多個(gè)JS文件,同時(shí)CSS文件放在網(wǎng)頁(yè)最后。用戶瀏覽網(wǎng)頁(yè)時(shí),非常明顯地感覺(jué)到網(wǎng)頁(yè)先是空白,然后再顯示出來(lái)。顯然,這種情況下,用戶體驗(yàn)是非常差的。與此相反,如果將CSS文件放在頁(yè)面頭部,用戶瀏覽網(wǎng)頁(yè)時(shí),可以先看到網(wǎng)頁(yè)。
4.JS文件放在頁(yè)面尾部。道理和CSS文件放在頁(yè)面頭部一樣。
5.將CSS和JS代碼多帶帶存放在獨(dú)立于網(wǎng)頁(yè)的文件中?,F(xiàn)在很多的瀏覽器,如Firefox,IE7,8等等都會(huì)將圖片,CSS,JS等外部的文件緩存在用戶本地,所以,用戶通過(guò)這些瀏覽器瀏覽網(wǎng)頁(yè)時(shí)只傳輸網(wǎng)頁(yè)的文本內(nèi)容,不再次下載圖片,CSS,JS等外部的文件。這樣一來(lái),訪問(wèn)的速度自然可以提升不少。另外,將CSS和JS代碼多帶帶存放在獨(dú)立于網(wǎng)頁(yè)的文件,也便于管理。
6.對(duì)JS“瘦身”。用第三方的工具對(duì)JS進(jìn)行壓縮,包括刪除注釋,空格等等,通常情況下可以減小20%左右。例如,未“瘦身”前JS為100KB,“瘦身”后80KB.