20點提升網站訪問速度縮短網頁加載時間！

文章來源：http://www.chinaz.com/web/2014/1112/373946.shtml

一、減小頁面HTTP請求數量

比較直接的理解就是要減小調用其餘頁面、文件的數量。

A.咱們在使用css格式控制的時候，常常會採用background載入不少圖形文件，每一個background的圖像至少產生1次HTTP請求，通常咱們爲了讓頁面生動活潑會大量使用background來加載背景圖，要改善這個情況，能夠採用css的1個有用的background-position屬性來加載背景圖，咱們將須要頻繁加載的多個圖片合成爲1個單獨的圖片，須要加載時，採用如下形式加載便可將這部分圖片加載的HTTP請求縮減爲1個。

B.採用Image maps，這個方法也比較經常使用，只是限於同1個區域使用。

C.Inline images，這個方法不多見到，但對於很小很簡單的圖像倒是很實用的，相關語法標準參照：tools.ietf.org/html/rfc2397。

二、使用CDN(Content Delivery Network)網絡加速

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

三、添加文件過時或緩存頭

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

四、服務器開啓gzip壓縮

這個你們都比較瞭解，即將須要傳輸的內容壓縮後傳輸到客戶端再解壓，這樣在網絡上傳輸的 數據量會大幅減少。一般在服務器上的Apache、Nginx能夠直接開啓這個設置，也能夠從代碼角度直接設置傳輸文件頭，增長gzip的設置，也能夠從 負載均衡設備直接設置。不過須要留意的是，這個設置會略微增長服務器的負擔。

五、css格式定義放置在文件頭部

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

六、Javascript腳本放在文件末尾

不少Javascript腳本執行效率低下，或者有的第3方域名腳本出現意外沒法載入， 若是將這些腳本放置到頁面比較靠前的位置，可能會致使咱們本身網站的內容載入速度降低甚至沒法正常加載，因此通常將這些腳本放置在網頁文件末尾，必定要放 置在前面的腳本要改用所謂的「後載入」方式加載，在主體網頁加載完成後再加載，防止其影響到主體網頁的加載速度。

七、避免使用CSS腳本(CSS Expressions)

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

八、css、javascript改由外部調用

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

九、壓縮Javascript、CSS代碼

通常js、css文件中存在大量的空格、換行、註釋，這些利於閱讀，若是可以壓縮掉，將會頗有利於網絡傳輸。這方面的工具也有不少，通常能夠保留開發版本，利用工具生成生產版本，2個文件比較，通常壓縮率能達到50%以上，減小的數據量仍是比較可觀的。

十、避免採用30一、302轉向

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

十二、配置ETags

1三、Ajax採用緩存調用

這個的使用能夠參照Discuz論壇代碼，裏面對於大量使用的Ajax調用都採用了緩存 調用方式，通常採用附加特徵參數方式實現，注意其中的

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

1四、合理使用Flush

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

1五、Ajax調用盡可能採用GET方法調用

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

1六、儘量減小DCOM元素

這個很好理解，就是儘量減小網頁中各類<>元素數量，例如

的冗餘很嚴重，而咱們徹底能夠用取代之。

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

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

1八、縮減iframe的使用，如無必要，儘可能不要使用

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

1九、優化圖片文件

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

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

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