性能优化清单

biu_biu_biu
187 阅读4分钟

[TOP]

流量

  • 请求个数
  • 单个请求大小
  • 无重复请求
  • 缓存
  • 懒加载
  • 首屏总流量，区分園片与非图片请求

首屏速度

  • 进程和webview初始化牦时
  • 内容可贝
  • 可交互
  • 首页包括图片全部加载完毕

流畅度

  • FPS直观数据
  • 呴应速度
    • Js执行耗时
    • 调用客户端接口耗时
    • 网络资源拉取耗时
    • 渲染绘制耗时
  • 内存
    • 内存占用合理
    • 无内存泄漏
  • 弱网络
    • 无阻塞摞作
    • 资源抗取耗时（与流量正相关）

cpu/电量

  • 无元余网络请求，不适合轮询
  • 页面重绘
  • js执行Cpu消耗
  • canvas动画或者富媒体

vue性能优化清单

v-if与v-show

对于需要频繁切换的视图来说，使用v-show比v-if更加节约性能。因为v-show可以避免 DOM 节点的销毁和重建。v-show相当于css中display属性，v-if是切换DOM节点的 所以运行时很少改变条件时使用v-if，频繁切换的时候用v-show

v-for

  • v-for 为item添加key
  • v-for 避免同时使用v-if（v-for比v-if优先级高，每一次都要遍历整个数组，会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况换成computed属性）

computed与watch

  • 依赖数据，并可基于依赖计算返回值时使用computed （computed具备缓存）
  • 观察数据变化进行回调操作使用watch

长列表优化

对于无限长列表来说，目前我这边查找到性能优化主要方法是保持仅渲染可视化部分。也就是使用 object.freeze 来冻结不需要监听的列表数据。参考使用：vue-virtual-scroller 组件

事件销毁

  • 如果手动添加了addEventListener,记得在组件销毁时手动移除事件的监听

函数型组件

由于组件的生命周期处理在框架层面上十分耗时，所以，建议平常尽量使用函数型组件。这样，可以避免不必要的性能损失。只要在模板上声明 functional 属性，就可以实现函数式组件了：

//子组件
<template>
    <div>
        <header>
          <h1>I'm a template!</h1>
        </header>
        <p v-if="props.materialtype">{{ message }}</p>
        <p v-else>No message.</p>
    </div>
</template>
<script>
export default {
  name: 'App',
  data:{
      message:''
  },
  props: {
    materialtype:{
      type: String,
      value:''
    },
}
</script>

图片懒加载

路由懒加载

通过函数 + import实现 const Page404 = () => import(/* webpackChunkName: "error" */'@views/errorPage/404');

插件按需引入

SSR

  • 服务端渲染SSR，vue使用nuxt.js，

以后我有新的就会持续更新的～～如遇到其他的性能优化相关知识可以联系我及时更新，欢迎大家多多互动啦～～～

webpack优化

  1. cache-loader, 在rules中给加载速度久的文件，如js文件加上cache-loader之后，可以让打包速度有所提升，缩减到5分钟，但还是不够快，而且这个loader本身开启也需要花费时间。

  2. 持久化缓存，继续寻找 webpack打包缓存的问题，再一通抄作业后，发现加入持久化缓存的配置，能达到比较好的效果，打包明显加快！如果不更改webpack配置，第二次打包只有10秒， 是10min变从10秒，就是这么强大！而且热更新也会加快！配置贴出来，webpack中cache的type类型换成filesystem，并指定路径即可。

    图片

  3. 发版上传优化，也就是发布文件到cdn，这块做了两个优化，一是静态文件抽离，资源较大且更改频率低的文件，如assets下的图片，动画等，单纯拆出来写脚本上传，那么每次打包上传只需要更新变化较多的js和css文件，二是开发环境更换国内云服务器存储桶（这个因“司”而异，因为我们公司业务是海外），也可以加速上传。

  4. externals，将需要引用的比较大的第三方库抽离，不要直接打进包里，加快首屏加载速度，等到需要的时候再去请求。

ps：以下vue性能优化技巧部分是网上百度的，忘记是参考哪位大神的，如有遇到是自己是自己总结的，联系我，我这边会备注文章来源出入的

  • 网络优化：http2、dns 预解析、使用 CDN
  • 图片优化：压缩、懒加载、雪碧图
  • 体积优化：分包、tree shaking、压缩、模块外置
  • 加载优化：延迟加载、骨架屏
avatar
文章
阅读
粉丝