zoukankan      html  css  js  c++  java
  • 虚拟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"" 带引号
    

    .

  • 相关阅读:
    Discuz!NT代码阅读笔记(4)一切皆可配置:页面的显示
    WAP网站开发

    Discuz!NT代码阅读笔记(2)网站安装自动化论坛程序安装及初始化过程
    Discuz!NT代码阅读笔记(1)从HttpModule开始
    c#使用Transactions类完成多个数据库的事务操作(分布式事务处理)
    自我介绍 简历
    Discuz!NT 系统架构分析
    缓存应用Memcached分布式缓存简介(二)
    数组类型EDT的元素个数
  • 原文地址:https://www.cnblogs.com/crazycode2/p/12109695.html
Copyright © 2011-2022 走看看