前端： 性能优化怎么说？

前端性能优化是一个系统工程，我通常会从‘加载时性能’和‘运行时性能’两个核心维度来考虑，可以归纳为以下几个阶段和方向：

一、核心方向：加载性能优化（让内容更快呈现）

1. 资源加载

   • 压缩与精简：压缩HTML/CSS/JS/图片（如WebP/AVIF格式），使用Tree Shaking、Scope Hoisting移除无用代码。
   • 减少请求：合并小文件，利用雪碧图，内联关键CSS。
   • 缓存策略：强缓存（Cache-Control， Expires）、协商缓存（ETag， Last-Modified）用对、用足。
   • 按需加载：路由懒加载、组件懒加载、图片懒加载，只加载当前视口所需资源。

2. 网络层面

   • CDN加速：静态资源部署到CDN，利用边缘节点降低延迟。
   • HTTP/2 或 HTTP/3：利用多路复用、头部压缩等特性提升传输效率。
   • 预加载/预连接：对关键资源使用 <link rel=“preload”>，对重要第三方源使用 <link rel=“preconnect”>或 dns-prefetch。

3. 渲染路径（关键渲染路径优化）

   • 保障核心内容（FCP/FMP） ：内联首屏关键CSS，优化DOM结构，避免CSS @import。
   • 避免渲染阻塞：CSS放在头部，非关键JS用 async或 defer放在底部。
   • 服务端渲染（SSR）或静态生成（SSG） ：提升首屏加载速度和SEO。

二、核心方向：运行时性能优化（让交互更流畅）

1. JavaScript效率

   • 防抖与节流：控制高频率事件（scroll, resize, input）的处理频率。
   • 避免长任务：将耗时任务拆解，通过 Web Worker或 setTimeout分片执行，不阻塞主线程。
   • 事件委托：减少事件监听器数量，利用冒泡机制统一管理。
   • 算法与数据结构：在数据量大的场景下，选择更优的算法复杂度。

2. 渲染效率

   • 减少重排与重绘：集中修改样式（使用class），读写offsetTop等布局属性时使用缓存（如FastDOM模式）。
   • 使用CSS3硬件加速：对动画元素使用 transform和 opacity，触发GPU合成层。
   • 优化列表渲染：对长列表使用虚拟滚动，只渲染可视区域内的DOM节点。

3. 内存管理

   • 防止内存泄漏：及时解绑全局事件监听器、清除定时器、避免不当的闭包引用、释放DOM引用。

问: 说说性能优化

答:

• 减少资源加载时间：比如压缩代码、使用CDN、懒加载等。

• 优化渲染性能：比如减少重绘和重排、使用虚拟DOM、代码分割等。

• 缓存策略：利用浏览器缓存、Service Workers等。

• 网络优化：减少HTTP请求、使用HTTP/2、预加载等。

参考： juejin.cn/post/727311…