前端性能优化实用方案

xiaoniueyeye
·发布于 10 个月前

前端性能优化实用方案

优化指标

首屏速度，白屏时间

操作速度，渲染速度

白屏时间：资源加载时间，首屏js执行

渲染页面：首屏数据请求，DOM渲染

首屏速度可以做的操作

  • 收效很大的操作

    1.减少首屏资源体积（打包工具的压缩（Webpack，vite），异步加载（体积大但又不是马上需要的功能，比如图片压缩的功能，需要的库很大，只有在上传图片时才用），更新为体积更小的新版本（老项目常用，比如tree-shaking的新版本库），能不用第三方库就不用第三方库（代码体积大），编写代码尽量减少体积，去除大的base64体积（大的媒体文件））最大效果

  • 收效不大或者特殊情况的优化操作

    1.首屏数据尽量并行，如果可行让小数据接口合并到其他接口

    2.页面包含大量dom可以分批随滚动渲染

    3.骨架屏，loading遮罩，先让屏幕不白，减少用户焦虑

操作速度和渲染速度优化

  • 什么情况下会造成操作卡顿和渲染慢？

    1.一次性操作了大量dom（长列表渲染和异步渲染）

    2.进行复杂度很高的运算（常见于循环）

    3.vue和react项目中，不必要的渲染太多（React需人工干预性能优化，Vue中有依赖收集，配合上vue3的静态节点标记）

    Vue参考：

    1.频繁切换的显隐的内容用v-show也就是display来控制隐藏，只有打开就一次性决定显示与否的用v-if不去创建

    2.循环，动态切换内容好加key值

    3.keep-alive缓存

    4.区分请求粒度，减少请求范围，也能减少更新

数据缓存

  • 不变数据，定期时效可以缓存在cookies或者localstorage中，比如token，用户名等
  • 可以考虑做一个缓存队列，存于内存中（全局对象，vuex）。这样能保证刷新就更新数据，也能一定程度上缓存数据
前端
面试
$ cd ..