面试官：看你简历里写了性能优化，具体是怎么做的。
首屏优化
- 拆分js文件，cdn，按需引入
- 接口请求数据过多，减少数据请求，使用数据缓存，
- 大量图片加载慢，图片压缩，图片懒加载
- 过多的渲染重绘动作，使用css动画代替js动画
- 网络问题，使用cdn等优化
- 字体问题，优化字体大小，字符集。
font-display: swap在加载完成前可读。
其他优化
1. 减少HTTP请求
- 合并文件：将多个CSS或JavaScript文件合并为一个，减少请求次数。
- 使用CSS Sprites：将多个小图标合并为一张大图，通过CSS定位显示不同部分。
- 内联小资源：将小的CSS或JavaScript代码直接嵌入HTML中，减少外部请求。
2. 优化资源加载
- 异步加载JavaScript：使用
async或defer属性异步加载JavaScript，避免阻塞页面渲染。 - 延迟加载非关键资源：使用
lazy-loading技术延迟加载图片、视频等非关键资源。 - 预加载关键资源：使用
<link rel="preload">预加载关键资源，如字体、CSS、JavaScript等。
3. 压缩和优化资源
- 压缩CSS、JavaScript和HTML：使用工具如UglifyJS、CSSNano、HTMLMinifier等压缩代码。
- 压缩图片：使用工具如ImageOptim、TinyPNG等压缩图片，减少文件大小。
- 使用WebP格式：WebP格式比JPEG和PNG更高效，支持更小的文件大小和更好的质量。
4. 使用CDN
- 内容分发网络（CDN） ：使用CDN加速静态资源的加载，减少服务器响应时间。
5. 缓存优化
- 浏览器缓存：通过设置HTTP缓存头（如
Cache-Control和Expires）利用浏览器缓存。 - Service Worker：使用Service Worker实现离线缓存和资源预加载。
6. 减少重绘和回流
- 避免频繁操作DOM：减少对DOM的频繁操作，避免引起重绘和回流。
- 使用CSS3动画：使用CSS3动画代替JavaScript动画，利用硬件加速。
7. 优化JavaScript
- 减少全局变量：减少全局变量的使用，避免命名冲突和内存泄漏。
- 使用事件委托：使用事件委托减少事件处理器的数量。
- 避免长任务：将长任务分解为多个小任务，使用
requestIdleCallback或setTimeout避免阻塞主线程。
8. 优化CSS
- 避免使用@import：
@import会阻塞CSS加载，使用<link>标签代替。 - 减少CSS选择器复杂度：简化CSS选择器，减少浏览器匹配时间。
- 使用Flexbox和Grid布局：使用现代布局技术减少布局计算时间。
9. 使用Web Workers
- 后台任务处理：将复杂的计算任务放到Web Workers中执行，避免阻塞主线程。
10. 监控和分析
- 使用性能分析工具：使用Chrome DevTools、Lighthouse等工具分析页面性能。
- 监控真实用户性能：使用RUM（Real User Monitoring）工具监控真实用户的性能数据。
11. 优化字体加载
- 使用
font-display：通过font-display属性控制字体加载行为，避免文本闪烁。 - 预加载字体：使用
<link rel="preload">预加载关键字体。
12. 减少第三方脚本的影响
- 延迟加载第三方脚本：将非关键的第三方脚本延迟加载，避免阻塞页面渲染。
- 使用异步加载：使用
async或defer属性异步加载第三方脚本。
13. 优化首屏加载
- 关键CSS内联：将首屏所需的CSS内联到HTML中，避免阻塞渲染。
- 骨架屏：使用骨架屏提升用户感知性能。
14. 使用HTTP/2
- 多路复用：HTTP/2支持多路复用，减少连接数，提升加载速度。
- 服务器推送：利用HTTP/2的服务器推送功能，提前推送关键资源。
15. 优化Webpack打包
- 代码分割：使用
SplitChunksPlugin进行代码分割，按需加载。 - Tree Shaking：移除未使用的代码，减少打包体积。
- 压缩代码：使用
TerserPlugin压缩JavaScript代码。
16. 使用PWA
- 渐进式Web应用（PWA） ：通过Service Worker和Web App Manifest实现离线访问和快速加载。
17. 优化动画
- 使用
requestAnimationFrame：使用requestAnimationFrame代替setTimeout或setInterval实现动画。 - 避免布局抖动：避免在动画中频繁修改布局属性，减少重绘和回流。
18. 优化Web字体
- 子集化字体：只加载需要的字符集，减少字体文件大小。
- 使用
font-display: swap：确保文本在字体加载完成前可读。
19. 减少JavaScript库的使用
- 按需引入：只引入需要的库或模块，避免引入整个库。
- 使用轻量级替代品：选择轻量级的库或框架，减少不必要的开销。
20. 优化SEO
- 提升页面加载速度：页面加载速度是SEO的重要指标之一。
- 使用结构化数据：通过结构化数据提升搜索引擎对页面的理解。
通过以上策略，可以显著提升前端性能，改善用户体验。
