137 lines
5.2 KiB
Markdown
137 lines
5.2 KiB
Markdown
# Vue项目性能优化
|
||
|
||
>面试题1：你平时开发 Vue 项目时，做了哪些性能上的优化？
|
||
|
||
1. 代码层面优化
|
||
2. 场景优化
|
||
3. 静态资源优化
|
||
4. 打包优化
|
||
5. 用户体验优化
|
||
|
||
**代码层面优化**
|
||
|
||
1. 组件拆分
|
||
2. 减少不必要的响应式数据
|
||
3. 正确使用 v-if 和 v-show
|
||
4. 根据场景可以选择使用 v-once
|
||
5. 使用 key 优化列表渲染
|
||
6. 事件防抖和节流
|
||
7. 使用 KeepAlive 缓存组件
|
||
8. 合理使用生命周期钩子方法
|
||
9. 使用异步组件
|
||
10. 路由懒加载
|
||
|
||
**场景优化**
|
||
|
||
1. 懒加载
|
||
2. 虚拟滚动
|
||
3. .....
|
||
|
||
**静态资源优化**
|
||
|
||
1. 图片优化
|
||
- 压缩图片
|
||
- 使用现代图片格式：WebP、AVIF
|
||
2. 使用SVG图标
|
||
1. 精灵图
|
||
2. 字体图标
|
||
3. SVG图标
|
||
3. 压缩 CSS 和 JS 文件
|
||
- Terser、UglifyJS、cssnano
|
||
4. 合并文件
|
||
5. 使用CDN加速
|
||
|
||
**打包优化**
|
||
|
||
1. tree sharking
|
||
2. 多线程打包
|
||
- webpack 插件：thread-loader
|
||
3. 代码分块：主要是为了实现按需加载
|
||
4. 生成sourcemap文件
|
||
5. 优化第三方库的打包：按需打包
|
||
6. 使用现代构建工具
|
||
|
||
**用户体验优化**
|
||
|
||
记住，一切的优化，最终目的是为了给用户提供更好的使用体验。
|
||
|
||
1. 加载动画
|
||
2. 骨架屏
|
||
3. 过渡动画
|
||
4. 服务端渲染
|
||
|
||
|
||
|
||
>面试题1：你平时开发 Vue 项目时，做了哪些性能上的优化？
|
||
>
|
||
>参考答案：
|
||
>
|
||
>这取决于我当前处于哪一个阶段，不同阶段所做的事情不太一样。假设当前处于编码阶段，那么有这么一些优化的地方：
|
||
>
|
||
>- 组件拆分
|
||
>- v-if 和 v-show 的正确使用
|
||
>- 使用 v-once 指令
|
||
>- 使用 key 优化列表渲染
|
||
>- 缓存组件
|
||
>- 使用异步组件
|
||
>- 路由懒加载
|
||
>- ....
|
||
>
|
||
>另外看我具体开发的项目是什么，如果遇到有长列表的场景，那么可以使用虚拟列表来提升长列表性能。静态资源往往占据了较大的带宽和加载时间。因此，对静态资源进行优化是提高页面性能的一个重要方面，例如可以做：
|
||
>
|
||
>- 图片的压缩
|
||
>- 图标采用 SVG 图标
|
||
>- 一些比较大的第三方库选择不打包到最后的项目里面，而是采用 CDN 的方式加载
|
||
>
|
||
>刚才说到项目打包，打包时也有具体的优化措施，例如：
|
||
>
|
||
>- Tree Sharking
|
||
>- 多线程打包
|
||
>- 代码分块
|
||
>- ....
|
||
>
|
||
>最后我想说一下，其实所做的一切的一切性能优化，最终目的其实只有一个，就是给用户更好的用户体验。所以在用户体验上面我也会额外的用心，采取一些优化措施提升用户的使用观感，例如：
|
||
>
|
||
>- 骨架屏
|
||
>- 过渡动画
|
||
>- ....
|
||
|
||
|
||
|
||
|
||
|
||
> 面试题2：在优化前端性能方面，你通常会采取哪些措施？
|
||
|
||
1. 发现问题：需要具体的数据来做支撑，确定问题确实存在。
|
||
2. 确定问题：确定是哪一个方面的问题？前端？网路？服务端问题？数据库？
|
||
3. 解决问题：确定了是前端的问题之后，再根据具体的问题给出具体的解决方案
|
||
|
||
>面试题2：在优化前端性能方面，你通常会采取哪些措施？
|
||
>
|
||
>参考答案：
|
||
>
|
||
>首先我不会着急就去做相关的性能优化，第一步我会做的是确认问题是否存在，因为每个人的感官是不一样的，一个人拿着 3G 网络的手机使用我的应用，回头给我反馈应用打开速度慢，那这绝对不是我们这边的问题。因此第一步就是用一些有效的工具和数据来确认是否真的存在性能问题。
|
||
>
|
||
>- 性能监控工具：使用 Lighthouse、Chrome DevTools、WebPageTest 等工具来评估页面性能，获取页面的加载时间、资源请求时间、渲染速度等具体数据。
|
||
>- 用户数据埋点：通过埋点监控用户的实际使用情况，如页面加载时间、交互响应时间、长任务（Long Tasks）等。分析这些数据，确定用户体验的瓶颈。
|
||
>
|
||
>那确定确实存在性能问题的时候，接下来下一步是确定问题来源，因为一个 Web 应用是由多个部分组成的，自然性能问题也可能来自于多个方面：
|
||
>
|
||
>- 前端问题：可能是由于大文件加载、DOM 操作频繁、动画性能差等造成的。
|
||
>- 网络问题：可能是由于服务器响应慢、带宽不足、DNS 查询耗时、网络延迟高等。
|
||
>- 服务器端问题：服务器性能瓶颈、数据库查询缓慢、缓存失效等问题。
|
||
>- 数据库问题：数据库索引不当、查询性能差、数据传输量大等。
|
||
>
|
||
>前端这一块儿的话，可以使用浏览器的 Performance 面板、网络请求分析工具，以及服务器端的日志和监控工具，找出性能瓶颈的具体位置。之后确定了是前端存在的性能问题后，再进行针对性的优化。这一步应该根据具体的瓶颈采取不同的优化策略：
|
||
>
|
||
>- 网络请求过多：减少 HTTP 请求，合并 CSS 和 JS 文件，使用 CSS 精灵图或 SVG 图标，或者使用 HTTP/2 多路复用技术。
|
||
>- 静态资源太大：做资源压缩和优化，压缩 JS、CSS、图片等资源，使用 WebP 等高效图片格式。
|
||
>- 初始加载资源过多：按需加载 JS 和 CSS，使用动态 import 分割代码，使用异步组件以及路由懒加载
|
||
>- 渲染性能瓶颈：减少重排重绘次数。
|
||
>- ....
|
||
>
|
||
>这就是我平时在解决性能问题时的一个思考路径。
|
||
|
||
---
|
||
|
||
-EOF- |