一、适用于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文件，使用增量更新