一起理解

日期:2019-12-05编辑作者:澳门金莎娱乐网站

一起理解 Virtual DOM

2016/11/14 · JavaScript · DOM

本文作者: 伯乐在线 - luobotang 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

前言

React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。

让我能够有所开窍(自认为)的,是这篇文章:


Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html


作者看问题的角度很棒,从数据变更与UI同步的角度来介绍各个典型框架,特别是对于 React 的 Virtual DOM,从这个角度理解起来更容易些。

感兴趣的同学,如果没有读过这篇文章,推荐去看一看,不感兴趣就算了。不过接下来我要讲的东西,部分整理自这篇文章,特别是从这篇文章中引用的图片,非常棒。当然还有我自己的一些思考,以及一些对于目前 Virtual DOM 实现的开源库的分析。

如果读了上面推荐的这篇文章,我倒是不介意你不再继续把本文读下去,因为有些东西你已经领会到了。当然,也不反对。

vue的Virtual Dom实现snabbdom解密,vuesnabbdom

vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能。

JavaScript 开销直接与求算必要 DOM 操作的机制相关。尽管 Vue 和 React 都使用了 Virtual Dom 实现这一点,但 Vue 的 Virtual Dom 实现(复刻自 snabbdom)是更加轻量化的,因此也就比 React 的实现更高效。

看到火到不行的国产前端框架vue也在用别人的 Virtual Dom开源方案,是不是很好奇snabbdom有何强大之处呢?不过正式解密snabbdom之前,先简单介绍下Virtual Dom。

什么是Virtual Dom

Virtual Dom可以看做一棵模拟了DOM树的JavaScript树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变化,然后通过Virtual Dom和真实DOM的比对,再对真实DOM更新。可以简单认为Virtual Dom是真实DOM的缓存。

为什么用Virtual Dom

我们知道,当我们希望实现一个具有复杂状态的界面时,如果我们在每个可能发生变化的组件上都绑定事件,绑定字段数据,那么很快由于状态太多,我们需要维护的事件和字段将会越来越多,代码也会越来越复杂,于是,我们想我们可不可以将视图和状态分开来,只要视图发生变化,对应状态也发生变化,然后状态变化,我们再重绘整个视图就好了。

这样的想法虽好,但是代价太高了,于是我们又想,能不能只更新状态发生变化的视图?于是Virtual Dom应运而生,状态变化先反馈到Virtual Dom上,Virtual Dom在找到最小更新视图,最后批量更新到真实DOM上,从而达到性能的提升。

除此之外,从移植性上看,Virtual Dom还对真实dom做了一次抽象,这意味着Virtual Dom对应的可以不是浏览器的DOM,而是不同设备的组件,极大的方便了多平台的使用。如果是要实现前后端同构直出方案,使用Virtual Dom的框架实现起来是比较简单的,因为在服务端的Virtual Dom跟浏览器DOM接口并没有绑定关系。

基于Virtual DOM 的数据更新与UI同步机制:

图片 1

初始渲染时,首先将数据渲染为 Virtual DOM,然后由 Virtual DOM 生成 DOM。

图片 2

数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

Virtual DOM 作为数据结构,需要能准确地转换为真实 DOM,并且方便进行对比。

介绍完Virtual DOM,我们应该对snabbdom的功用有个认识了,下面具体解剖下snabbdom这只“小麻雀”。

snabbdom

vnode

DOM 通常被视为一棵树,元素则是这棵树上的节点(node),而 Virtual DOM 的基础,就是 Virtual Node 了。

Snabbdom 的 Virtual Node 则是纯数据对象,通过 vnode 模块来创建,对象属性包括:

sel
data
children
text
elm
key

可以看到 Virtual Node 用于创建真实节点的数据包括:

元素类型
元素属性
元素的子节点

源码:

//VNode函数,用于将输入转化成VNode
 /**
 *
 * @param sel 选择器
 * @param data 绑定的数据
 * @param children 子节点数组
 * @param text 当前text节点内容
 * @param elm 对真实dom element的引用
 * @returns {{sel: *, data: *, children: *, text: *, elm: *, key: undefined}}
 */
function vnode(sel, data, children, text, elm) {

 var key = data === undefined ? undefined : data.key;
 return { sel: sel, data: data, children: children,
 text: text, elm: elm, key: key };
}

snabbdom并没有直接暴露vnode对象给我们用,而是使用h包装器,h的主要功能是处理参数:

h(sel,[data],[children],[text]) => vnode

