加載速度再提升：讓網(wǎng)站建設(shè)程序編寫精益于細(xì)節(jié)
您當(dāng)前位置：首頁(yè) > 紅訊頻道 > 站長(zhǎng)經(jīng)驗(yàn)
紅軟基地 推薦
2012-01-12
這個(gè)冬天，給人印象最深的莫過(guò)于兩個(gè)網(wǎng)站，一個(gè)是12306火車票購(gòu)買網(wǎng)站，一個(gè)是小米手機(jī)的官方網(wǎng)站。兩個(gè)網(wǎng)站有個(gè)共同特征，就是并發(fā)訪問(wèn)高峰期速度慢的讓人難以忍耐。其實(shí)何止這兩個(gè)網(wǎng)站，在數(shù)以萬(wàn)計(jì)的并發(fā)訪問(wèn)面前，至少會(huì)有90%以上網(wǎng)站會(huì)掛掉。哪怕是平時(shí)訪問(wèn)人數(shù)不多的時(shí)候，很多網(wǎng)站打開速度已經(jīng)讓人不堪忍受。影響網(wǎng)站加載速度的原因很多，比如服務(wù)器的配置、機(jī)房的帶寬質(zhì)量以及互聯(lián)線路等等，但是筆者感覺(jué)，網(wǎng)站程序編寫以及資源整合也極大的影響著網(wǎng)站運(yùn)行速度，只是很多人對(duì)比并沒(méi)有給予足夠的重視。
一、合并網(wǎng)站資源
為什么在高并發(fā)的時(shí)候，鐵道部車票預(yù)訂網(wǎng)站會(huì)如此不給力呢?有好事者對(duì)此網(wǎng)站進(jìn)行了深入分析，大致結(jié)論是，網(wǎng)站在提交訂單時(shí)向服務(wù)器發(fā)送的請(qǐng)求太多，加上本來(lái)瞬間訪問(wèn)流量就很大，所以導(dǎo)致訪問(wèn)請(qǐng)求堵塞。其實(shí)這個(gè)問(wèn)題在很多網(wǎng)站上都存在，尤其是中小公司的企業(yè)網(wǎng)站。知道了問(wèn)題的所在，解決起來(lái)也就得心應(yīng)手了，應(yīng)對(duì)的辦法就是減少想服務(wù)器頻發(fā)發(fā)送請(qǐng)求，而合并資源就是最為有效的一種方式。這樣雖然同一個(gè)調(diào)用文件每次加載的時(shí)間會(huì)適當(dāng)延長(zhǎng)，但是上行下載的次數(shù)減少了，提高了代碼運(yùn)行效率。
一般的網(wǎng)站需要外部加載到資源大致有三種，分別是CSS樣式表、JS腳本程序以及圖片素材。而這個(gè)三個(gè)均可以進(jìn)行適當(dāng)合并，最大程度上降低網(wǎng)站的請(qǐng)求次數(shù)。CSS只要目的是控制網(wǎng)站樣式的，如果將所有的CSS合并到一個(gè)文件上，一定要將其置于元標(biāo)簽內(nèi)，其目的是讓網(wǎng)站首先加載CSS。JS以及其它的一些腳本程序，是為了實(shí)現(xiàn)網(wǎng)頁(yè)的某些特效而編寫的，調(diào)用位置可以適當(dāng)靠后，但是需要明白的是，JS不同于CSS并不是所有的JS都可以合并到一起，引用位置也很關(guān)鍵，否則可能會(huì)導(dǎo)致網(wǎng)站一些功能失效。圖片素材合并多見于網(wǎng)站背景，通過(guò)二維坐標(biāo)調(diào)用圖片，但是需要注意即便如此，合并后的圖片大小也要控制在2M以內(nèi)，否則會(huì)因加載時(shí)間過(guò)長(zhǎng)帶來(lái)不好的用戶體驗(yàn)。
二、壓縮網(wǎng)頁(yè)元素
如果網(wǎng)站資源本來(lái)就很大，通過(guò)合并可以減少時(shí)間的，但是仍舊無(wú)法從根本上解決問(wèn)題。因?yàn)楹喜⒕W(wǎng)站資源的主要是減少客戶端向服務(wù)器的請(qǐng)求次數(shù)，網(wǎng)站資源大小是絲毫沒(méi)有變化的。所以對(duì)網(wǎng)頁(yè)元素進(jìn)行必要壓縮，是提升網(wǎng)站訪問(wèn)速度的另一個(gè)捷徑。壓縮網(wǎng)頁(yè)元素第一種方法是重寫網(wǎng)站代碼，要知道采用DIV+CSS布局網(wǎng)站程序，會(huì)比Table布局可以減少不少代碼。未來(lái)當(dāng)HTML5技術(shù)普及后，網(wǎng)站代碼容積會(huì)得到進(jìn)一步壓縮，避免代碼冗余是減少網(wǎng)站體積的一個(gè)絕好方法，尤其是刪除一些不必要的費(fèi)碼。
現(xiàn)在很多網(wǎng)站加載速度慢，與網(wǎng)站所是用的圖片素材過(guò)大有直接關(guān)系。如沒(méi)有特殊要求，但就顯示而言網(wǎng)站圖片顯示分辨率控制在72dpi可以，即使是圖片顯示質(zhì)量稍許差些，總比半天無(wú)法加載帶給用戶的感覺(jué)要好很多。所以，如果可能請(qǐng)將網(wǎng)站圖片大小控制在200Kb以下，在網(wǎng)站上盡可能少用一些高分辨率高質(zhì)量的圖片素材。通過(guò)服務(wù)器開啟Gzip壓縮，也是降低網(wǎng)頁(yè)體積的一個(gè)好辦法，筆者就有親身體驗(yàn)，50K左右大小的網(wǎng)頁(yè)，開啟Gzip壓縮后可以控制在10K左右。網(wǎng)頁(yè)壓縮率達(dá)到60%以上，這樣網(wǎng)站運(yùn)行快速如飛就不足為奇了。
三、調(diào)整代碼位置
代碼位置也會(huì)影響到網(wǎng)站加載速度?答案是肯定的，我們舉個(gè)簡(jiǎn)單的例子，現(xiàn)在很多網(wǎng)站都有統(tǒng)計(jì)程序。其大多通過(guò)調(diào)用外部js實(shí)現(xiàn)，一般都是將統(tǒng)計(jì)程序置于網(wǎng)站底部，其目的是避免因站外JS加載速度太慢，影響到整個(gè)網(wǎng)站的用戶體驗(yàn)。這就很明顯了，如果將一些體積大的腳本程序放置在網(wǎng)頁(yè)的頭部，勢(shì)必會(huì)拖慢真?zhèn)�網(wǎng)站加載速度的。調(diào)整網(wǎng)站代碼位置有兩個(gè)需要堅(jiān)持的原則，其一是網(wǎng)站外部調(diào)用的代碼盡可能的放置在后面加載，因?yàn)橥獠看a具有不可控性;其二是，提及比較大的腳本程序放置在程序后面加載，尤其是一些JS程序，在不影響網(wǎng)站效果的情況下，請(qǐng)盡可能調(diào)整到其它代碼后面加載執(zhí)行。
還有一個(gè)問(wèn)題雖與代碼位置無(wú)關(guān)，但是也是很容易被很多程序人員忽視的，就是網(wǎng)頁(yè)的渲染問(wèn)題。比如我們CSS代碼里面有個(gè)
作為專業(yè)的網(wǎng)站建設(shè)與網(wǎng)絡(luò)營(yíng)銷機(jī)構(gòu)，引航科技(http://www.joyweb.net.cn)一直認(rèn)為，網(wǎng)站的用戶體驗(yàn)和營(yíng)銷效果與網(wǎng)站速度息息相關(guān)，尤其是在人心浮躁的現(xiàn)在。所以在網(wǎng)絡(luò)營(yíng)銷日益普及的今天，大多數(shù)人更注重網(wǎng)站給用戶感覺(jué)。有一個(gè)不容忽視的事實(shí)是，現(xiàn)在無(wú)論中國(guó)電信還是中國(guó)聯(lián)通以及其他寬帶運(yùn)營(yíng)商，都將帶快速率提上日程。這就意味著普通網(wǎng)民的網(wǎng)速會(huì)越來(lái)越快，網(wǎng)站速度快或者慢對(duì)網(wǎng)絡(luò)營(yíng)銷效果的影響必將越來(lái)越明顯。有些時(shí)候，哪怕是別人的網(wǎng)站先于半秒鐘打開，也許就會(huì)讓自己?jiǎn)适б淮螤I(yíng)銷的機(jī)會(huì)。所以，如果有可能請(qǐng)想方設(shè)法的提升網(wǎng)站加載速度，哪怕是100毫秒甚至更短的瞬間。
來(lái)源：上海網(wǎng)站建設(shè) 作者：岳志軒