性能优化

性能优化从哪些方面考虑

1. • 减少资源请求次数：通过合并 CSS 和 JS 文件、使用雪碧图等方式，减少页面加载时的 HTTP 请求次数。
   • 优化资源体积：压缩 HTML、CSS、JS 代码，使用 WebP 或 AVIF 等现代图片格式，对图片进行压缩处理，开启 Gzip 或 Brotli 压缩。
   • 按需加载：采用懒加载技术，如图片懒加载、路由懒加载等，只在需要时加载资源，减少初始加载时间。
   • 预加载关键资源：使用 <link rel="preload">提前加载关键资源，优化页面加载速度。
2. • 减少重排（回流）和重绘：尽量减少 DOM 操作，使用批量更新，避免频繁变动影响布局的样式属性。
   • 使用 CSS 动画：优先使用 CSS 动画而非 JavaScript 动画，提高渲染性能。
   • 虚拟 DOM：使用 React、Vue 等框架实现高效更新，减少直接操作 DOM 的开销。
3. • 减少阻塞渲染：将 JS 文件放在页面底部或使用 defer、async 属性，避免 JS 解析阻塞页面渲染。
   • 提前编译代码：使用 WebAssembly、asm.js 等工具提升 JS 执行效率。
   • 避免内存泄漏：在组件销毁时清理定时器、事件监听器等资源。
4. • 骨架屏：在页面加载时展示骨架屏，给用户页面正在加载的反馈，提高感知性能。
   • 渐进式加载：先加载页面的关键内容，再逐步加载非关键资源，保持交互响应性。
5. • 代码分割：使用 Webpack 的 Code Splitting 等技术，将代码分割成多个小块，按需加载。
   • Tree Shaking：去除未引用的代码，减少打包体积。
   • 压缩资源：压缩 HTML、CSS、JS 代码，提高加载速度。
6. • 使用 CDN：将静态资源分布到距离用户最近的服务器节点，降低网络延迟。
   • 开启缓存：设置强缓存和协商缓存策略，减少重复请求。
   • 使用 HTTP2：实现多路复用，减少 TCP 握手开销，提高网络传输效率。