一、合并網(wǎng)站資源
為什么在高并發(fā)的時候,鐵道部車票預訂網(wǎng)站會如此不給力呢?有好事者對此網(wǎng)站進行了深入分析,大致結(jié)論是,網(wǎng)站在提交訂單時向服務器發(fā)送的請求太多,加上本來瞬間訪問流量就很大,所以導致訪問請求堵塞。其實這個問題在很多網(wǎng)站上都存在,尤其是中小公司的企業(yè)網(wǎng)站。知道了問題的所在,解決起來也就得心應手了,應對的辦法就是減少想服務器頻發(fā)發(fā)送請求,而合并資源就是最為有效的一種方式。這樣雖然同一個調(diào)用文件每次加載的時間會適當延長,但是上行下載的次數(shù)減少了,提高了代碼運行效率。
一般的網(wǎng)站需要外部加載到資源大致有三種,分別是CSS樣式表、JS腳本程序以及圖片素材。而這個三個均可以進行適當合并,最大程度上降低網(wǎng)站的請求次數(shù)。CSS只要目的是控制網(wǎng)站樣式的,如果將所有的CSS合并到一個文件上,一定要將其置于<head>元標簽內(nèi),其目的是讓網(wǎng)站首先加載CSS。JS以及其它的一些腳本程序,是為了實現(xiàn)網(wǎng)頁的某些特效而編寫的,調(diào)用位置可以適當靠后,但是需要明白的是,JS不同于CSS并不是所有的JS都可以合并到一起,引用位置也很關(guān)鍵,否則可能會導致網(wǎng)站一些功能失效。圖片素材合并多見于網(wǎng)站背景,通過二維坐標調(diào)用圖片,但是需要注意即便如此,合并后的圖片大小也要控制在2M以內(nèi),否則會因加載時間過長帶來不好的用戶體驗。
二、壓縮網(wǎng)頁元素
如果網(wǎng)站資源本來就很大,通過合并可以減少時間的,但是仍舊無法從根本上解決問題。因為合并網(wǎng)站資源的主要是減少客戶端向服務器的請求次數(shù),網(wǎng)站資源大小是絲毫沒有變化的。所以對網(wǎng)頁元素進行必要壓縮,是提升網(wǎng)站訪問速度的另一個捷徑。壓縮網(wǎng)頁元素第一種方法是重寫網(wǎng)站代碼,要知道采用DIV+CSS布局網(wǎng)站程序,會比Table布局可以減少不少代碼。未來當HTML5技術(shù)普及后,網(wǎng)站代碼容積會得到進一步壓縮,避免代碼冗余是減少網(wǎng)站體積的一個絕好方法,尤其是刪除一些不必要的費碼。
現(xiàn)在很多網(wǎng)站加載速度慢,與網(wǎng)站所是用的圖片素材過大有直接關(guān)系。如沒有特殊要求,但就顯示而言網(wǎng)站圖片顯示分辨率控制在72dpi可以,即使是圖片顯示質(zhì)量稍許差些,總比半天無法加載帶給用戶的感覺要好很多。所以,如果可能請將網(wǎng)站圖片大小控制在200Kb以下,在網(wǎng)站上盡可能少用一些高分辨率高質(zhì)量的圖片素材。通過服務器開啟Gzip壓縮,也是降低網(wǎng)頁體積的一個好辦法,筆者就有親身體驗,50K左右大小的網(wǎng)頁,開啟Gzip壓縮后可以控制在10K左右。網(wǎng)頁壓縮率達到60%以上,這樣網(wǎng)站運行快速如飛就不足為奇了。
三、調(diào)整代碼位置
代碼位置也會影響到網(wǎng)站加載速度?答案是肯定的,我們舉個簡單的例子,現(xiàn)在很多網(wǎng)站都有統(tǒng)計程序。其大多通過調(diào)用外部js實現(xiàn),一般都是將統(tǒng)計程序置于網(wǎng)站底部,其目的是避免因站外JS加載速度太慢,影響到整個網(wǎng)站的用戶體驗。這就很明顯了,如果將一些體積大的腳本程序放置在網(wǎng)頁的頭部,勢必會拖慢真?zhèn)網(wǎng)站加載速度的。調(diào)整網(wǎng)站代碼位置有兩個需要堅持的原則,其一是網(wǎng)站外部調(diào)用的代碼盡可能的放置在后面加載,因為外部代碼具有不可控性;其二是,提及比較大的腳本程序放置在程序后面加載,尤其是一些JS程序,在不影響網(wǎng)站效果的情況下,請盡可能調(diào)整到其它代碼后面加載執(zhí)行。
還有一個問題雖與代碼位置無關(guān),但是也是很容易被很多程序人員忽視的,就是網(wǎng)頁的渲染問題。比如我們CSS代碼里面有個<style="border:none">和<style="border:0">,在頁面視覺表現(xiàn)形式上兩個沒有任何區(qū)別,但是對于瀏覽器解釋渲染是有區(qū)別的。<style="border:none">代表著不存在邊框,不需要進行邊框渲染,但是<style="border:0">說明有邊框,只是邊框的寬度是0而已,實際上瀏覽器在解釋代碼的時候,會進行一次也沒渲染。類似的還有網(wǎng)站圖片大小的控制,很多程序員認為如果圖片尺寸剛好與標準一致,就不需要對圖片的高度和寬度需要定義,這樣做會讓代碼足夠簡潔,其實這樣理解是錯誤的,沒有定義就意味著瀏覽器要自行識別然后渲染展現(xiàn),而這一過程是需要時間的。