0x13 代码优化

Review

  1. 2024-10-05 11:09

[!Summary]

一、Introduction #

  1. JS大任务拆解
  2. 使用Web Worker：耗时长、非关键逻辑的计算拆离
  3. 使用 WebAssembly：运行效率更高，耗时更低
  4. AOT技术：将计算过程提前
  5. 优化数据结构和算法：避免嵌套循环
  6. 使用事件委托，代替大量的事件订阅
  7. 注意程序的局部性
  8. switch 性能由于 if-else ，switch 被编译成跳转表，可以避免比较开销
  9. 善用查找表数据结构（Array, Object, Map, Set）
  10. 避免长时间执行JS逻辑的任务，不要连续占用JS线程时间过长
  11. 使用 requestAnimationFrame 优化视觉变化
  12. 善用 Web Workers
  13. 善用 Bit Operation
  14. 不要覆盖原生方法
  15. 降低 CSS 选择器的复杂性、层级
  16. 优先使用 flexbox layout
  17. 善用 transform , opacity 实现动画
  18. 避免 CSS 样式表达式
  19. 减少内联JS和CSS使用，尽可能使用外部的JS和CSS文件
  20. a标签配置 noopener nofollow noreferrer
  21. 优化 HTML 代码结构
  22. 优化 CSS 文件结构
  23. JS 避免全局变量
  24. JS 减少DOM操作
  25. 使用虚拟DOM
  26. 缓存变量：将频繁使用的变量缓存起来，避免重复计算
  27. 善用异步编程：Promise/Async/Generator
  28. 内存管理：及时释放不再使用的变量
<a href="https://example.com" target="_blank" rel="noopener noreferrer">点击跳转</a>
  • noopener：阻止新窗口访问原始窗口（当一个链接在新窗口中打开时，新窗口可以通过 window.opener 属性访问到原始窗口）noopener 属性将 window.opener 设置为 null，阻止了这种攻击。
  • noreferrer：阻止浏览器发送 Referer 头，保护用户隐私。
  • nofollow: 告诉搜索引擎“请忽略这个链接”

Reference #

前端性能优化 24 条建议