本文共 4006 字,大约阅读时间需要 13 分钟。
目前最流行的两大前端框架,React和Vue,都不约而同的借助Virtual DOM技术提高页面的渲染效率。那么,什么是Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?本系列文章会详细讲解Virtual DOM的创建过程,并实现一个简单的Diff算法来更新页面。本文的内容脱离于任何的前端框架,只讲最纯粹的Virtual DOM。敲单词太累了,下文Virtual DOM一律用VD表示。
这是VD系列文章的开篇,以下是本系列其它文章的传送门:
本质上来说,VD只是一个简单的JS对象,并且最少包含tag、props和children三个属性。不同的框架对这三个属性的命名会有点差别,但表达的意思是一致的。它们分别是标签名(tag)、属性(props)和子元素对象(children)。下面是一个典型的VD对象例子:
{ tag: "div", props: {}, children: [ "Hello World", { tag: "ul", props: {}, children: [{ tag: "li", props: { id: 1, class: "li-1" }, children: ["第", 1] }] } ]}
VD跟dom对象有一一对应的关系,上面的VD是由以下的HTML生成的
Hello World
- 第1
一个dom对象,比如li
,由tag(li)
, props({id: 1, class: "li-1"})
和children(["第", 1])
三个属性来描述。
VD使得开发者可以通过声明的方式表达页面的呈现效果,而不用关心DOM操作的相关细节。DOM元素的增删改完全可以交给框架来高效的完成。更新页面的时候,借助VD,DOM 元素的改变可以在内存中进行比较,再结合框架的事务机制将多次比较的结果合并后一次性更新到页面,从而有效地减少页面渲染的次数,提高渲染效率。我们先来看下页面的更新一般会经过几个阶段。
从上面的例子中,可以看出页面的呈现会分以下3个阶段:
这个例子里面,JS计算用了691
毫秒,生成渲染树578
毫秒,绘制73
毫秒。如果能有效的减少生成渲染树和绘制所花的时间,更新页面的效率也会随之提高。
我们先从如何生成VD说起。借助JSX编译器,可以将文件中的HTML转化成函数的形式,然后再利用这个函数生成VD。看下面这个例子:
function render() { return (Hello World);}
- 第1
这个函数经过JSX编译后,会输出下面的内容:
function render() { return h( 'div', null, 'Hello World', h( 'ul', null, h( 'li', { id: '1', 'class': 'li-1' }, '\u7B2C1' ) ) );}
这里的h是一个函数,可以起任意的名字。这个名字通过babel进行配置:
// .babelrc文件{ "plugins": [ ["transform-react-jsx", { "pragma": "h" // 这里可配置任意的名称 }] ]}
接下来,我们只需要定义h函数,就能构造出VD
function flatten(arr) { return [].concat.apply([], arr);}function h(tag, props, ...children) { return { tag, props: props || {}, children: flatten(children) || [] };}
h函数会传入三个或以上的参数,前两个参数一个是标签名,一个是属性对象,从第三个参数开始的其它参数都是children。children元素有可能是数组的形式,需要将数组解构一层。比如:
function render() { return (
继续之前的例子。执行h函数后,最终会得到如下的VD对象:
{ tag: "div", props: {}, children: [ "Hello World", { tag: "ul", props: {}, children: [{ tag: "li", props: { id: 1, class: "li-1" }, children: ["第", 1] }] } ]}
下一步,通过遍历VD对象,生成真实的dom
// 创建dom元素function createElement(vdom) { // 如果vdom是字符串或者数字类型,则创建文本节点,比如“Hello World” if (typeof vdom === 'string' || typeof vdom === 'number') { return doc.createTextNode(vdom); } const {tag, props, children} = vdom; // 1. 创建元素 const element = doc.createElement(tag); // 2. 属性赋值 setProps(element, props); // 3. 创建子元素 // appendChild在执行的时候,会检查当前的this是不是dom对象,因此要bind一下 children.map(createElement) .forEach(element.appendChild.bind(element)); return element;}// 属性赋值function setProps(element, props) { for (let key in props) { element.setAttribute(key, props[key]); }}
createElement
函数执行完后,dom元素就创建完并展示到页面上了(页面比较丑,不要介意...)。
本文介绍了VD的基本概念,并讲解了如何利用JSX编译HTML标签,然后生成VD,进而创建真实dom的过程。下一篇文章将会实现一个简单的VD Diff算法,找出2个VD的差异并将更新的元素映射到dom中去:
P.S.: 想看完整代码见这里,如果有必要建一个仓库的话请留言给我:
转载