淺談前端js面試--運行環(huán)境（性能優(yōu)化）

優(yōu)化策略

  • 多使用內(nèi)存、緩存或其他方法
  • 減少CPU計算、減少網(wǎng)絡

入手

  • 加載頁面和靜態(tài)資源
  • 頁面渲染
加載資源優(yōu)化
  • 靜態(tài)資源的壓縮合并
  • 靜態(tài)資源緩存（如jquery版本更換）
  • 使用cdn讓資源加載更快一些（不同區(qū)域的網(wǎng)絡優(yōu)化）
  • 使用ssr后端渲染，數(shù)據(jù)直接輸出到HTML中（vue、angular出來后提出的概念）之前的asp、jsp頁面，數(shù)據(jù)不是先寫html,然后將數(shù)據(jù)通過ajax渲染到頁面中
渲染優(yōu)化
  • css放前面，js放后面
  • 懶加載（圖片懶加載、下拉加載更多）
  • 減少DOM 查詢，對DOM查詢做緩存
  • 減少DOM操作，多個操作盡量合并在一起執(zhí)行
  • 事件節(jié)流
  • 盡早執(zhí)行操作（如：DOMContentLoaded）
示例
  • 資源合并
image.png
  • 緩存
  • 通過連接名稱緩存
  • 只有內(nèi)容改變的時候，鏈接名稱才會改變
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先定義一個片段，將10個li依次插入片段中，這個時候不會頻繁的做DOM查詢操作，最后將片段插入到listNode中

  • 事件節(jié)流
image.png

當連續(xù)輸入ABCDE,會觸發(fā)多次change事件。解決辦法是當用戶輸入ABCDE完了停下來的時候，這個時候再觸發(fā)change操作，減少操作次數(shù)（計算）

  • 盡早操作
image.png

jquery zepto都是通過第二種方式

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容