0
点赞
收藏
分享

微信扫一扫

性能优化(vue)

先峰老师 2022-04-08 阅读 59

函数式组件

Non-reactive data 非响应式数据 我们在组件中定义的一些数据,也不一定都要在 data 中定义。有些数据我们并不是用在模板中,也不需要监听它的变化,只是想在组件的上下文中共享这个数据,这个时候我们可以仅仅把这个数据挂载到组件实例 this 上。

Deferred 组件延时分批渲染组件 对于渲染耗时的组件,使用 Deferred 做渐进式渲染是不错的注意,它能避免一次 render 由于 JS 执行时间过长导致渲染卡住的现象。

全局变量尽量少用

减少http请求,使用http2

事件委托

v-active空间换时间

利用v-if和v-show减少初始化渲染和切换渲染的性能开销

computed、watch、methods区分使用场景

  • 一个数据受多个数据影响的。
  • 该数据要经过性能开销比较大的计算,如它需要遍历一个巨大的数组并做大量的计算才能得到,这时就可以利用computed的缓存特性,只有它计算时依赖的数据发现变化时才会重新计算,否则直接返回缓存值。
  • 一个数据影响多个数据的。
  • 当数据变化时,需要执行异步或开销较大的操作时
  • 希望数据是实时更新,不需要缓存。

提前处理好数据解决v-if和v-for必须同级的问题

给v-for循环项加上key提高diff计算速度,

经过旧头新头、旧尾新尾、旧头新尾、旧尾新头四次交叉比对后,都没有匹配到值得比对的节点,这时如果新节点有key的话。可以通过map直接获得值得对比的旧节点的下标,如果没有key的话,就要通过循环旧节点数组用sameVnode方法判断新节点和该旧节点是否值得比较,值得就返回该旧节点的下标。显然通过map比通过循环数组的计算速度来的快。

利用Object.freeze()冻结不需要响应式变化的数据

提前过滤掉非必须数据,优化data选项中的数据结构,

接收服务端传来的数据,都会有一些渲染页面时用不到的数据。所以要先把服务端传来的数据中那些渲染页面用不到的数据先过滤掉。然后再赋值到data选项中。可以避免去劫持那些非渲染页面需要的数据,减少循环和递归调用,从而提高渲染速度。

节流和防抖:在用Vue Cli脚手架搭建的Vue项目中,可以通过引用Lodash工具库里面的debounce防抖函数和throttle节流函数。

组件库按需导入

图片压缩,懒加载

路由懒加载

识别gzip压缩是否开启,响应头部(Response headers)中 有没有Content-Encoding: gzip这个属性即可,有代表有开启gzip压缩。在Nginx,Webpack上开启gzip压缩

webpack一些插件实现打包的优化。

 

举报

相关推荐

0 条评论