从snabbdom的typescript的源码可以看出,其实就是这几种函数重载:

export function h(sel: string): VNode; 
export function h(sel: string, data: VNodeData): VNode; 
export function h(sel: string, text: string): VNode; 
export function h(sel: string, children: Array<VNode | undefined | null>): VNode; 
export function h(sel: string, data: VNodeData, text: string): VNode; 
export function h(sel: string, data: VNodeData, children: Array<VNode | undefined | null>): VNode; 

patch

创建vnode后,接下来就是调用patch方法将Virtual Dom渲染成真实DOM了。patch是snabbdom的init函数返回的。
snabbdom.init传入modules数组,module用来扩展snabbdom创建复杂dom的能力。

不多说了直接上patch的源码:

return function patch(oldVnode, vnode) {
 var i, elm, parent;
 //记录被插入的vnode队列,用于批触发insert
 var insertedVnodeQueue = [];
 //调用全局pre钩子
 for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
 //如果oldvnode是dom节点,转化为oldvnode
 if (isUndef(oldVnode.sel)) {
 oldVnode = emptyNodeAt(oldVnode);
 }
 //如果oldvnode与vnode相似,进行更新
 if (sameVnode(oldVnode, vnode)) {
 patchVnode(oldVnode, vnode, insertedVnodeQueue);
 } else {
 //否则,将vnode插入,并将oldvnode从其父节点上直接删除
 elm = oldVnode.elm;
 parent = api.parentNode(elm);

 createElm(vnode, insertedVnodeQueue);

 if (parent !== null) {
 api.insertBefore(parent, vnode.elm, api.nextSibling(elm));
 removeVnodes(parent, [oldVnode], 0, 0);
 }
 }
 //插入完后,调用被插入的vnode的insert钩子
 for (i = 0; i < insertedVnodeQueue.length; ++i) {
 insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
 }
 //然后调用全局下的post钩子
 for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
 //返回vnode用作下次patch的oldvnode
 return vnode;
 };

先判断新旧虚拟dom是否是相同层级vnode,是才执行patchVnode,否则创建新dom删除旧dom,判断是否相同vnode比较简单:

function sameVnode(vnode1, vnode2) {
 //判断key值和选择器
 return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
}

patch方法里面实现了snabbdom 作为一个高效virtual dom库的法宝—高效的diff算法,可以用一张图示意:

图片 3

diff算法的核心是比较只会在同层级进行, 不会跨层级比较。而不是逐层逐层搜索遍历的方式,时间复杂度将会达到 O(n^3)的级别,代价非常高,而只比较同层级的方式时间复杂度可以降低到O(n)。

patchVnode函数的主要作用是以打补丁的方式去更新dom树。

function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
 var i, hook;
 //在patch之前,先调用vnode.data的prepatch钩子
 if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
 i(oldVnode, vnode);
 }
 var elm = vnode.elm = oldVnode.elm, oldCh = oldVnode.children, ch = vnode.children;
 //如果oldvnode和vnode的引用相同,说明没发生任何变化直接返回,避免性能浪费
 if (oldVnode === vnode) return;
 //如果oldvnode和vnode不同,说明vnode有更新
 //如果vnode和oldvnode不相似则直接用vnode引用的DOM节点去替代oldvnode引用的旧节点
 if (!sameVnode(oldVnode, vnode)) {
 var parentElm = api.parentNode(oldVnode.elm);
 elm = createElm(vnode, insertedVnodeQueue);
 api.insertBefore(parentElm, elm, oldVnode.elm);
 removeVnodes(parentElm, [oldVnode], 0, 0);
 return;
 }
 //如果vnode和oldvnode相似,那么我们要对oldvnode本身进行更新
 if (isDef(vnode.data)) {
 //首先调用全局的update钩子,对vnode.elm本身属性进行更新
 for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
 //然后调用vnode.data里面的update钩子,再次对vnode.elm更新
 i = vnode.data.hook;
 if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
 }
 //如果vnode不是text节点
 if (isUndef(vnode.text)) {
 //如果vnode和oldVnode都有子节点
 if (isDef(oldCh) && isDef(ch)) {
 //当Vnode和oldvnode的子节点不同时,调用updatechilren函数,diff子节点
 if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
 }
 //如果vnode有子节点,oldvnode没子节点
 else if (isDef(ch)) {
 //oldvnode是text节点,则将elm的text清除
 if (isDef(oldVnode.text)) api.setTextContent(elm, '');
 //并添加vnode的children
 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
 }
 //如果oldvnode有children,而vnode没children,则移除elm的children
 else if (isDef(oldCh)) {
 removeVnodes(elm, oldCh, 0, oldCh.length - 1);
 }
 //如果vnode和oldvnode都没chidlren,且vnode没text,则删除oldvnode的text
 else if (isDef(oldVnode.text)) {
 api.setTextContent(elm, '');
 }
 }

 //如果oldvnode的text和vnode的text不同,则更新为vnode的text
 else if (oldVnode.text !== vnode.text) {
 api.setTextContent(elm, vnode.text);
 }
 //patch完,触发postpatch钩子
 if (isDef(hook) && isDef(i = hook.postpatch)) {
 i(oldVnode, vnode);
 }
 }

