1. 程式人生 > >減少頁面加載時間(感知或實際加載時間)的方法。

減少頁面加載時間(感知或實際加載時間)的方法。

dsm 完全 圖片合成 空格 數量 pos 允許 較高的 trac

  • 1. 盡量減少頁面中重復的HTTP請求數量
    比較直接的理解就是要減少調用其他頁面、文件的數量。我們在使用css格式控制的時候,經常會采用background載入很多圖形文件,而每個background的圖像都會產生1次HTTP請求,一般我們為了讓頁面生動活潑會大量使用background來加載背景圖,要改善這個狀況,可以采用css的1個有用的background-position屬 性來加載背景圖,我們將需要頻繁加載的多個圖片合成為1個單獨的圖片,需要加載時可以采用:background:url(....) no-repeat x-offset y-offset;的形式加載即可將這部分圖片加載的HTTP請求縮減為1個。
    2. 服務器開啟gzip壓縮

    即將需要傳輸的內容壓縮後傳輸到客戶端再解壓,這樣在網絡上傳輸的 數據量就會大幅減小。通常在服務器上的Apache、Nginx可以直接開啟這個設置,也可以從代碼角度直接設置傳輸文件頭,增加gzip的設置,也可以從 負載均衡設備直接設置。不過需要留意的是,這個設置會略微增加服務器的負擔。建議服務器性能不是很好的網站,要慎重考慮。
    3. css樣式的定義放置在文件頭部
    4. Javascript腳本放在文件末尾

    我們都知道網頁文件的載人是從上到下的加載的,而有很多Javascript腳本執行效率比較低下,或者在網頁前面都不需要執行的,如果將這些腳本放置到頁面比較靠前的位置,很可能會導致網站內容載入速度下降甚至無**常加載,所以一般將這些腳本放置在網頁文件末尾,一定要放 置在前面的腳本要改用所謂的“後載入”方式加載,在主體網頁加載完成後再加載,防止其影響到主體網頁的加載速度。
    5. 壓縮Javascript、CSS代碼

    一般js、css文件中存在大量的空格、換行、註釋,這些利於閱讀,如果能夠壓縮掉,將會很有利於網絡傳輸。這方面的工具也有很多,可以在百度裏搜索一下關鍵字“css代碼壓縮”,或者“js代碼壓縮”將會發現有很多網站都提供這樣的功能,當然了你也可以自己寫程序來做這個工作,如果你會的話。就拿我們這個網站來說吧。剛開始上傳這個網站的時候,我的很多Css代碼都沒有壓縮,後面發現了這個問題,我就上網找了相關的網站的壓縮代碼的功能,最後就把很多CSS文件都壓縮了。這個壓縮比率還是比較高的,一般都有50%左右。由此可見,這個代碼壓縮對於網頁的加載還是很有用的。
    6. Ajax采用緩存調用
    Ajax調用都采用緩存調用方式,一般采用附加特征參數方式實現,註意其中的<script src=”xxx.js?{VERHASH}”,{VERHASH}就是特征參數,這個參數不變化就使用緩存文件,如果發生變化則重新下載新文件或更新信息。
    7. 盡可能減少DCOM元素

    這個很好理解,就是盡可能減少網頁中各種<>元素數量,例如<table>的冗余很嚴重,而我們完全可以用<div>取代之。
    8. 使用多域名負載網頁內的多個文件、圖片
  • 9. 使用CDN
  • 10. 在服務器端配置control-cache last-modify-date
  • 11.在服務器配置Entity-Tag if-none-match

減少頁面加載時間(感知或實際加載時間)的方法。