web前端效能最佳化

標籤：ref   請求   之間   多次   tor   白屏   體驗   dom操作   問題   

 

　　效能最佳化對於使用者體驗無疑是非常重要的，下面介紹一些效能最佳化的方法。

1.減少HTTP請求　

　　http請求越多，那麼消耗的時間越多，如果在加上網路很糟糕，那麼問題就更多了。且如果網頁中的圖片、css檔案、js檔案很多甚至有音樂檔案時，這勢必會造成負擔。

　　如何減少HTTP請求？

• 對於圖片，可以使用css sprites（圖片精靈）、圖片lazyload(圖片懶載入)。
• 對於css和js，可以把css檔案以及js檔案分別進行合并，以減少http請求次數。

 

2.使用CDN

　　CDN即 content distribute network,內容分髮網絡。其原理是---儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。CDN系統能夠即時地根據網路流量和各節點的串連、負載狀況以及到使用者的距離和回應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。下面的這個例子可以很好的說明問題：古代打仗大家一定都知道，由於古代的交通很不發達，所以當外族進攻的時候往往不能及時的反擊，等朝廷征完兵再把兵派往邊境的時候那些侵略者卻是早已不見了蹤影，這個讓古代的帝王很是鬱悶。後來帝王們學聰明了，都將大量的兵員提前派往邊境駐紮，讓他們平時屯田，戰時當兵，這樣的策略起到了很顯著的作用。

 

 

3.css檔案置於頂部、js檔案置於底部、css和js檔案放到外部參考

　　css檔案置於head中，這樣的好處是可以使得css和DOM同時出現，避免出現白屏等情況。

　　js檔案置於</body>前，這樣做的好處在於此時頁面已載入完，不會因為js造成阻塞（若js在head中，那麼只有載入完js才會載入內容，這時使用者體驗是極差的）。

　　將css和js放到外部是因為這樣我們更易於管理檔案，修改檔案等等。

 

 

4.使用JSON格式來進行資料交換　

　　JSON是一種輕量級的資料交換格式，採用完全獨立於語言的文字格式設定，是理想的資料交換格式。同時，JSON是 JavaScript原生格式，這意味著在 JavaScript 中處理 JSON資料不需要任何特殊的 API 或工具包。與XML序列化相比，JSON序列化後產生的資料一般要比XML序列化後資料體積小。

 

 

 

5.減少DOM操作

　　在《高效能JavaScript》中有這樣一句話：

把DOM和JavaScript各自想象成一個島嶼，它們之間用收費橋樑串連。

　　因此我們應當盡量減少DOM操作、如果多次訪問同一個DOM應該使用局部變數緩衝該DOM、儘可能使用querySelector，而不是使用擷取HTML集合的API。另外DOM操作會導致一系列的重繪（repaint）、重新排版（reflow）操作。為了確保執行結果的準確性，所有的修改操作是按順序同步執行的。大部分瀏覽器都不會在JavaScript的執行過程中更新DOM。相應的，這些瀏覽器將對對 DOM的操作放進一個隊列，並在JavaScript指令碼執行完畢以後按順序一次執行完畢。也就是說，在JavaScript執行的過程，直到發生重新排版，使用者一直被阻塞。一般的瀏覽器中（不含IE），repaint的速度遠快於reflow，所以避免reflow更重要。

 

 

 

6.壓縮css檔案、js檔案、圖片

　　css檔案和js檔案中的注釋、額外的空格會佔用更多的資源，所以壓縮css和js是十分必要的。另外，對於圖片我們可以降低圖片的解析度、改變圖片的格式以達到壓縮圖片的效果。

 

 

 

7.減少DNS查詢

　　我們知道一次DNS的解析過程會消耗20-120毫秒的 時間,在dns查詢結束之前，瀏覽器不會下載該網域名稱下的任何東西。所以減少dns查詢的時間可以加快頁面的載入速度。因此我們建議一個頁面所包含的域 名數盡量控制在2-4個。這就需要對頁面整體有一個很好的規劃。

 

 

 

未完待續....

web前端效能最佳化