patchVnode将新旧虚拟DOM分为几种情况,执行替换textContent还是updateChildren。

updateChildren是实现diff算法的主要地方:

function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
 var oldStartIdx = 0, newStartIdx = 0;
 var oldEndIdx = oldCh.length - 1;
 var oldStartVnode = oldCh[0];
 var oldEndVnode = oldCh[oldEndIdx];
 var newEndIdx = newCh.length - 1;
 var newStartVnode = newCh[0];
 var newEndVnode = newCh[newEndIdx];
 var oldKeyToIdx;
 var idxInOld;
 var elmToMove;
 var before;
 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
 if (oldStartVnode == null) {
 oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
 }
 else if (oldEndVnode == null) {
 oldEndVnode = oldCh[--oldEndIdx];
 }
 else if (newStartVnode == null) {
 newStartVnode = newCh[++newStartIdx];
 }
 else if (newEndVnode == null) {
 newEndVnode = newCh[--newEndIdx];
 }
 else if (sameVnode(oldStartVnode, newStartVnode)) {
 patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
 oldStartVnode = oldCh[++oldStartIdx];
 newStartVnode = newCh[++newStartIdx];
 }
 else if (sameVnode(oldEndVnode, newEndVnode)) {
 patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
 oldEndVnode = oldCh[--oldEndIdx];
 newEndVnode = newCh[--newEndIdx];
 }
 else if (sameVnode(oldStartVnode, newEndVnode)) {
 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
 api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
 oldStartVnode = oldCh[++oldStartIdx];
 newEndVnode = newCh[--newEndIdx];
 }
 else if (sameVnode(oldEndVnode, newStartVnode)) {
 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
 api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
 oldEndVnode = oldCh[--oldEndIdx];
 newStartVnode = newCh[++newStartIdx];
 }
 else {
 if (oldKeyToIdx === undefined) {
  oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
 }
 idxInOld = oldKeyToIdx[newStartVnode.key];
 if (isUndef(idxInOld)) {
  api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
  newStartVnode = newCh[++newStartIdx];
 }
 else {
  elmToMove = oldCh[idxInOld];
  if (elmToMove.sel !== newStartVnode.sel) {
  api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
  }
  else {
  patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
  oldCh[idxInOld] = undefined;
  api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
  }
  newStartVnode = newCh[++newStartIdx];
 }
 }
 }
 if (oldStartIdx > oldEndIdx) {
 before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
 addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
 }
 else if (newStartIdx > newEndIdx) {
 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
 }
 }

updateChildren的代码比较有难度,借助几张图比较好理解些:

图片 4

过程可以概括为:oldCh和newCh各有两个头尾的变量StartIdx和EndIdx,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key,就会用key进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了,就会结束比较。

具体的diff分析:
对于与sameVnode(oldStartVnode, newStartVnode)和sameVnode(oldEndVnode,newEndVnode)为true的情况,不需要对dom进行移动。

有3种需要dom操作的情况:

1.当oldStartVnode,newEndVnode相同层级时,说明oldStartVnode.el跑到oldEndVnode.el的后边了。

图片 5

2.当oldEndVnode,newStartVnode相同层级时,说明oldEndVnode.el跑到了newStartVnode.el的前边。

图片 6

3.newCh中的节点oldCh里没有,将新节点插入到oldStartVnode.el的前边。

图片 7

在结束时,分为两种情况:

1.oldStartIdx > oldEndIdx,可以认为oldCh先遍历完。当然也有可能newCh此时也正好完成了遍历,统一都归为此类。此时newStartIdx和newEndIdx之间的vnode是新增的,调用addVnodes,把他们全部插进before的后边,before很多时候是为null的。addVnodes调用的是insertBefore操作dom节点,我们看看insertBefore的文档:parentElement.insertBefore(newElement, referenceElement)如果referenceElement为null则newElement将被插入到子节点的末尾。如果newElement已经在DOM树中,newElement首先会从DOM树中移除。所以before为null,newElement将被插入到子节点的末尾。

