提升頁面加載速度的方法有以下幾個方面:
(一)減小HTTP強求
(1)增長並行鏈接
(2)合併資源文件:將多個小的css還有javascript文件進行合併成一個大文件,這樣頁面在加載頁面的相關資源的時候,就會減小HTTP的請求,從而加快頁面的加載速度
(3)使用CSS sprite:將整個網站上全部共用的小圖片都合成一張圖片,而後使用background-position進行控制所須要的圖片位置.原理是雖然每次只是使用了一張小圖片,可是整個圖片都已經被保存到了緩存中,這樣每次使用就不須要再去請求圖片javascript
sprite圖片製做的網站有:http://www.spritecow.com 和http://www.spritebox.net
(二)使用CDN加速
只要有人訪問你的網站,它就會從最近的一個節點取數據給他,可是這些節點所緩存的文件是不易改動的,因此最好在CDN上存放靜態的文件,好比圖片,字體,javascript文件,
(三)避免空的src和href屬性值
好比在頁面加載的過程當中,有一個空的src屬性的img元素被javascript動態地賦值,這樣作的問題是在腳本執行以前,元素就被瀏覽器渲染了因此瀏覽器仍然會發起一個HTTP請求,雖然是一個空值,一樣的空的href也會向服務器發送一個HTTP請求,這雖然不影響加載時間,可是會對服務器產生沒必要要的流量和壓力,嚴重的以致於影響整個網站的用戶體驗,有一個簡單的解決辦法以下:
<a href="javascript:;" class="name"></a>
還能夠按照以下方式解決:
<a href="#description" id="name"></a>
<script>
$('#name').click(function(e){
e.preventDefault();
})
</script>
這樣作的好處是用戶在單擊以前獲得一些提示,並且單擊以後也不會產生沒必要要的HTTP請求.
除此以外,空的src和href也是會產生報錯的,若是在發送空屬性值的時候,追蹤請求頭的狀態(用Cookie或者其餘方法),是沒法追蹤到狀態的
(四)啓用GZIP壓縮
HTTP協議中有一個屬性:Accept-Encoding,當顯示爲以下的時候表示這個請求的內容是被壓縮過的:
Accept-Encoding:gzip,deflate
(五)把css放在頭部,javascript放在尾部
(六)避免使用css表達式
(七)移除不使用的css語句css
https://developer.yahoo.com/performance/rules.html
html