加速vue组件渲染之性能优化

时间: 2020-02-07阅读: 793标签: 优化

背景

平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:

export default {
    data(){
        return {
            tableTitle:[
                {
                    label:'省份',
                    prop:'prop'
                },
                {
                    label:'城市',
                    prop:'prop'
                },
                {
                    label:'汇总',
                    prop:'prop',
                    colconfig:[
                        {
                            label:'下级',
                            prop:'prop'
                        }
                    ]
                }
                ...
            ]
        }
    }
}

此时如果table字段比较多而且是多表头这种的话,数据结构就比较复杂,如果直接写在data里面的话,会在组件初始化时候,对此对象进行递归重写get set属性,源码如下:

function definereactive(obj,key,val) {
  var dep = new Dep();
  var property = Object.getOwnPropertyDescriptor(obj, key);
  //如果对象被冻结,则直接跳出,不重写 get set方法
  if (property && property.configurable === false) {
    return
  }
  //observe会递归调用definereactive,去重写对象内层的get set属性
  var childOb = !shallow && observe(val);
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
    },
    set: function reactiveSetter (newVal) {
    }
  });
}

然而这种静态数据是不需要动态响应的,这样势必会造浪性能浪费,于是我们想办法避免这种不必要的性能浪费。


方案1

此时我们可以用Object.freeze()这个方法对此数据进行冻结,vue组件在对data里的属性拦截时,会判断出被冻结的对象是不可被修改的【如上代码注释】,会直接跳过 get set的操作,这样便可以降低vue组件的render时间,提升页面性能

export default {

data(){
return {
tableTitle:Object.freeze(objConfig)
}
}
}


方案2

把我们不需要动态响应的数据,在created的生命周期里面去定义,这样vue底层就不会拦截到这个属性了

export default {
    created(){
        this.tableTitle = [xxxxx]
    }
}


总结

其实这种场景在开发中经常遇到,比如查询条件有很多selectlist字段,我们也可以把它封装到一个大json里面,然后对其进行避免重写属性,可以降低不少性能开销

原文:https://segmentfault.com/a/1190000022308316

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/8542

js的防抖节流优化高频触发

js的防抖就是比如一个水龙头坏了一直在滴水,我们为了节约用水,那么我们会想办法让他不再滴的那么快,这就是防抖。常见的比如scroll,onresize这些高频触发的情况。

Vue代码优化之mixins 混合器的使用

主要抽离组件共用的代码,如各个页面中分页组件的data、methods,和ui原型中统一的confirm和alert弹窗以及加载的进度条等

vue-cli3.0 日常优化

使用cdn资源主要是为了减小打包文件体积,项目自动引入 第三方插件样式 去掉 使用cdn引入样式,定义文件夹的缩写路径,移除打包后文件的预加载prefetch/preload

前端的性能优化(针对内容方面)

尽量减少HTTP请求数,80%的终端用户响应时间都花在了前端上,减少DNS查找,避免重定向 重定向用301和302状态码,下面是一个有301状态码的HTTP头:

如何设置网站的robots.txt?

做过网站优化的朋友都知道,搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件,如果robots文件存在,则会根据robots文件内设置的规则进行爬行抓取,如果文件不存在则会顺着首页进行抓取,那么robots文件的工作原理是什么呢?

webpack构建速度常规优化方法

使用webpack.DllPlugin优化,其实并没有优化速度,只是把一些不需要经常变更的部分提前构建,之后只需要构建变更的部分就可以了,确实优化了时间,使用external,不构建基础脚本,使用外部脚本引入,确实减少了时间

Node学习笔记:优化crud增删改查

在安装过程中需要特别注意,需要将 Install MongoDB Compass 前默认的勾选取消,可以使用 mongod --version 命令查看 MongoDB 版本,若版本号输出正常则安装完毕

网站打开速度优化_如何提高网页访问速度技巧方法总结

网站的加载速度不仅影响着用户体验,也会影响搜索引擎的排名,在百度推出“闪电算法”以来,将网站首屏打开速度被列入优化排名行列,作为前端开发的我们需要如果来优化网站的打开速度呢?下面就整理挖掘出很多细节上可以提升性能的东西分享给大家

Javascript代码优化的8个知识点

本篇文章给大家分享了关Javascript代码优化的8点总结,希望我整理的内容能够帮助到大家。写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。

从4个方面优化你的Vue项目

运行时优化:1、使用v-if代替v-show,2、v-for必须加上key,并避免同时使用v-if,3、事件及时销毁。首屏优化:1、图片裁剪、使用webp,2、资源提前请求,3、异步路由,4、异步组件,5、使用轻量级插件、异步插件

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!