图片 8

2.newStartIdx > newEndIdx,可以认为newCh先遍历完。此时oldStartIdx和oldEndIdx之间的vnode在新的子节点里已经不存在了,调用removeVnodes将它们从dom里删除。

图片 9

hook

shabbdom主要流程的代码在上面就介绍完毕了,在上面的代码中可能看不出来如果要创建比较复杂的dom,比如有attribute、props、eventlistener的dom怎么办?奥秘就在与shabbdom在各个主要的环节提供了钩子。钩子方法中可以执行扩展模块,attribute、props、eventlistener等可以通过扩展模块实现。

在源码中可以看到hook是在snabbdom初始化的时候注册的。

var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
var h_1 = require("./h");
exports.h = h_1.h;
var thunk_1 = require("./thunk");
exports.thunk = thunk_1.thunk;
function init(modules, domApi) {
 var i, j, cbs = {};
 var api = domApi !== undefined ? domApi : htmldomapi_1.default;
 for (i = 0; i < hooks.length; ++i) {
 cbs[hooks[i]] = [];
 for (j = 0; j < modules.length; ++j) {
 var hook = modules[j][hooks[i]];
 if (hook !== undefined) {
 cbs[hooks[i]].push(hook);
 }
 }
 }

snabbdom在全局下有6种类型的钩子,触发这些钩子时,会调用对应的函数对节点的状态进行更改首先我们来看看有哪些钩子以及它们触发的时间:

图片 10

比如在patch的代码中可以看到调用了pre钩子

return function patch(oldVnode, vnode) {
 var i, elm, parent;
 var insertedVnodeQueue = [];
 for (i = 0; i < cbs.pre.length; ++i)
 cbs.pre[i]();
 if (!isVnode(oldVnode)) {
 oldVnode = emptyNodeAt(oldVnode);
 }

我们找一个比较简单的class模块来看下其源码:

function updateClass(oldVnode, vnode) {
 var cur, name, elm = vnode.elm, oldClass = oldVnode.data.class, klass = vnode.data.class;
 if (!oldClass && !klass)
 return;
 if (oldClass === klass)
 return;
 oldClass = oldClass || {};
 klass = klass || {};
 for (name in oldClass) {
 if (!klass[name]) {
 elm.classList.remove(name);
 }
 }
 for (name in klass) {
 cur = klass[name];
 if (cur !== oldClass[name]) {
 elm.classList[cur ? 'add' : 'remove'](name);
 }
 }
}
exports.classModule = { create: updateClass, update: updateClass };
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = exports.classModule;

},{}]},{},[1])(1)
});

可以看出create和update钩子方法调用的时候,可以执行class模块的updateClass:从elm中删除vnode中不存在的或者值为false的类。

将vnode中新的class添加到elm上去。

总结snabbdom

  • vnode是基础数据结构
  • patch创建或更新DOM树
  • diff算法只比较同层级
  • 通过钩子和扩展模块创建有attribute、props、eventlistener的复杂dom

参考:

snabbdom

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

Dom实现snabbdom解密,vuesnabbdom vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能。 JavaScript 开...

前言

React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。

让我能够有所开窍(自认为)的,是这篇文章:


Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen


作者看问题的角度很棒,从数据变更与UI同步的角度来介绍各个典型框架,特别是对于 React 的 Virtual DOM,从这个角度理解起来更容易些。

感兴趣的同学,如果没有读过这篇文章,推荐去看一看,不感兴趣就算了。不过接下来我要讲的东西,部分整理自这篇文章,特别是从这篇文章中引用的图片,非常棒。当然还有我自己的一些思考,以及一些对于目前 Virtual DOM 实现的开源库的分析。

如果读了上面推荐的这篇文章,我倒是不介意你不再继续把本文读下去,因为有些东西你已经领会到了。当然,也不反对。

变化这件事

谈论页面的变化之前,咱们先看下数据和页面(视觉层面的页面)的关系。数据是隐藏在页面底下,通过渲染展示给用户。同样的数据,按照不同的页面设计和实现,会以不同形式、样式的页面呈现出来。有时候在一个页面内的不同位置,也会有相同数据的不同表现。

Paste_Image.png

Web 的早期,这些页面通常是静态的,页面内容不会变化。而如果数据发生了变化,通常需要重新请求页面,得到基于新的数据渲染出的新的页面。

