前端效能優化總結

2021-09-05 12:34:07 字數 3303 閱讀 1878

多使用記憶體,快取或者其他方法

減少cpu計算,減少網路請求

減少io操作(硬碟讀寫)

靜態資源的合併和壓縮。

靜態資源快取(瀏覽器快取策略)。

使用cdn讓靜態資源載入更快。

css放head中,js放body後

懶載入減少dom操作,對dom操作做快取

減少dom操作,多個操作盡量合併在一起執行

事件節流

盡早執行操作 domcontentloaded

a.js  b.js  c.js  --

- abc.js

通過連線名稱控制快取

"abc_1.js"

>

<

/script>

只有改變內容的時候,鏈結名稱才會改變。

src=

"preview.png"

realsrc

="abc.png"

id="img1"

/>

>

var i = document.

getelementbyid

('img1');

i.src = i.

getattribute

('realsrc');

script

>

//沒有快取dom

for(

let i =

0; i < document.

getelementsbytagname

('p'

).length; i++

)//快取dom

var p = document.

getelementsbytagname

('p');

for(

let i =

0; i < p.length; i++

)

var listnode = document.

getelementbyid

('list');

var flag = document.

createdocumentfragment()

;var li;

for(

let i =

0; i <

10; i++

) listnode.

(flag)

;

10次dom插入 —> 1次dom插入

監聽文字改變事件,無操作100毫秒後執行操作,不用每次觸發。

var textarea = document.

getelementbyid

('ta');

var timeoutid;

textarea.

addeventlistener

('keyup'

,function()

timeoutid =

settimeout((

)=>

,100);

});

事件節流主要用於觸發頻率較高的事件,設定乙個緩衝觸發事件。

非核心**非同步載入 – 非同步載入的方式 – 區別

1.動態指令碼載入

用js建立

2.defer

3.async

src=

"script.js"

>

script

>

沒有 defer 或 async,瀏覽器會立即載入並執行指定的指令碼,「立即」指的是在渲染該 script 標籤之下的文件元素之前,也就是說不等待後續載入的文件元素,讀到就載入並執行。

async

src=

"script.js"

>

script

>

有 async,載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行(非同步)。

defer

src=

"myscript.js"

>

script

>

有 defer,載入後續文件元素的過程將和 script.js 的載入並行進行(非同步),但是 script.js 的執行要在所有元素解析完成之後,domcontentloaded 事件觸發之前完成。

關於 defer,我們還要記住的是它是按照載入順序執行指令碼的

標記為async的指令碼並不保證按照指定它們的先後順序執行。對它來說指令碼的載入和執行是緊緊挨著的,所以不管你宣告的順序如何,只要它載入完了就會立刻執行。

總結的非常好

瀏覽器快取 – 快取的分類 – 快取的原理

快取就是html檔案在本地存在的副本,

強快取

發現有快取直接用。

expires: 絕對時間,判斷客戶端日期是否超過這個時間

cache-control:相對時間,判斷訪問間隔是否大於3600秒

//在設定時間之前不會和服務端進行通訊了

//如果兩個都下發以後者為準

協商快取詢問伺服器快取是否可以用,在進行判斷是否用。

last-modified/if-modified-since

第一次請求,respone的header加上last-modified(最後修改時間)

再次請求,在request的header上加上if-modified-since

和服務端的最後修改時間對比,如果沒有變化則返回304 not modified,但是不會返回資源內容;如果有變化,就正常返回資源內容。

瀏覽器收到304的響應後,就會從快取中載入資源

etag/if-none-match

這兩個值是由伺服器生成的每個資源的唯一標識字串,只要資源有變化就這個值就會改變;其判斷過程與last-modified/if-modified-since類似,他可以精確到秒的更高階別。

在一些瀏覽器的a標籤是預設開啟dns預解析的,在https協議下dns預解析是關閉的,加入mate後會開啟。

前端效能優化總結

效能是前端開發乙個非常重要的組成部分,與應用不同,網頁的所有資源初始都需要通過網路傳輸,因此如何進行更好地進行網路傳輸對前端效能影響很大,此外還有瀏覽器渲染部分的優化。不管怎麼說如何進行前端效能優化是乙個永恆的話題。本文是閱讀小冊前端效能優化原理與實踐後加上部分自己以前的理解整理而成的,更詳細的原理...

前端效能優化總結

多使用記憶體,快取或者其他方法 減少cpu計算,減少網路請求 減少io操作 硬碟讀寫 靜態資源的合併和壓縮。靜態資源快取 瀏覽器快取策略 使用cdn讓靜態資源載入更快。css放head中,js放body後 懶載入減少dom操作,對dom操作做快取 減少dom操作,多個操作盡量合併在一起執行 事件節流...

前端效能優化總結

從使用者的角度而言,當開啟乙個網頁,往往關心的是從輸入完網頁位址後到最後展現完整頁面這個過程需要的時間,這個時間越短,使用者體驗越好。所以作為網頁的開發者,就從輸入url到頁面渲染呈現這個過程中去提公升網頁的效能。所以輸入url後發生了什麼呢?在瀏覽器中輸入url會經歷網域名稱解析 建立tcp連線 ...