javascript基础修炼(10)——VirtualDOM和基本DFS

1. Virtual-DOM是什么

Virtual-DOM,即虚拟DOM树。浏览器在解析文件时,会将html文档转换为document对象,在浏览器环境中运行的脚本文件都可以获取到它,通过操作document对象暴露的接口可以直接操作页面上的DOM节点。但是DOM读写是非常耗性能的,很容易触发不必要的重绘和重排,为了更好地处理DOM操作,Virtual-DOM技术就诞生了。Virtual-DOM就是在javascript中模拟真实DOM的结构,通过数据追踪和状态对比来减少对于真实DOM的操作,以此来提高程序的效率的一种技术。

Virtual-DOM技术是前端高性能的基石,它是真实document对象的抽象,通过对比新旧Virtual-DOM的区别,找出发生变化的DOM节点,再利用算法得到相对更合理的DOM节点修改方案,最终再将方案应用在document对象上来改变页面的展示内容。

主流前端SPA框架都离不开【Virtual-DOM模型 + DOM-Diff算法 + 生命周期钩子】这样的核心模型。

2. Virtual-DOM的基本结构

在上一篇博文《javascript基础修炼(9)——MVVM中双向数据绑定的基本原理》中,我们通过document.getElementById()从真实DOM中获得了带有自定义属性的待解析结构,这里是有一些问题的,实际的过程是先解析模板字符串得到虚拟DOM树,最后生成真实的DOM树。

实际上我们在使用SPA框架时所编写的html模板,并没有被直接当做DOM片段加载到页面上使用,而是将文件当做字符串读入到程序中,然后通过解析来生成Virtual-DOM树,接着通过SPA框架的渲染函数来生成必要的片段后才生成真实的DOM节点。例如我们要生成下文示例的HTML片段(为了方便演示,示例中只涉及了类名和文本节点):

<body class="main">
   <div class="sideBar">
       <ul class="sideBarContainer">
           <li class="sideBarItem">sidebar-1</li>
           <li class="sideBarItem">sidebar-2</li>
           <li class="sideBarItem">sidebar-3</li>
       </ul>
   </div>
   <div class="mainContent">
        <div class="header">header-zone</div>
        <div class="coreContent">core-content</div>
        <div class="footer">footer-zone</div>
   </div>
   <div class="rightSide">暂未开发</div>
</body>

我们需要构建出一个简易模型来表达上面的结构:

virtualDom = {
    name:"body",
    props:{
        className:"main"
    },
    children:[{
        name:"div",
        props:{...},
        children:[...]
      },{
        name:"div",
        props:{...},
        children:[...]
      },{
        name:"div",
        props:{...},
        children:[...]
      }]
}

建立一个生成虚拟节点的辅助函数:

//构建DOM节点的辅助函数
function h(name, props, children) {
    return {
        name:name,
        props:props,
        children:children
    }
}
//手动生成virtual-DOM
var tree = h('body',{className:'main'},[
       h('div',{className:'sideBar'},[
          h('ul',{className:'sideBarContainer'},[
               h('li',{className:'sideBarItem'},['sidebar-1']),
               h('li',{className:'sideBarItem'},['sidebar-2']),
               h('li',{className:'sideBarItem'},['sidebar-3']),
            ])
        ]),
       h('div',{className:'mainContent'},[
           h('div',{className:'header'},['header-zone']),
           h('div',{className:'coreContent'},['core-content']),
           h('div',{className:'footer'},['footer-zone']),
        ]),
       h('div',{className:'rightSide'},['暂未开发'])
    ]);

通过上面的方法得到的tree对象就涵盖了模板片段中的结构和关键信息。实际开发中并不需要像上面一样手动来填写DOM结构,可以将模板字符串挂载到离线DOM节点上,然后在递归解析的同时来构建Virtual-DOM就可以了。

3. 使用DFS从Virtual-DOM生成DOM

至此我们完成了模板的编译,也得到了Virtual-DOM对象,但它似乎并没有什么用处,毕竟我们已经完成了对模板的解析,渲染出页面没什么问题,其实Virtual-DOM对于首屏来说并没有什么特别重要的意义,它的价值在模型和视图发生变化时才会体现。上一篇博文的末尾我们已经提到了更新视图时的效率问题,当数据模型发生变化后,我们需要一个方法来收集所有需要修改的DOM,并为之提供高效的修改方式(你总不能一有变化就把整个网页重新渲染,或者让数据模型各自去修改各自绑定的DOM吧)。那么为了能够收集所有DOM节点的变化,我们就需要遍历所有节点。

对数据结构和算法有一定了解的读者很容易想到,遍历解析一个Virtual-DOM实际上就是对其进行先序深度优先遍历(Pre-Order Depth-First-Search),本节中,我们先预热一下,使用这种方式来复现一下DOM结构。

function dfswalking(tree) {
    var _childrenLength;
    //执行动作
    if (typeof tree.children[0] === 'string') {
        console.log(`<${tree.name} class="${tree.props.className}">${tree.children[0]}</${tree.name}>`);
    } else {
        console.log(`<${tree.name} class="${tree.props.className}">  -->`);
        for(var i = 0, _childrenLength = tree.children.length; i < _childrenLength; i++){
            dfswalking(tree.children[i]);
        }
    }
}

本例中仅打印出字符串的方式来展示,可以在控制台看到输出结果:

下一篇博文中将分析如何通过domDiff(oldTree, newTree)的方法通过同样的遍历方法来收集变化并批量更新视图。

4. 声明

本篇只是部分原理的学习笔记,并不代表框架真实源码的实现逻辑。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

从web图片裁剪出发:了解H5中的Blob

刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像。当时两个方案摆在我面前,一个是flash,我不会。另一个是通过iframe上传图片,然后再上传坐标由后...

52870
来自专栏未闻Code

正则表达式re.sub替换不完整的问题现象及其根本原因

问题的起因来自于一段正则替换。为了从一段HTML代码里面提取出正文,去掉所有的HTML标签和属性,可以写一个Python函数:

14520
来自专栏Google Dart

AngularDart Material Design 输入 顶

Selector: <material-input:not(material-input[multiline])>

14540
来自专栏前端知识分享

第128天:less简单入门

> 一款比较流行的预处理CSS,支持变量、混合、函数、嵌套、循环等特点 > [官网](http://lesscss.org/) > [中文网](http://l...

11640
来自专栏lonelydawn的前端猿区

一款轻量级树形控件EasyTreeview

使用方法 引入 <link rel="stylesheet" type="text/css" href="./css/index.min.css"> <div ...

45690
来自专栏软件开发

前端MVC Vue2学习总结(一)——MVC与vue2概要、模板、数据绑定与综合示例

 一、前端MVC概要 1.1、库与框架的区别 ? 框架是一个软件的半成品,在全局范围内给了大的约束。库是工具,在单点上给我们提供功能。框架是依赖库的。Vue是框...

631100
来自专栏华仔的技术笔记

GO语言学习笔记

505100
来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

15410
来自专栏小詹同学

教你用 Python 玩 GUI 猜数字游戏 。

假设同学聚会玩个猜数字的小游戏 :在[100, 999] 区间内随机生成一个数字 ,之后在其中猜 ,每次猜数会给出指示 ,提示大了还是小了 。那么你要几次能够猜...

16310
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

25020

扫码关注云+社区

领取腾讯云代金券