Paste_Image.png

至少,这个模式理解起来挺简单不是吗。

直到 Web 应用复杂起来,开发者们开始关注用户体验,开始将大量的处理向前端迁移,页面变得动态、灵活起来。一个显著的特征是,数据发生变化之后,不再需要刷新页面就能看到页面上的内容随之更新了。

前端需要做的事情变得多了起来,前端工程师们也就修炼了起来,各种前端技术也就出现了。

首先,聪明的工程师们发现既然是在前端渲染页面,如果只是部分数据发生了变化,就要把页面整体或一大块区域重新渲染就有点笨了。为什么不把事情做得更极致些,只更新变化的数据对应的页面的内容呢?

怎么做呢?操作 DOM 呗。DOM 就是浏览器提供给开发者用于操作页面的模型嘛,直接通过脚本来调用 DOM 的各种接口就 OK 了。而且我们还有了像 jQuery 这样的棒棒的工具,操作 DOM 变得 so easy。

然而,页面越来越复杂,聪明的工程师们发现数据变化之后,老是需要手动编码去操作对应的 DOM 节点执行更新,有点烦,不够懒啊。于是各种框架如雨后春笋般出现了,纷纷表示可以简化这个过程。

稍微早期的框架有这样的:

Paste_Image.png

开发者借助框架,监听数据的变更,在数据变更后更新对应的 DOM 节点。虽然还是要写一些代码,但是写出来的代码好像很有条理的样子,至少更容易理解和维护了,也不错嘛。

更进一步,MVVM 框架出现了,以 AngularJS 为代表:

Paste_Image.png

仍然是数据变化后更新对应 DOM 节点的方式,但是建立这种绑定关系的过程被框架所处理,开发者要写的代码变少了,而且代码更易读和维护了。

再然后呢,大家就在这个棒棒的模式上继续深耕,纷纷表示还可以在性能上做得更好,前端领域一片繁荣。

再后来 React 出现了,它不仅不是 MVVM 框架,甚至连 MV* 框架都不是。这年头,不是个 MV* 框架还好意思出门?可 React 还真的带来了新的思路!

什么思路呢?

就是回到过去,回到那个简单而美好的时候。具体而言,就是每次数据发生变化,就重新执行一次整体渲染。的确这样更简单,不用去琢磨到底是数据的哪一部分变化了,需要更新页面的哪一部分。但是坏处太明显,体验不好啊。而 React 给出了解决方案,就是 Virtual DOM。

Virtual DOM 概况来讲,就是在数据和真实 DOM 之间建立了一层缓冲。对于开发者而言,数据变化了就调用 React 的渲染方法,而 React 并不是直接得到新的 DOM 进行替换,而是先生成 Virtual DOM,与上一次渲染得到的 Virtual DOM 进行比对,在渲染得到的 Virtual DOM 上发现变化,然后将变化的地方更新到真实 DOM 上。

简单来说,React 在提供给开发者简单的开发模式的情况下,借助 Virtual DOM 实现了性能上的优化,以致于敢说自己“不慢”。

变化这件事

谈论页面的变化之前,咱们先看下数据和页面(视觉层面的页面)的关系。数据是隐藏在页面底下,通过渲染展示给用户。同样的数据,按照不同的页面设计和实现,会以不同形式、样式的页面呈现出来。有时候在一个页面内的不同位置,也会有相同数据的不同表现。

图片 11

Paste_Image.png

Web 的早期,这些页面通常是静态的,页面内容不会变化。而如果数据发生了变化,通常需要重新请求页面,得到基于新的数据渲染出的新的页面。

图片 12

Paste_Image.png

至少,这个模式理解起来挺简单不是吗。

直到 Web 应用复杂起来,开发者们开始关注用户体验,开始将大量的处理向前端迁移,页面变得动态、灵活起来。一个显著的特征是,数据发生变化之后,不再需要刷新页面就能看到页面上的内容随之更新了。

前端需要做的事情变得多了起来,前端工程师们也就修炼了起来,各种前端技术也就出现了。

首先,聪明的工程师们发现既然是在前端渲染页面,如果只是部分数据发生了变化,就要把页面整体或一大块区域重新渲染就有点笨了。为什么不把事情做得更极致些,只更新变化的数据对应的页面的内容呢?

怎么做呢?操作 DOM 呗。DOM 就是浏览器提供给开发者用于操作页面的模型嘛,直接通过脚本来调用 DOM 的各种接口就 OK 了。而且我们还有了像 jQuery 这样的棒棒的工具,操作 DOM 变得 so easy。

