優(yōu)化策略
- 多使用內(nèi)存义钉、緩存或其他方法
- 減少CPU計(jì)算、減少網(wǎng)絡(luò)
入手
- 加載頁面和靜態(tài)資源
- 頁面渲染
加載資源優(yōu)化
- 靜態(tài)資源的壓縮合并
- 靜態(tài)資源緩存（如jquery版本更換）
- 使用cdn讓資源加載更快一些（不同區(qū)域的網(wǎng)絡(luò)優(yōu)化）
- 使用ssr后端渲染坡氯，數(shù)據(jù)直接輸出到HTML中（vue锐帜、angular出來后提出的概念）之前的asp偷崩、jsp頁面脱吱，數(shù)據(jù)不是先寫html,然后將數(shù)據(jù)通過ajax渲染到頁面中
渲染優(yōu)化
- css放前面谴古，js放后面
- 懶加載（圖片懶加載质涛、下拉加載更多）
- 減少DOM 查詢，對DOM查詢做緩存
- 減少DOM操作掰担，多個(gè)操作盡量合并在一起執(zhí)行
- 事件節(jié)流
- 盡早執(zhí)行操作（如：DOMContentLoaded）
示例
- 資源合并
image.png
- 緩存
- 通過連接名稱緩存
- 只有內(nèi)容改變的時(shí)候汇陆，鏈接名稱才會改變
image.png
image.png
- cdn
image.png
- 使用SSR后端渲染
- 現(xiàn)在react vue提出了這樣的概念（先拉出模板再通過ajax獲取數(shù)據(jù)）
- jsp php asp都屬于后端渲染（數(shù)據(jù)可以直接輸出到HTML中，不通過AJAX）
- 懶加載
image.png
- 緩存DOM查詢
image.png
- 合并DOM查詢
image.png
frag先定義一個(gè)片段带饱，將10個(gè)li依次插入片段中毡代，這個(gè)時(shí)候不會頻繁的做DOM查詢操作，最后將片段插入到listNode中
- 事件節(jié)流
image.png
當(dāng)連續(xù)輸入ABCDE,會觸發(fā)多次change事件勺疼。解決辦法是當(dāng)用戶輸入ABCDE完了停下來的時(shí)候教寂，這個(gè)時(shí)候再觸發(fā)change操作，減少操作次數(shù)（計(jì)算）
- 盡早操作
image.png
jquery zepto都是通過第二種方式
