• vue3.0中的性能优化


     

    1.重写虚拟DOM (Virtual DOM Rewrite)

    vue3.0将 vdom 更新性能由与模版整体大小相关提升为与动态内容的数量相关

    2.优化插槽生成(Optimized Slots Generation)

    在当前的 Vue 版本中,当父组件重新渲染时,其子组件也必须重新渲染。 使用 Vue 3 ,可以单独重新渲染父组件和子组件。

    3.静态树提升(Static Tree Hoisting)

    使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态组件,然后将其提升,从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

      

    4.静态属性提升(Static Props Hoisting)

     Vue 3 将跳过不会改变节点的打补丁过程。

    5.基于 Proxy 的观察者机制

    Object.defineProperty是一个相对比较昂贵的操作,因为它直接操作对象的属性,颗粒度比较小。将它替换为es6的Proxy,在目标对象之上架了一层拦截,代理的是对象而不是对象的属性。这样可以将原本对对象属性的操作变为对整个对象的操作,颗粒度变大。

    javascript引擎在解析的时候希望对象的结构越稳定越好,如果对象一直在变,可优化性降低,proxy不需要对原始对象做太多操作。

    6.使 Vue 更小(Tree Shaking)

    Vue已经非常小了,在运行时(runtime)压缩后大约 20kb 。 但我们可以期待它会变得更加小,新的核心运行时压缩后大概 10kb 。 这将在很大程度上通过消除不使用的库(也称为Tree Shaking)来实现。 例如,如果您没有使用 过渡(transition)元素,则不会包含它。

  • 相关阅读:
    iOS系统中XML&JSON解析的代码实现
    ViewController之间如何传值
    如何归档自定义对象的数组
    一个小问题
    阶段性总结
    c语言以二进制的方式向文件读写一组数据
    C语言复杂声明,指针的复杂用法
    C语言中的getchar和putchar
    C语言结构体
    常量指针 和 指针常量
  • 原文地址:https://www.cnblogs.com/aisiqi-love/p/12858827.html
Copyright © 2020-2023  润新知