然而,页面越来越复杂,聪明的工程师们发现数据变化之后,老是需要手动编码去操作对应的 DOM 节点执行更新,有点烦,不够懒啊。于是各种框架如雨后春笋般出现了,纷纷表示可以简化这个过程。

稍微早期的框架有这样的:

图片 13

Paste_Image.png

开发者借助框架,监听数据的变更,在数据变更后更新对应的 DOM 节点。虽然还是要写一些代码,但是写出来的代码好像很有条理的样子,至少更容易理解和维护了,也不错嘛。

更进一步,MVVM 框架出现了,以 AngularJS 为代表:

图片 14

Paste_Image.png

仍然是数据变化后更新对应 DOM 节点的方式,但是建立这种绑定关系的过程被框架所处理,开发者要写的代码变少了,而且代码更易读和维护了。

再然后呢,大家就在这个棒棒的模式上继续深耕,纷纷表示还可以在性能上做得更好,前端领域一片繁荣。

再后来 React 出现了,它不仅不是 MVVM 框架,甚至连 MV 框架都不是。这年头,不是个 MV 框架还好意思出门?可 React 还真的带来了新的思路!

什么思路呢?

就是回到过去,回到那个简单而美好的时候。具体而言,就是每次数据发生变化,就重新执行一次整体渲染。的确这样更简单,不用去琢磨到底是数据的哪一部分变化了,需要更新页面的哪一部分。但是坏处太明显,体验不好啊。而 React 给出了解决方案,就是 Virtual DOM。

Virtual DOM 概况来讲,就是在数据和真实 DOM 之间建立了一层缓冲。对于开发者而言,数据变化了就调用 React 的渲染方法,而 React 并不是直接得到新的 DOM 进行替换,而是先生成 Virtual DOM,与上一次渲染得到的 Virtual DOM 进行比对,在渲染得到的 Virtual DOM 上发现变化,然后将变化的地方更新到真实 DOM 上。

简单来说,React 在提供给开发者简单的开发模式的情况下,借助 Virtual DOM 实现了性能上的优化,以致于敢说自己“不慢”。

Virtual DOM

React 基于 Virtual DOM 的数据更新与UI同步机制:

React - 初始渲染

初始渲染时,首先将数据渲染为 Virtual DOM,然后由 Virtual DOM 生成 DOM。

React - 数据更新

数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

Virtual DOM 作为数据结构,需要能准确地转换为真实 DOM,并且方便进行对比。除了 Virtual DOM 外,React 还实现了其他的特性,为了专注于 Virtual DOM,我另外找了两个比较 Virtual DOM 来学习:

  • virtual-dom
  • Snabbdom

这里也推荐给感兴趣且还没有读过两个库源码的同学。

由于只关注 Virtual DOM,通过阅读两个库的源码,对于 Virtual DOM 的定位有了更深一步的理解。

首先看数据结构。

** Virtual DOM 数据结构 **

DOM 通常被视为一棵树,元素则是这棵树上的节点(node),而 Virtual DOM 的基础,就是 Virtual Node 了。

在 virtual-dom 中,给 Virtual Node 声明了对应的类 VirtualNode,基本是用于存储数据,包括:

  • tagName
  • properties
  • children
  • key
  • namespace
  • count
  • hasWidgets
  • hasThunks
  • hooks
  • descendantHooks

Snabbdom 的 Virtual Node 则是纯数据对象,通过 vnode 模块来创建,对象属性包括:

  • sel
  • data
  • children
  • text
  • elm
  • key

虽然有所差别,除去实现上的差别和库本身的额外特性,可以看到 Virtual Node 用于创建真实节点的数据包括:

  • 元素类型
  • 元素属性
  • 元素的子节点

有了这些其实就可以创建对应的真实节点了。

创建 Virtual DOM

嵌套 Virtual Node 就可以得到一棵树了。virtual-dom 和 Snabbdom 都提供了函数调用的方式来创建 Virtual Tree,这个过程就是渲染了:

var vTree = h('div', [
  h('span', 'hello'),
  h('span', 'world')
])

React 提供 JSX 这颗糖,使得我们可以用类似 HTML 的语法来编写,不过编译后实质还是通过函数调用来得到一棵嵌套的 Virtual Tree。而且这对于理解 Virtual DOM 机制来说不是特别重要,先不管这个。

使用 Virtual DOM

