減低頁面加載時間的方法。

   很多實驗研究表明,用戶最滿意的打開網頁時間,是在2秒以下,這種感覺就是我們一點擊一個鏈接,網頁一瞬間就展現出來了。而用戶能夠忍受的最長等待時間大約在 68秒之間。8秒是一個臨界值,如果網頁加載時間在8秒以上,很有可能大部分訪問者最終都會離開該頁面。除非他一定要打開那個頁面

1. 儘量減少頁面中重複的HTTP請求數量
比較直接的理解就是要減少調用其他頁面、文件的數量。我們在使用css格式控制的時候,經常會採用background載入很多圖形文件,而每個 background的圖像都會產生1HTTP請求,一般我們爲了讓頁面生動活潑會大量使用background來加載背景圖,要改善這個狀況,可以採css1個有用的background-position性來加載背景圖,我們將需要頻繁加載的多個圖片合成爲1個單獨的圖片,需要加載時可以採用:background:url(....)no-repeat x-offset y-offset;的形式加載即可將這部分圖片加載的HTTP請求縮減爲1個。
2.
服務器開啓gzip壓縮
即將需要傳輸的內容壓縮後傳輸到客戶端再解壓,這樣在網絡上傳輸的數據量就會大幅減小。通常在服務器上的ApacheNginx可以直接開啓這個設置,也可以從代碼角度直接設置傳輸文件頭,增加gzip的設置,也可以負載均衡設備直接設置。不過需要留意的是,這個設置會略微增加服務器的負擔。建議服務器性能不是很好的網站,要慎重考慮。
3. css
樣式的定義放置在文件頭部
4. Javascript
腳本放在文件末尾
我們都知道網頁文件的載人是從上到下的加載的,而有很多Javascript腳本執行效率比較低下,或者在網頁前面都不需要執行的,如果將這些腳本放置到頁面比較靠前的位置,很可能會導致網站內容載入速度下降甚至無**常加載,所以一般將這些腳本放置在網頁文件末尾,一定要放置在前面的腳本要改用所謂的後載入方式加載,在主體網頁加載完成後再加載,防止其影響到主體網頁的加載速度。
5.
壓縮JavascriptCSS代碼
一般jscss文件中存在大量的空格、換行、註釋,這些利於閱讀,如果能夠壓縮掉,將會很有利於網絡傳輸。這方面的工具也有很多,可以在百度裏搜索一下關鍵字“css代碼壓縮,或者“js代碼壓縮將會發現有很多網站都提供這樣的功能,當然了你也可以自己寫程序來做這個工作,如果你會的話。就拿我們這個網站來說吧。剛開始上傳這個網站的時候,我的很多Css代碼都沒有壓縮,後面發現了這個問題,我就上網找了相關的網站的壓縮代碼的功能,最後就把很多 CSS文件都壓縮了。這個壓縮比率還是比較高的,一般都有50%左右。由此可見,這個代碼壓縮對於網頁的加載還是很有用的。
6. Ajax
採用緩存調用
Ajax
調用都採用緩存調用方式,一般採用附加特徵參數方式實現,注意其中的<scriptsrc=”xxx.js?{VERHASH}”{VERHASH}就是特徵參數,這個參數不變化就使用緩存文件,如果發生變化則重新下載新文件或更新信息。
7.
儘可能減少DCOM元素
這個很好理解,就是儘可能減少網頁中各種<>元素數量,例如<table>的冗餘很嚴重,而我們完全可以用<div>取代之。
8.
使用多域名負載網頁內的多個文件、圖片:1、突破瀏覽器併發限制 (你隨便挑一個 G家的 url: https://lh4.googleusercontent.com/-si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg,把前面的 lh4換成 lh3,lh6啥的,都照樣能夠訪問,像地圖之類的需要大量併發下載圖片的站點,這個非常重要。)節約主域名的連接數,從而提高客戶端網絡帶寬的利用率,優化頁面響應。因爲老的瀏覽器(IE6是典型),針對同一個域名只允許同時保持兩個HTTP連接。將圖片等資源請求分配到其他域名上,避免了大圖片之類的並不一定重要的內容阻塞住主域名上其他後續資源的連接(比如ajax請求),靜態內容和動態內容分服務器存放,使用不同的服務器處理請求。處理動態內容的只處理動態內容,不處理別的,提高效率。用戶請求是多域名是並行下載,速度上更快


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章