前端網站優化常用方法

1.合并js和css檔案

将js和css分别合并到一個共享檔案，這樣不僅能夠簡化代碼，而且在執行js檔案是，如果js檔案較多，就需要多次向伺服器請求資料，這樣将會延長加載速度，将js檔案合并在一起，減少了請求的次數，就能夠提高加載的速度；

2.Sprites圖檔技術（圖檔精靈技術）

圖檔精靈技術是一種常用的頁面速度加載優化的方式，它是将一個頁面涉及到的所有的零星圖檔（注意：隻是那些曉得圖檔、icon）都包含到一張大圖中，然後利用css的背景屬性将其相應的圖檔在現在響應的文字，這樣當通路一面時，隻用加載一張大圖即可，而不用一幅一幅的去請求。這種方法既減少了圖檔的大小，有減少了http請求的次數，可以很大程度的優化頁面的加載熟讀

3.壓縮圖檔和文本

壓縮圖檔和文本也可以減小資料的大小，尤其是代碼的壓縮，如HTML、XML、JSON、javascript、css等代碼的壓縮率可達70%以上，代碼壓縮後可以大大減少檔案的體積，是頁面可以快速的加載

4.按需加載（及可見區域以外的區域延時加載）

為了讓使用者可以更快的看到網頁中交重要的内容，可以優先加載可見區域的内容，延時加載不可見區域的内容，為了避免頁面變形可以使用占位符，占位圖檔來固定寬高。如jquery中的ImageLazyLoad等一些插件就可以很好的實作按需加載，隻有當使用者滑鼠向下滾動式，下面得圖檔才會加載。當然也可以用原生的js來實作。

5.確定功能圖檔優先加載

網站主要考慮可用性的重要性，一個功能按鈕要提前加載出來，使用者進入下載下傳頁，一個隻需要8s時間的下載下傳，花了5s在等待、尋找下載下傳按鈕圖檔，誰能忍受?

6.圖檔格式優化

不正确的使用圖檔格式是一種很常見的拖慢加載速度的原因，正确的使用圖檔格式可以數倍的減小圖檔的大小。一般網頁的大圖，如banner圖檔一般使用jpg格式，因為jpg是一種有損壓縮，可以最大程度的減小圖檔的體積，而且不會影響視覺體驗（不支援透明通道）；小圖檔一般用png格式，一般是無損壓縮的（保留透明通道）。

7. 使用 Progressive JPEGs（進階JPEG）

ProgressiveJPEGs圖檔是JPEG格式的一個特殊變種，名為“進階JPEG”。在建立進階JPEG檔案時，資料是這樣安排的：在裝入圖像時，開始隻顯示一個模糊的圖像，随着資料的裝入，圖像逐漸變得清晰。它相當于交織的GIF格式的圖檔。進階JPEG主要是考慮到使用數據機的慢速網絡而設計的，快速網絡的使用者通常不會體會到它和正常JPEG格式圖檔的差別。對于網速比較慢的使用者，這無疑有很好的體驗。

8.代碼的精簡

代碼的是最直接的方法，也是對于一個程式員程式設計能力的考驗。對代碼進行優化，以最少的代碼來實作所需的功能，及減少了檔案的體積，同時也減少了不必要的時間的浪費。同時不必要的空格、注釋、換行等的減少，也可以減少檔案的體積。

9.延遲加載和執行非必要代碼

網頁中的大部分js代碼都是在頁面加載後才需要執行的，是以對于這些代碼可以寫在window.onload事件的回掉函數中。這樣可以使頁面主體和一些必要的js代碼優先加載的出來，然後來去請求非一開始就需要的代碼。

10.使用Ajax

當一個頁面隻有一部分需要更新時，可以使用ajax來對頁面進行異步的更新，這樣不需要重新的重新整理整個頁面，重新請求整個1頁面的資料，而隻需要請求需要的那部分資料更新頁面即可。這樣既提高了頁面的加載速度，有提高了體驗性。

11.借助自動化工具來實作頁面的優化

比如RadwareFastView

如果你在很年輕的時候，就遭受到了失敗，一定要把它當作老天送你的禮物。如果等到四十歲再失敗，你會經受不起的。為什麼年紀越大，走路越小心，因為越來越經不起跌倒了。