2025前端最新面试题-优化篇
核心思想
原则
多使用内存、缓存, 减少计算、减少网络请求
方向
加载页面, 页面渲染, 页面操作流畅度
1. Vue 中的性能优化？
编码方面：
- 不需要渲染到视图的数据，不要定义成响应式数，这样可以减少 Vue 监听性能消耗
- v-if 与 v-for 不要连用，将
v-if提高到更外一层 - v-for 每项元素绑定事件时，使用事件代理
- v-for 时，key 要唯一
- 根据项目情况，合理使用 懒加载、防抖节流、动态加载
SEO 优化：
- 服务端 SSR
打包优化：
- 压缩代码
- 资源合并，压缩
- sourceMap 优化
用户体验：
- 骨架屏
- 先加载主要数据，一些需要操作的数据可以等用到了再加载
- 使用缓存，把一些变化不大的数据，先进行缓存，以提升页面加载速度
2. Uniapp 中的性能优化？
缓存大型图表信息，采用本地缓存，本地缓存无法直接存储很多有限制大小，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
解决方案，采用链表存储，解决单块数据过大的问题
微信编写 swripter 卡顿，不方便，采用嵌入 web-view 的方式
3. eachrts 图表百万数据展现优化？
后端数据聚合。后端进行数据聚合，每次单个chart数据不超过2000。
前端交互、鼠标缩放、拖拽，根据时间，重新请求，整合更新数据。
降采样策略
dataZoom
4. echarts 图表问题？
微信小程序总，canvas 画布优先级高于 view，会导致 canvas 遮挡了 view
解决办法；外层用 cover-view 覆盖 canvas
5. 可视化大屏适配
- 整体自适应，适配移动端
背景：
常见大屏适配
- 按百分比设计填充满屏幕，会导致变形
- 通过缩放，会导致空白太多，也不好看
如何解决不同设备的大小变化？
整体布局采用 element Plus 栅格组件，按比例布局，分左中右三部分，之后内容部分采用 百分比继承父元素的栅格组件、字体采用 px 进行布局
如何解决页面字体大小不变，echarts 图表字体不变，导致 x 轴文字出现位置偏差？
页面字体大小问题？
因为，为了保证我们的页面与设计相差不大，所以字体大小也是设计稿的 px 来的
根据屏幕大小设置 html 的 font-size 为不同 px
再使用 postCssPxToRem 插件将 px 转为 rem，因为 rem 的特性，rem 是根据 html 的 font-size 进行变化的
只要 font-size 一变，其他字体也会变
echarts 字体问题？
因为，echarts 是一个 canvas，只支持 rem
所以，为写一个转换函数，将 rem 转为 px
监听页面大小的时候，重新渲染 echarts 图层，那么 echarts 字体也会根据 html 的 font-size 进行计算
无限滚动？
使用插件 vue-seamless-scrool 文字抖动，且出现滚动久了就卡顿
使用 requestAnimationFrame 进行渲染，解决文字抖动 与 卡顿