zoukankan      html  css  js  c++  java
  • 探究虚拟dom与diff算法

    一、虚拟DOM

    (1)什么是虚拟DOM?

    vdom可以看作是一个使用javascript模拟了DOM结构的树形结构,这个树结构包含整个DOM结构的信息,如下图:

     

    可见左边的DOM结构,不论是标签名称还是标签的属性或标签的子集,都会对应在右边的树结构里。

    (2)为什么要使用虚拟DOM?

    因为在以前使用原生js写页面的时候会发现操作DOM是一件非常麻烦的一件事情,往往是DOM标签和js逻辑同时写在js文件里,数据交互时不时还要写很多的input隐藏域,如果没有好的代码规范的话会显得代码非常冗余混乱,耦合性高并且难以维护。

    另外一方面在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的,常常会出现页面卡死的情况;所以尽量减少对DOM的操作成为了优化前端性能的必要手段,vdom就是将DOM的对比放在了js层,通过对比不同之处来选择新渲染DOM节点,从而提高渲染效率。

    diff算法

    抽象概念

    diff是广泛的概念,如git diff,js对象 diff等。两棵树做diff,即虚拟DOM中的diff算法。

    diff算法的必要性:渲染真实DOM的开销是很大的,轻微的操作都可能导致页面重新排版,非常耗性能。 相对于DOM对象,js对象处理起来更快,而且更简单。 通过diff算法对比新旧vdom之间的差异,可以批量的、最小化的执行 dom操作,从而提高性能。

    1. 只比较同一层级。

    2.tag不相同,直接删掉重建。

    3.通过key来标识区分相同节点。

  • 相关阅读:
    Mysql基本类型(字符串类型)——mysql之二
    MySQL 中索引的长度的限制
    MySQL索引长度限制
    WebStorm 2019 3.3 安装及破解教程附汉化教程 Jetbrains2020全系列 2020.1.2 最新激活补丁
    用Swoole4 打造高并发的PHP协程Mysql连接池
    phpsocket.io
    php并发加锁
    PHP字符串全排列算法
    php beast windows编译教程
    使用PHP-Beast加密你的PHP源代码
  • 原文地址:https://www.cnblogs.com/LcxWeb/p/14180594.html
Copyright © 2011-2022 走看看