zoukankan      html  css  js  c++  java
  • 06-大数据性能优化- 长列表优化 /Object.preventExtiensions()

    (1)列表优化  

    (2)大型表单优化

    (3)表格优化


     渲染了四个下拉数都为1000条数据的下拉框:

    用调试工具查看性能:(下图中的紫颜色的是在渲染,黄色的是JS在运算执行)

     渲染了1000条的li标签,这样肯定是不好的,解决:

    我们用一个长列表优化插件:

    npm i vue -virtual-scroll-list

     

     组件内使用:

    1.引入和注册:

     2.template中包裹原来的下拉框

     

     看效果:他的原理是。计算你全部条数的高度,然后他把实际渲染的DOM的高度减去,去均给上下padding,padding就作为了这个大盒子的填充高度,所以你就可以不断滚动


     同样在渲染多个checkbox的时候也可以包裹起来,简而言之,就是这个虚拟滚动组件的用法就是包裹循环体


     二、大型表单优化:

     原理就是把所有数据扔在一个组件(formGroup这个组件),当数据发生变化的时候,触发数据劫持,一个变,所有都要重新渲染。

    所以解决方法就是把他们分开渲染,别一股脑全部扔在一起,一个变了其他都得跟着重新检测,虽然有diff算法,但比较过程也需要花时间呀

    大体思路就是不把全部数据扔给一个组件内部去循环,否则就如上面说的,牵一发动全身,我们把原来的组件就变成一个单独的表单组件。

    在父组件中去循环多个单独的表单组件,这样就解耦了,因为每个组件都是单独的作用域,一个变了波及的也就你这个组件的数据。

     就这~


    大数据量表格优化:就是表格中的无限滚动,类似长列表

    github中搜索 vue-bigdata-table  


     密封对象:是一个ES5的方法:阻止对象扩展,让一个对象变的不可扩展,也就是永远不能再添加新的属性,可以删除原有属性和修改原有属性(能删能改,不能加)

    Object.preventExtensions()

     vue会检测你这个对象,如果是密封起来的,就不会给你增加getter setter操作了,如果数据大的话,就不会有再有数据劫持上的性能开销。 因为如果数据量很大的话,data里稍微一个数组修改,就会影响全部数据的更新。

    但是密封起来又有一个问题:

    可能一些计算属性类的就会失效了,所以一些视图的更新也就失效了,所以计算属性可以自己把手动的把一些值修改(set方法),修改完成呢,视图需要更新呀,调用vue中的this.$forceUpdate()去触发视图更新。

    其实这也扩展出来了$forceUpdate的用途:

    就是当数据没有被数据劫持,无法响应式的时候,比如被密封了(冻结比密封还要严重,冻结你就改不了本身有的属性),但是computed中又是根据这个值去生成了一个新值,这个值已经没有响应式了,生成的新值自然也就没有响应式,没有响应式就不会触发视图更新,所以就需要计算属性调用自己的set方法,然后再手动用$forceUpdate更新视图。

     Object.frezee的区别,传送门 

  • 相关阅读:
    C++:delete和delete[]释放内存的区别
    C++:四种必须使用初始化列表情况
    C++:获取数组长度
    C++:构造函数默认的参数声明
    java 的开源wiki维基系统
    openfire 最大连接数调优
    即时通讯服务器的对比
    分分钟带你玩转 Web Services
    让git忽略ignore所有文件,只对某些文件进行版本控制
    miracast 协议wifi display
  • 原文地址:https://www.cnblogs.com/haoqiyouyu/p/14730877.html
Copyright © 2011-2022 走看看