首先来看初始化,virtual-dom 提供了 createElement 函数:

var rootNode = createElement(tree)
document.body.appendChild(rootNode)

根据 Virtual Node 创建真实 DOM 元素,然后再追加到页面上。

再来看更新。virtual-dom 有明确的两步操作,首先 diff,然后 patch:

var newTree = render(count)
var patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)

而 Snabbdom 则简单些,只有一个 patch 函数,内部在进行比对的同时将更新应用到了真实 DOM 上,而且初始化也是用的 patch 函数:

var vnode = render(data)
var container = document.getElementById('container')
patch(container, vnode)

// after data changed
var newVnode = render(data)
patch(vnode, newVnode)

性能优化

关于性能优化,除了 Virtual DOM 机制本身提供的特性以外,再就是不同的 Virtual DOM 库自身的优化方案了,这个可以看上面两个库的文档,不再赘述。

其实提到 Virtual DOM 的差异比对,有人会对其内部如何处理数组感兴趣。的确,如果数组元素的位置发生了改变,这个要识别起来是有点麻烦。为此,上面两个库和 React 其实都在 Virtual Node 上额外记录了一个属性“key”,就是用来辅助进行 Virtual Node 的比对的。

简单来说,如果两个 Virtual Node 的位置不同,但是 key 属性相同,那么会将这两个节点视为由相同数据渲染得到的,然后进一步进行差异分析。所以,并不是仅仅按照位置进行比对,具体的实现可以查看各个库的源码。

Virtual DOM

React 基于 Virtual DOM 的数据更新与UI同步机制:

图片 15

React – 初始渲染

初始渲染时,首先将数据渲染为 Virtual DOM,然后由 Virtual DOM 生成 DOM。

图片 16

React – 数据更新

数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

Virtual DOM 作为数据结构,需要能准确地转换为真实 DOM,并且方便进行对比。除了 Virtual DOM 外,React 还实现了其他的特性,为了专注于 Virtual DOM,我另外找了两个比较 Virtual DOM 来学习:

  • virtual-dom
  • Snabbdom

这里也推荐给感兴趣且还没有读过两个库源码的同学。

由于只关注 Virtual DOM,通过阅读两个库的源码,对于 Virtual DOM 的定位有了更深一步的理解。

首先看数据结构。

Virtual DOM 数据结构

DOM 通常被视为一棵树,元素则是这棵树上的节点(node),而 Virtual DOM 的基础,就是 Virtual Node 了。

在 virtual-dom 中,给 Virtual Node 声明了对应的类 VirtualNode,基本是用于存储数据,包括:

  • tagName
  • properties
  • children
  • key
  • namespace
  • count
  • hasWidgets
  • hasThunks
  • hooks
  • descendantHooks

Snabbdom 的 Virtual Node 则是纯数据对象,通过 vnode 模块来创建,对象属性包括:

  • sel
  • data
  • children
  • text
  • elm
  • key

虽然有所差别,除去实现上的差别和库本身的额外特性,可以看到 Virtual Node 用于创建真实节点的数据包括:

  • 元素类型
  • 元素属性
  • 元素的子节点

有了这些其实就可以创建对应的真实节点了。

创建 Virtual DOM

嵌套 Virtual Node 就可以得到一棵树了。virtual-dom 和 Snabbdom 都提供了函数调用的方式来创建 Virtual Tree,这个过程就是渲染了:

JavaScript

var vTree = h('div', [ h('span', 'hello'), h('span', 'world') ])

1
2
3
4
var vTree = h('div', [
  h('span', 'hello'),
  h('span', 'world')
])

React 提供 JSX 这颗糖,使得我们可以用类似 HTML 的语法来编写,不过编译后实质还是通过函数调用来得到一棵嵌套的 Virtual Tree。而且这对于理解 Virtual DOM 机制来说不是特别重要,先不管这个。

使用 Virtual DOM

首先来看初始化,virtual-dom 提供了 createElement 函数:

JavaScript

var rootNode = createElement(tree) document.body.appendChild(rootNode)

1
2
var rootNode = createElement(tree)
document.body.appendChild(rootNode)

根据 Virtual Node 创建真实 DOM 元素,然后再追加到页面上。

再来看更新。virtual-dom 有明确的两步操作,首先 diff,然后 patch:

JavaScript

var newTree = render(count) var patches = diff(tree, newTree) rootNode = patch(rootNode, patches)

1
2
3
var newTree = render(count)
var patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)

