前端效能優化

2021-08-22 10:11:59 字數 1007 閱讀 9925

一、什麼是前端效能優化(what)?

從使用者訪問資源到資源完整的展現在使用者面前的過程中,通過技術手段和優化策略,縮短每個步驟的處理時間從而提公升整個資源的訪問和呈現速度。

二、為什麼要做前端效能優化(why)?

在構建web站點的過程中,任何乙個細節都有可能影響**的訪問速度,如果不了解效能優化知識,很多不利**訪問速度的因素會形成累加,從而嚴重影響**的效能,導致**訪問速度變慢,使用者體驗低下,最終導致使用者流失。

三、前端效能優化的原則(rule)

1、不要按照準則照本宣科的做,需要根據實際情況因地制宜;

2、不出bug!

四、從瀏覽器發起請求到頁面能正常瀏覽都有哪些階段(process)?

預處理——>dns解析——>建立連線——>發起請求——>等待響應——>接受資料——>處理元素——>布局渲染

五、效能優化的具體方法(way)

一)內容層面

1、dns解析優化(dns快取、減少dns查詢、keep-alive、適當的主機網域名稱)

2、避免重定向(/還是需要的)

3、切分到多個網域名稱

4、杜絕404

二)網路傳輸階段

1、減少傳輸過程中實體的大小

1)快取

2)cookie優化

3)檔案壓縮(accept-encoding:g-zip)

2、減少請求的次數

1)檔案適當的合併

2)雪碧圖

3、非同步載入(併發,requirejs)

4、預載入、延後載入、按需載入

三)渲染階段

1、js放底部,css放頂部

2、減少重繪和回流

3、合理使用viewport 等meta頭部

4、減少dom節點

四)指令碼執行階段

1、快取節點,儘量減少節點的查詢

2、減少節點的操作(innerhtml)

3、避免無謂的迴圈,break、continue、return的適當使用

4、事件委託(

前端效能優化

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

前端效能優化

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

前端效能優化

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