zoukankan      html  css  js  c++  java
  • 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)元素,则不会包含它。

  • 相关阅读:
    QQ企业通--客户端登陆模块设计---知识点2
    C# Show()与ShowDialog()的区别-----转载
    docker入门学习
    人生感悟
    mysql权限管理命令
    JAVA程序员工作常用英语(细心整理)
    spring知识梳理
    快速搭建MHA
    MySQL Performance Schema都建议开启哪些监控采集指标(除了默认自动开启的指标)
    慢SQL引发MySQL高可用切换排查全过程
  • 原文地址:https://www.cnblogs.com/aisiqi-love/p/12858827.html
Copyright © 2011-2022 走看看