前端性能优化一篇搞定【面试题】

衡量网页的性能是一个比较琐碎的事情，因为没有某一个指标或数字可以直接告诉我们网页的性能怎样。优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。

简短的概括：

1. 前端性能优化
2. 前端性能监控
3. 框架性能优化

正文从这里开始~~~

一、前端性能优化

• 文件加载的更少

1. 缓存，CDN （详细资料：解析Web缓存及其最佳实践）
2. 图片优化
3. 静态问件优化
4. 浏览器优化
5. 文件合并压缩等常规操作

• 代码执行的更少

  1）节流防抖 （详细资料：彻底弄懂 “ 防抖 和 节流 ）
  2）按需执行
  3）回流重绘
  4）框架优化（如vue3的静态标记）
  5）html、css、javascript

二、前端性能监控
1、前端性能指标分析
2、关键性能指标统计
3、性能分析工具、

三、框架性能优化
1、Vue性能优化
2、长列表优化
3、用户体验优化

详细如下：

1）编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher；
• 如果需要使用v-for给每项元素绑定事件时使用事件代理；
• SPA 页面采用keep-alive缓存组件；
• 在更多的情况下，使用v-if替代v-show；
• key保证唯一；
• 使用路由懒加载、异步组件；
• 防抖、节流；
• 第三方模块按需导入；
• 长列表滚动到可视区域动态加载；
• 图片懒加载；

2）用户体验：

• 骨架屏；
• PWA；
• 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

3）SEO优化

• 预渲染；
• 服务端渲染SSR；

4）打包优化

• 压缩代码；
• Tree Shaking/Scope Hoisting；
• 使用cdn加载第三方模块；
• 多线程打包happypack；
• splitChunks抽离公共文件；
• sourceMap优化；