而 Snabbdom 则简单些,只有一个 patch 函数,内部在进行比对的同时将更新应用到了真实 DOM 上,而且初始化也是用的 patch 函数:

JavaScript

var vnode = render(data) var container = document.getElementById('container') patch(container, vnode) // after data changed var newVnode = render(data) patch(vnode, newVnode)

1
2
3
4
5
6
7
var vnode = render(data)
var container = document.getElementById('container')
patch(container, vnode)
 
// after data changed
var newVnode = render(data)
patch(vnode, newVnode)

性能优化

关于性能优化,除了 Virtual DOM 机制本身提供的特性以外,再就是不同的 Virtual DOM 库自身的优化方案了,这个可以看上面两个库的文档,不再赘述。

其实提到 Virtual DOM 的差异比对,有人会对其内部如何处理数组感兴趣。的确,如果数组元素的位置发生了改变,这个要识别起来是有点麻烦。为此,上面两个库和 React 其实都在 Virtual Node 上额外记录了一个属性“key”,就是用来辅助进行 Virtual Node 的比对的。

简单来说,如果两个 Virtual Node 的位置不同,但是 key 属性相同,那么会将这两个节点视为由相同数据渲染得到的,然后进一步进行差异分析。所以,并不是仅仅按照位置进行比对,具体的实现可以查看各个库的源码。

小结

OK,以上就是我要讲的全部所有内容了。

相信很多同学之前对 Virtual DOM 已经很熟悉了,比我理解得更深入的同学相信也不会少。不过从“数据变化与UI同步更新”这个角度来理解 Virtual DOM,在我看来是比较好的,所以整理在这里了。

有个问题挺常见,AngularJS 和 React 哪个更好?

如果说各有千秋的话,估计大家就“呵呵”了。但是这两个框架/库从“数据变化与UI同步更新”的角度来看,的确都解决了问题,而且解决问题的方式大家都挺认可(至少在喜欢它们的同学眼里是这样的)。

而且,如果大家关注 Vue 的话,可以看到,这个 MVVM 框架已经发布了 2.0,其中就采用了 Virtual DOM 实现其UI同步更新!所以,这的确不矛盾啊。

第二个而且,技术本身不是目的,能够更好地解决问题才是王道嘛。

小结

OK,以上就是我要讲的全部所有内容了。

相信很多同学之前对 Virtual DOM 已经很熟悉了,比我理解得更深入的同学相信也不会少。不过从“数据变化与UI同步更新”这个角度来理解 Virtual DOM,在我看来是比较好的,所以整理在这里了。

有个问题挺常见,AngularJS 和 React 哪个更好?

如果说各有千秋的话,估计大家就“呵呵”了。但是这两个框架/库从“数据变化与UI同步更新”的角度来看,的确都解决了问题,而且解决问题的方式大家都挺认可(至少在喜欢它们的同学眼里是这样的)。

而且,如果大家关注 Vue 的话,可以看到,这个 MVVM 框架已经发布了 2.0,其中就采用了 Virtual DOM 实现其UI同步更新!所以,这的确不矛盾啊。

第二个而且,技术本身不是目的,能够更好地解决问题才是王道嘛。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 17 图片 18

1 赞 3 收藏 评论

关于作者:luobotang

图片 19

前端工程师@网易 个人主页 · 我的文章 · 4 ·  

图片 20

本文由澳门金莎娱乐网站发布于澳门金莎娱乐网站,转载请注明出处:一起理解

关键词:

游戏开发基础的教程,unity初探之黑暗之光

HTML5 游戏开发基础的教程 2017/03/24 · HTML5 · 2评论 ·游戏 本文由 伯乐在线 -紫洋翻译,艾凌风校稿。未经许可,禁止转...

详细>>

强大工具,12个有助简化CSS3开发的工具

12个有助简化CSS3开发的工具 2011/05/18 · HTML5 ·CSS3,HTML5 Web 开发人员能通过CSS3为网站设计增添很多时尚元素,CSS3对CSS规...

详细>>

path制作小图标,iconfont实践小结澳门金莎娱乐网

图标字体 VS 雪碧图——图标字体应用实践 2017/04/05 · HTML5 · 1评论 ·图标字体 原文出处:人人网FED博客    本文介绍...

详细>>

不要痴迷于HTML5,移动优先你掌握了吗

不要痴迷于HTML5 和 CSS3 2011/06/27 · HTML5 ·CSS3,HTML5 作为Web设计师,我们都不约而同的痴迷于HTML5和CSS3,我们需要学习H...

详细>>