前端效能優化總結

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

減少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後會開啟。

前端效能優化總結

前端效能優化總結

前端效能優化總結

前端效能優化總結

相關推薦