前端开发性能优化方案整理

一、适用于CS和BS架构的前端优化方案

1、优化DOM操作

• 使用DocumentFragment来批量添加DOM节点以减少重排和重绘。
• 减少直接访问DOM，缓存经常访问的元素引用。
• 避免强制同步布局，例如通过频繁读取或修改DOM属性。

2、资源加载管理-数据加载

• 数据懒加载-按需加载
• 使用现代图片格式如WebP

3、数据传输优化

• 数据压缩：例如服务器开启gzip 压缩，服务器可选择压缩类型比如JSON，PNG，JS等等，减少传输的请求的响应数据量

3、HTTP/2与HTTP/3

• 利用HTTP/2的多路复用功能，减少延迟。
• 使用HTTP/3以获得更好的网络性能和恢复能力。

4、代码优化

• 使用GZIP压缩请求数据。
• 移除不必要的代码和注释。
• 使用合适的数据结构：例如 Map 和 Set 以提高查找效率。
• 避免不必要的循环：减少嵌套循环，使用更高效的循环结构。

5、减少渲染阻塞

• CSS：提取首屏显示所需的 CSS 并内联在 HTML 中。
• 异步 CSS：对于非关键样式表，使用异步加载。
• 避免使用昂贵的 CSS 选择器：例如 :nth-child 和 :not 等。

5、前端框架和库

• 选择高效的前端框架和库，比如React、Vue.js等，它们提供了虚拟DOM等特性。
• 使用前端路由以实现单页应用的效果。

 

二、只适用BS架构的前端优化

1、Web Workers

• 使用Web Workers处理复杂的计算任务，以避免阻塞UI线程。

2、资源加载优化

• 合并CSS和JavaScript文件以减少HTTP请求。
• 压缩HTML、CSS和JavaScript文件。

二、只适用CS架构的前端优化

1、增量更新

• 软件更新打包wgt文件，使用增量更新