HTML：減小頁面加載時間的方法

時間 2019-11-19

標籤 html 減小頁面加載時間方法欄目 HTML 简体版

原文原文鏈接

1. 重複的HTTP請求數量應儘可能減小javascript

　　（1）減小調用其餘頁面、文件的數量。php

　　（2）在使用css格式時，常會採用background載入圖形文件，而每一個background的圖像都會產生1次HTTP 請求，爲了讓頁面生動活潑大量使用background來加載背景圖，能夠採用css的1個有用的background-position屬性來加載背景圖加以改善，將須要頻繁加載的多個圖片合成爲1個單獨的圖片，加載時採用：background:url(....) no-repeat x-offset y-offset的形式加載，圖片加載的HTTP請求縮減爲1個。css

background:url(....) no-repeat x-offset y-offset

2. 壓縮Javascript、CSS代碼
　　通常js、css文件中存在大量的空格、換行、註釋，這些利於閱讀，若是可以壓縮掉，將會頗有利於網絡傳輸。這方面的工具也有不少，能夠在百度裏搜索一下關鍵字「css代碼壓縮」，或者「js代碼壓縮」將會發現有不少網站都提供這樣的功能，固然了你也能夠本身寫程序來作這個工做，若是你會的話。就拿咱們這個網站來講吧。剛開始上傳這個網站的時候，個人不少Css代碼都沒有壓縮，後面發現了這個問題，我就上網找了相關的網站的壓縮代碼的功能，最後就把不少 CSS文件都壓縮了。這個壓縮比率仍是比較高的，通常都有百分五十左右。這個代碼壓縮對於網頁的加載仍是頗有用的。html

3. 在文件頭部放置css樣式的定義
java

　　這項設置對於用戶端是慢速網絡或網頁內容比較龐大的狀況比較有利，能夠在網頁逐步呈現的同時仍會保持格式信息，不影響網頁美感。nginx

4. 在文件末尾放Javascript腳本
　　網頁文件的載入是從上到下加載的，不少Javascript腳本執行效率較低，或者在網頁前面都不須要執行的，若是將這些腳本放置到頁面比較靠前的位置，可能致使網站內容載入速度降低或加載不了，將這些腳本放置在網頁文件末尾，必定要放置在前面的腳本要改用所謂的「後載入」方式加載，在主體網頁加載完成後再加載，防止其影響到主體網頁的加載速度。web

5. css、javascript改由外部調用express

　　若是css、js內容比較龐大，儘可能不要寫到同1個頁面中去，改由外部載入比較穩當，由於瀏覽器自己會對css、js文件進行緩存。瀏覽器

6. 儘量減小DCOM元素
　　儘量減小網頁中各類<>元素數量，例如<table>的冗餘很嚴重，而咱們徹底能夠用<div>取代之。緩存

7. 避免使用CSS腳本(CSS Expressions)

　　有時爲了要css的參數動態改變，可能會採用css expression來實現，但這樣作得不償失，會使用戶端瀏覽器負擔明顯加劇，因此不建議這樣作，若是須要改變，可使用Javascript腳本去實現。

8. 添加文件過時或緩存頭

　　對於同一用戶頻繁訪問的圖片、Js腳本文件等能夠在Apache或Nginx設置其緩衝時間，例如設置24小時過時時間，這樣用戶在訪問過該頁面以後再次訪問時，同一組圖片或JS不會再重複下載，從而減小了HTTP請求，用戶訪問速度明顯有所提高，同時服務器負載也會降低。下面給出nginx配置中緩存控制的例子：

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$   
    {   
    expires 30d;#設置30天過時  
    }  
    location ~ .*\.(js|css)?$   
    {  
    expires 1h;#設置1小時過時  
    }

9. 使用CDN(Content Delivery Network)網絡加速

　　如今國內作CDN加速業務的公司不少，簡單講，就是將你的圖片、視頻擴散到CDN網絡所能到達之處，讓用戶訪問時能就近下載到這些文件，從而達到網絡提速的目的，這樣作，同時能減輕你本身網站的負載。

10. 服務器啓用gzip壓縮功能
　　將要傳輸的文件壓縮後傳輸到客戶端再解壓，在網絡傳輸數據量會大幅減少。在服務器上的Apache、Nginx可直接啓用，也可用代碼直接設置傳輸文件頭，增長gzip的設置，也可從負載均衡設備直接設置。不過須要留意的是，這個設置會略微增長服務器的負擔。服務器性能不是很好的網站，要慎重考慮。

11. Ajax採用緩存調用
　　Ajax調用都採用緩存調用方式，通常採用附加特徵參數方式實現，注意其中的

<script src=」xxx.js?{VERHASH}」，

{VERHASH}就是特徵參數，這個參數不變化就使用緩存文件，若是發生變化則從新下載新文件或更新信息。

12. Ajax調用盡可能採用GET方法調用

　　實際使用XMLHttpRequest時，若是使用POST方法實現，會發生2次HTTP請求，而使用GET方法只會發生1次HTTP請求。若是改用GET方法，HTTP請求減小50%！

13. 養成良好的開發維護習慣，儘可能避免腳本重複調用

14. 縮減iframe的使用，如無必要，儘可能不要使用

　　iframe一般用於不一樣域名內容的加載，這同時也可能因iframe內容加載速度影響到主網頁加載速度，若是可能，把須要加載的內容抓取到本地直接嵌入。若是實在須要iframe加載，採用後載入方式實現。

15. 合理使用Flush

　　用戶端發送瀏覽請求後，服務器端通常要花銷200-500ms去處理這些請求，在此期間，用戶端瀏覽器處於等待狀態，若是要減小用戶等待時間，能夠在適當的位置使用flush，將已經就緒的內容推送到用戶端，這在php中很容易實現例如：

    <!-- css, js --> 
    </head> 
    <?php flush();?> 
    <body> 
    ... <!-- content -->

16. 避免採用30一、302轉向

　　當瀏覽器、代理或搜索引擎派出的"爬蟲"對某一頁面或網址請求調用時，該調用頁面或網址所在的網絡服務器將會檢查一個名爲.htaccess的文件。該文件包含如何處理特定請求的指令，並在安全性上扮演關鍵角色。用戶可對該文件進行修改，經過這個文件來通知瀏覽器、代理或"爬蟲"，被調用頁面屬於臨時移走（302重定向）仍是永久性移走（301重定向）。咱們也能夠經過網絡託管服務而不是.htaccess'文件來實現301/302永久性重定向。

17. 優化圖片文件　

　　優化圖片文件，減少其尺寸，特別是縮略圖，必定要按尺寸生成縮略圖而後調用，不要在網頁中用resize方法實現，雖然這樣看到的圖片外形笑了，可是其加載的數據量一點也沒減小。曾經見過有人在網頁中加載的縮略圖，其真實尺寸有10M之巨…

普通圖像、icon也要儘量壓縮後，能夠採用web圖像保存、減小顏色數等等方法實現。

18. 當頁面內容龐大到必定程度，能夠採用分頁的方式展示，或者taobao的那種翻頁後載入方式。

19. 使用多域名負載網頁內的多個文件、圖片

　　有資料說明，IE在網頁載入過程當中，在同1時刻，對同1域名並行加的HTTP請求數量最高爲2個，若是網頁須要加載的文件數量超過2個(一般遠遠超過..)，要加快網頁訪問速度，最好將文件分佈到多個域名，例如19樓，其js文件採用獨立的域名，聽說百度的圖片服務器數量在20臺以上。

20. 配置ETags

（詳見：優化網站設計（十三）：配置ETags）

ref-to：http://developer.51cto.com/art/201105/265125.htm