• 虚拟dom是什么?为什么虚拟dom会提升代码性能?


    虚拟dom(virtual dom) 是 JS对象
    虚拟dom就是一个真实dom的JS对象,很像 AST 抽象语法树的概念
    以前没有虚拟dom,如果需要比较两个页面的差异,我们需要通过对真实dom进行比对。
    真实dom节点是非常复杂的,它里面会绑定的事件,它会有属性,背后会有各种方法,所有两个真实dom比对,非常耗性能。
    于是将dom对象变成了JS对象,JS对象就没有乱七八糟的dom身上的特性。
    单纯的比较JS对象就比较快,有效的提高了react的性能。测试两个dom通过递归方法进行比对,结果很慢。

    如果 key 值相同 dom 就可以直接复用了,就不用重新创建dom了。
    而且只要key相同,就这两个进行比,不需要循环进行比较。

    diff 算法,如果一层节点发现有问题,就不在往下比了,同层比对,该放弃就放弃,将算法复杂度,从平方降到了n,降了一个维度。
     
    注:
    我们常用的浏览器就是通过将js代码转化为抽象语法树来进行下一步的分析等其他操作。所以将js转化为抽象语法树更利于程序的分析。
    如图:

    如上图中的变量声明语句,转化为AST之后就是右图的样子。

    先来分析一下左图:

    var 是一个关键字
    
    AST是一个定义者
    
    = 是Equal 等号的叫法有很多形式,在后面我们还会看到
    
    “is tree” 是一个字符串
    
    ;就是 Semicoion

    再来对应一下右图:

    首先一段代码转化成的抽象语法树是一个对象,该对象会有一个顶级的type属性'Program',第二个属性是body是一个数组。

    body数组中存放的每一项都是一个对象,里面包含了所有的对于该语句的描述信息

    type:描述该语句的类型 --变量声明语句
    kind:变量声明的关键字 -- var
    declaration: 声明的内容数组,里面的每一项也是一个对象
        type: 描述该语句的类型 
        id: 描述变量名称的对象
            type:定义
            name: 是变量的名字
        init: 初始化变量值得对象
            type: 类型
            value: 值 "is tree" 不带引号
            row: ""is tree"" 带引号
    

    .

  • 相关阅读:
    Linux入门
    Linux和VMware
    vue中select的使用以及select设置默认选中
    Django ModelFrom组件
    Django登录(含随机生成图片验证码)注册实例
    Django组件---Django请求生命周期和中间件
    Python3之使用Crypto
    ORM大结局
    ORM多表查询下
    Pycharn破解补丁激活
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12109695.html
Copyright © 2020-2023  润新知