用CSS/JS技巧最佳化HTML頁面載入速度

如果一個網頁中有很多小圖片，例如評論時的表情，投票時的“星級”，這些小圖片確實很小，但是每張小圖片顯示一次都要往返一次HTTP伺服器，每次往返都需要發送請求、接受請求。如果圖片小而且多，會嚴重影響頁面呈現的速度。如果我們把這些小的圖片合成一個大的圖片，那麼瀏覽器只要發送一次請求，就可以把所有這些“小圖片”下載到本地。然後使用CSS顯示這些小圖片。下面看代碼：
原始圖片：

顯示小紅旗代碼：
<div style="width:16px;height:16px;background-image: url(http://img.baidu.com/img/iknow/icons.gif);background-position:0 -32px;"></div>
效果：

顯示星星的代碼：
<div style="width:16px;height:16px;background-image: url(http://img.baidu.com/img/iknow/icons.gif);background-position:0 -112px;"></div>
效果：

因為每個小圖片的長寬分別是16px，所以顯示第一個圖片座標就是0 0，第二個圖片的座標是：0 -16px，第三個圖片的座標是0 -32px，以此類推……

 

從JS角度最佳化頁面載入速度，主要是從JS會緩衝到瀏覽器，所以我們把頁面公用部分做成JS檔案調用。然後每個頁面再調用這個JS，這裡還有另一個主要因素：如果您的頻寬有限，比如流量達到了15萬，而你使用的是100M共用頻寬。這時頻寬已經跑滿了，你需要想辦法給網頁減肥，讓頁面更小，這樣就可以減少頻寬佔用，緩解頻寬的危機。