前端效能優化

2022-09-10 14:45:29 字數 746 閱讀 1922

摘要:前端的效能對於web應用的使用者體驗來說非常重要。不要以為你的web應用的效能已經足夠好了,其實還會有很多可以提公升的地方。本文將介紹google和雅虎關於前端優化的最佳實踐以及工具,你可以逐一檢驗你的web應用。

前端的效能對於乙個web應用來說非常重要,如果乙個web應用的頁面載入速度非常快、對於使用者的操作可以及時響應,那麼產品的使用者體驗將會極大地提公升。下圖顯示了頁面載入速度對於使用者體驗的影響。

1.使用多網域名稱增加最大併發數

大型**會有多個網域名稱來存放不同的資源,比如img,css以及html因為瀏覽器只對單個網域名稱限制併發數,而不對單個ip限制併發數,所以可將乙個ip位址對映到多個網域名稱,然後使用這些網域名稱訪問**資源,這樣原本瀏覽器的併發數為6,使用兩個網域名稱併發數就可以達到12個了。但需要注意的是,網域名稱並不是越多就越好的,因為網域名稱解析也需要花費時間,而且併發數太多也會耗費客戶端太多的cpu,網域名稱數量到了一定程度,網頁效能就會開始下降,所以在應用中需要根據實際情況尋找乙個平衡點。如果不是特別需要,一般2到4個為佳。

各種瀏覽器限制見下圖

2.關於base64:url

base64:url就是url位址是base64編碼的。

優點在於減少了http請求、解決某些檔案可以避免跨域的問題、沒有更新要重新上傳,還要清理快取的問題等。但是也存在瀏覽器相容、增加css檔案大小和編碼成本等問題。

前端效能優化

1.減少http請求次數 css sprites 在國內很多人叫css精靈,是一種網頁應用處理方式。它允許你將乙個頁面涉及到的所有零星都包含到一張大圖中去,這樣一來,當訪問該頁面時,載入的就不會像以前那樣一幅一幅地慢慢顯示出來了。對於當前網路流行的速度而言,不高於200kb的單張的所需載入時間基本是...

前端效能優化

在開發好頁面後,如何讓頁面更好更快的執行 從前端的角度來看,效能可以分為兩個方向 從使用者角度來看,乙個是頁面載入的很快,另乙個是頁面使用起來非常流暢 輸入了url 瀏覽器開始解析 查詢本地快取 dns解析 建立連線 伺服器處理 伺服器響應 客戶端收到響應 解析html 然後開始渲染頁面 使用者可以...

前端效能優化

隨著現在 越來越酷炫,各種,資源庫,動畫等等用的越來越多,在使用者視覺和功能的提公升的同時,效能也成為乙個必須考慮的點。有人說 乙個 開啟時間超過8s,網民就會流失70 以上。這種說法我覺得不是很正確的,除非是非常重要 必須要使用的 否則超過5s我基本直接關了,體驗太差。所以,使用者 忍讓 是有極限...