前端优化
Jonathan / 2019-05-09 / 教程 / 阅读量 606

Object.freeze

这算是一个性能优化的小技巧吧。在我们遇到一些 big data的业务场景,它就很有用了。尤其是做管理后台的时候,经常会有一些超大数据量的 table,或者一个含有 n 多数据的图表,这种数据量很大的东西使用起来最明显的感受就是卡。但其实很多时候其实这些数据其实并不需要响应式变化,这时候你就可以使用 Object.freeze 方法了,它可以冻结一个对象(注意它不并是 vue 特有的 api)。
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter,它们让 Vue 能进行追踪依赖,在属性被访问和修改时通知变化。
使用了 Object.freeze 之后,不仅可以减少 observer 的开销,还能减少不少内存开销。相关 issue。
使用方式:this.item = Object.freeze(Object.assign({}, this.item))
这里我提供了一个在线测速 demo,点我。
通过测速可以发现正常情况下1000 x 10 rerender 都稳定在 1000ms-2000ms 之间,而开启了Object.freeze的情况下,rerender 都稳住在 100ms-200ms 之间。有接近 10 倍的差距。所以能确定不需要变化检测的情况下,big data 还是要优化一下的。

sass 将变量给 js

还是那前面那个换肤来举例子,我们页面初始化的时候,总需要一个默认主题色吧,假设我们在 var.scss中声明了一个 theme:blue,我们在 js 中该怎么获取这个变量呢?我们可以通过 css-modules :export来实现。更具体的解释-How to Share Variables Between Javascript and Sass

    // var.scss
    $theme: blue;

    :export {
      theme: $theme;
    }
    // test.js
    import variables from '@/styles/var.scss'
    console.log(variables.theme) // blue

当 js 和 css 共享一个变量的时候这个方案还是很实用的。vue-element-admin 中的侧边栏的宽度,颜色等等变量都是通过这种方案来实现共享的。
其它换肤方案可以参考 聊一聊前端换肤

作者:花裤衩
链接:https://juejin.im/post/5c92ff94f265da6128275a85
来源:掘金
支付宝捐赠
请使用支付宝扫一扫进行捐赠
微信捐赠
请使用微信扫一扫进行赞赏