著手三個部分：

js部分：

（1）減少http請求：

　 web中一次請求要經歷發起請求，伺服器響應，返回資料，瀏覽器渲染，才能把資料展示在頁面上，其中80%的時間都耗在http請求中，只有20%是瀏覽器渲染時間。。。

（2）減少對dom的訪問和操作，改為建立文件碎片，進行虛擬dom操作

在瀏覽器中訪問dom節點需要呼叫查詢方法，每個找都是要進行迴圈遍歷才能找到，特別是對於巢狀比較深的dom節點進行查詢，過程非常緩慢，於此同時，對dom進行增刪改的操作耗費瀏覽器的效能更大，這也是vue最近比較火，jq越來越少有人用的原因。

（3）dns快取，瀏覽器快取（localstorage、sessionstroage）

dns快取是當正常訪問ip後系統會將這個ip儲存起來，當再次訪問的時候，系統就會直接把本地的DNS快取提取顯示，等於是加速了網址的解析；瀏覽器快取包括頁面html快取和圖片, js，css等資源的快取到使用者本地電腦硬盤裡，是伺服器響應更快和減少網路頻寬消耗。

（4）使用非同步載入外部js資源和外部資源本地化

對於一些外部資源使用非阻塞非同步載入的方法，不阻塞頁面載入，比較大的資源下載到本地載入，提高資源載入穩定性。

HTML部分：

（1）標籤語義化：

即用合理、正確的標籤來展示內容，比如 h1-h6 定義標題，使其易於使用者閱讀，樣式丟失的時候能讓頁面呈現清晰的結構。

（2）合理規劃頁面結構：

使用合理的頁面結構，使程式碼更加清晰，有利於後期的維護，圖片較小和不重要的轉為base64格式，提升載入速度，儘量減少DOM元素的數量與層級。

（3）選擇器的合理使用

　　根據專案大小，選擇主要使用class還是id。id選擇器優先順序最高，訪問速度最快。但是在html中每宣告一個id，就會在JS底層宣告一個全域性變數，而全域性變數的增多，將會拖慢JS中變數遍歷的效率，若變數遍歷達到十萬次以上，就會出現較顯著的延遲，而且容易造成全域性變數汙染。對於小專案，並無影響，但是對中大型專案來說，尤其是遊戲專案，影響很大。個人推薦，當專案較小時，靈活使用class和id，當專案較大時，儘量少使用id。

（4）使用非同步載入iframe標籤和儘量避免使用table標籤

瀏覽器載入iframe標籤時，會阻塞父頁面渲染樹的構建及HTTP請求，因此儘量使用非同步載入iframe；瀏覽器對table標籤的解析是全部生成後再一次性繪製的，因此會造成表格位置較長時間的空白，推薦使用ul及li標籤繪製表格。

CSS樣式：

（1）禁止使用樣式表示式：

　　CSS表示式從IE5起開始支援，但僅有IE支援。它的解析速度較慢，而且運算次數遠比我們想象的要大，隨意動動滑鼠就能輕鬆達到上萬次運算，會對頁面效能造成影響。譬如："#myDiv{width:expression(document.body.offsetWidth - 110 + "px"); }"。

（2）優化關鍵選擇器：

去掉無效的父級選擇器，儘量少在選擇器末尾使用萬用字元，瀏覽器對CSS選擇器的解析式從右往左進行的，減少中間的無效的父級選擇器，大大提高效率。

（3）將CSS放在HTML的上面部分

這個策略不能提高網站的載入速度，但它不會讓訪問者長時間看著空白螢幕或者無格式的文字（FOUT）等待。如果網頁大部分可見元素已經加載出來了，訪問者才更有可能等待載入整個頁面，從而帶來對前端的優化效果。這就是知覺效能。

（4）使用CSS雪碧圖

將多個圖片合併成一個圖片（即將多個HTTP請求減少為一個HTTP請求），然後以位置資訊定位超連結；

（5）使用 link 而不是@import

　　載入頁面時，link標籤引入的CSS被同時載入；@import引入的CSS將在頁面載入完畢後被載入，也就是說，@import會組織瀏覽器的並行下載；link是HTML的元素，不存在相容性問題；@import只有IE5+才能識別；

（6）減少重排和減少重繪

希望對各位有用！謝謝

重排會導致瀏覽器重新計算整個文件，重新構建渲染樹，這一過程會降低瀏覽器的渲染速度。

我們應該避免發生重排，下面是觸發重排的例子

　　　　改變 font-size 和 font-family；

　　　　改變元素的內外邊距；

　　　　通過JS改變CSS類；

　　　　通過JS獲取DOM元素的位置相關屬性（如width、height、left等）；

　　　　CSS偽類啟用；

　　　　滾動滾動條或者改變視窗大小；

減少重繪，當元素的外觀（如color、background、visibility等屬性）發生改變時，會觸發重繪。在網站的使用過程中，重繪是無法避免的。不過，瀏覽器對此做了優化，它會將多次的重排、重繪操作合併為一次執行。不過我們仍需要避免不必要的重繪，如頁面滾動時觸發的hover事件，可以在滾動的時候禁用 hover 事件，這樣頁面在滾動時會更加流暢；

（7）合併、壓縮CSS檔案