安科网

JavaScript从初级往高级走系列————Virtual Dom

adeyi

adeyi

2019-06-29

关注 关注
原文博客地址：https://finget.github.io/2018/05/22/virtualDom/

什么是虚拟DOM

  • 用JS模拟DOM结构
  • DOM变化的对比，放在JS层来做（图灵完备语言）
  • 提高重绘性能

重绘和回流

页面渲染过程：
JavaScript从初级往高级走系列————Virtual Dom

  • 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
  • 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

模拟虚拟DOM

<ul id="list">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ul>
// js模拟虚拟DOM
{
  tag: 'ul',
  attrs:{
    id: 'list'
  },
  children:[
    {
      tag: 'li',
      attrs: {className: 'item'},
      children: ['Item 1']
    },
    {
      tag: 'li',
      attrs: {className: 'item'},
      children: ['Item 2']
    }
  ]
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">change</button>

  <script>
    var data = [
      {name: '张三',age: '20',address: '北京'},
      {name: '王五',age: '22',address: '成都'},
      {name: '李四',age: '21',address: '上海'}
    ]

    // 渲染函数
    function render(data) {
      var $container = $('#container');

      // 清空容器，重要！！！
      $container.html('');

      // 拼接 table
      var $table = $('<table>');

      $table.append($('<tr><td>name</td><td>age</td><td>address</td>/tr>'));
      data.forEach(function (item) {
      $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address   + '</td>/tr>'))
    });

      // 渲染到页面
      $container.append($table);
    }
    $('#btn-change').click(function () {
      data[1].age = 30;
      data[2].address = '深圳';
      // re-render  再次渲染
      render(data);
    })
    // 页面加载完立刻执行（初次渲染）
    render(data);
  </script>
</body>
</html>

虽然只改变了两个数据，但是整个table都闪烁了（回流&重绘）
JavaScript从初级往高级走系列————Virtual Dom

  • DOM操作是‘昂贵’的，js运行效率高
  • 尽量减少DOM操作，尽量减少回流重绘

虚拟DOM如何应用，核心API是什么

介绍 snabbdom

snabbdom GitHub地址

官网例子：

var snabbdom = require('snabbdom');
var patch = snabbdom.init([ // Init patch function with chosen modules
  require('snabbdom/modules/class').default, // makes it easy to toggle classes
  require('snabbdom/modules/props').default, // for setting properties on DOM elements
  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
  require('snabbdom/modules/eventlisteners').default, // attaches event listeners
]);
var h = require('snabbdom/h').default; // helper function for creating vnodes

var container = document.getElementById('container');

// h函数生成一个虚拟节点
var vnode = h('div#container.two.classes', {on: {click: someFn}}, [
  h('span', {style: {fontWeight: 'bold'}}, 'This is bold'),
  ' and this is just normal text',
  h('a', {props: {href: '/foo'}}, 'I\'ll take you places!')
]);
// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode); // 把vnode加入到container中

// 数据改变，重新生成一个newVnode
var newVnode = h('div#container.two.classes', {on: {click: anotherEventHandler}}, [
  h('span', {style: {fontWeight: 'normal', fontStyle: 'italic'}}, 'This is now italic type'),
  ' and this is still just normal text',
  h('a', {props: {href: '/bar'}}, 'I\'ll take you places!')
]);
// Second `patch` invocation
// 将newVnode更新到之前的vnode中，从而更新视图
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

snabbdom h 函数

var vnode = h('ul#list',{},[
  h('li.item',{},'Item 1'),
  h('li.item',{},'Item 2')
])


{
  tag: 'ul',
  attrs:{
    id: 'list'
  },
  children:[
    {
      tag: 'li',
      attrs: {className: 'item'},
      children: ['Item 1']
    },
    {
      tag: 'li',
      attrs: {className: 'item'},
      children: ['Item 2']
    }
  ]
}

snabbdom patch 函数

var vnode = h('ul#list',{},[
  h('li.item',{},'Item 1'),
  h('li.item',{},'Item 2')
])
var container = document.getElementById('container');
patch(container, vnode);

// 模拟改变
var btnChange = document.getElementById('btn-change');
btnChange.addEventListener('click',function(){
  var newVnode = h('ul#list',{},[
    h('li.item',{},'Item 111'),
    h('li.item',{},'Item 222'),
    h('li.item',{},'Item 333')
  ])
  patch(vnode, newVnode);
})

snabbdom例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.js"></script>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">change</button>
  <script>
    var snabbdom = window.snabbdom;
    // 定义 patch
    var patch = snabbdom.init([
        snabbdom_class,
        snabbdom_props,
        snabbdom_style,
        snabbdom_eventlisteners
    ])
    // 定义 h
    var h = snabbdom.h;
    var container = document.getElementById('container');
    // 生成 vnode
    var vnode = h('ul#list',{},[
      h('li.item',{},'Item 1'),
        h('li.item',{},'Item 2')
    ])
    patch(container, vnode);
    // 模拟数据改变
    var btnChange = document.getElementById('btn-change');
    btnChange.addEventListener('click',function(){
      var newVnode = h('ul#list',{},[
        h('li.item',{},'Item 1'),
        h('li.item',{},'Item 222'),
        h('li.item',{},'Item 333')
      ])
      patch(vnode, newVnode);
    })
  </script>
</body>
</html>

看图，只有修改了的数据才进行了刷新，减少了DOM操作，这其实就是vnode与newVnode对比，找出改变了的地方，然后只重新渲染改变的
JavaScript从初级往高级走系列————Virtual Dom

重做之前的demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="container"></div>
  <button id="btn-change">change</button>

  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-class.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-props.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-style.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/snabbdom-eventlisteners.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.0/h.js"></script>
  <script type="text/javascript">
    var snabbdom = window.snabbdom;
    // 定义关键函数 patch
    var patch = snabbdom.init([
      snabbdom_class,
      snabbdom_props,
      snabbdom_style,
      snabbdom_eventlisteners
    ]);

    // 定义关键函数 h
    var h = snabbdom.h;

    // 原始数据
    var data = [
      {name: '张三',age: '20',address: '北京'},
      {name: '王五',age: '22',address: '成都'},
      {name: '李四',age: '21',address: '上海'}
    ]
    // 把表头也放在 data 中
    data.unshift({
      name: '姓名',
      age: '年龄',
      address: '地址'
    });

    var container = document.getElementById('container')

    // 渲染函数
    var vnode;
    function render(data) {
      var newVnode = h('table', {}, data.map(function (item) {
        var tds = [];
        var i;
        for (i in item) {
          if (item.hasOwnProperty(i)) {
            tds.push(h('td', {}, item[i] + ''));
          }
        }
        return h('tr', {}, tds)
      }));

      if (vnode) {
        // re-render
        patch(vnode, newVnode);
      } else {
        // 初次渲染
        patch(container, newVnode);
      }
      // 存储当前的 vnode 结果
      vnode = newVnode;
    }
    // 初次渲染
    render(data)
    var btnChange = document.getElementById('btn-change')
    btnChange.addEventListener('click', function () {
      data[1].age = 30
      data[2].address = '深圳'
      // re-render
      render(data)
    })
    </script>
</body>
</html>

JavaScript从初级往高级走系列————Virtual Dom

核心API

  • h('<标签名>',{...属性...},[...子元素...])
  • h('<标签名>',{...属性...},'...')
  • patch(container,vnode)
  • patch(vnode,newVnode)

简单介绍 diff 算法

什么是 diff 算法

这里有两个文本文件：
JavaScript从初级往高级走系列————Virtual Dom
借用git bash中 diff 命令可以比较两个文件的区别：
JavaScript从初级往高级走系列————Virtual Dom

在线diff工具

JavaScript从初级往高级走系列————Virtual Dom

虚拟DOM ---> DOM

// 一个实现流程，实际情况还很复杂
function createElement(vnode) {
  var tag = vnode.tag  // 'ul'
  var attrs = vnode.attrs || {}
  var children = vnode.children || []
  if (!tag) {
    return null
  }

  // 创建真实的 DOM 元素
  var elem = document.createElement(tag)
  // 属性
  var attrName
  for (attrName in attrs) {
    if (attrs.hasOwnProperty(attrName)) {
      // 给 elem 添加属性
      elem.setAttribute(attrName, attrs[attrName])
    }
  }
  // 子元素
  children.forEach(function (childVnode) {
    // 给 elem 添加子元素
    elem.appendChild(createElement(childVnode))  // 递归
  })

  // 返回真实的 DOM 元素
  return elem
}

vnode ---> newVnode

function updateChildren(vnode, newVnode) {
  var children = vnode.children || [];
  var newChildren = newVnode.children || [];

  children.forEach(function (childVnode, index) {
    var newChildVnode = newChildren[index];
    if (childVnode.tag === newChildVnode.tag) {
        // 深层次对比，递归
        updateChildren(childVnode, newChildVnode);
    } else {
        // 替换
        replaceNode(childVnode, newChildVnode);
    }
  })
}

function replaceNode(vnode, newVnode) {
  var elem = vnode.elem;  // 真实的 DOM 节点
  var newElem = createElement(newVnode);
  // 替换
}

最后

创建了一个前端学习交流群，感兴趣的朋友，一起来嗨呀！
JavaScript从初级往高级走系列————Virtual Dom

dom

adeyi

adeyi

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

将你的 Virtual dom 渲染成 Canvas

一个基于 vue 的 virtual dom 插件库，按照Vue render 函数的写法，直接将 Vue 生成的 Vnode 渲染到 canvas 中。支持常规的滚动操作和一些基础的元素事件绑定。这些信息是需要从接口取的，而且每个人都不一样。第一次碰到这

星星有所不知 2020-10-12

如何在Shadow DOM/Web组件中覆盖CSS

Web组件的主要目的之一是提供封装——能够隐藏HTML标记结构和CSS样式，并与页面上的其他代码分离，这样不同的部分就不会冲突，通过这种方式，这样代码就可以保持漂亮和干净。影子DOM为我们提供了范围限定的样式封装，并提供了一种让我们随意选择进入外界的方法。

zuncle 2020-09-28

JavaScript 如何计算文本的行数的实现

思路：用2个块统计行高，一个不加高度限制用来统计行数，一个加高度限制用来显示。当然总高度的计算必须是文字所在的 DOM 没有对高度的限制，随着文本的增加 DOM 要随之变高才行；最后还要考虑 DOM 的样式padding和margin对高度的影响。总结一下

huaoa 2020-09-14

DOM事件流的三个阶段

事件流之冒泡与捕获：。　　假如我们在页面上有一个 button 标签。　　　　　　a :button. 　　　　　 d : window. 　　　　　　依次触发 a 、b、c、d. 　　　　个人总结： 点击元素时，元素从内向外扩展是冒泡，反之收缩是捕获。D

北京老苏 2020-08-17

JS中DOM元素的操作

<button id="btn" class="btnlist" name="btn_n">点我一下</button>. innerHTML语法: ele.innerHTM

luvhl 2020-08-17

实现虚拟DOM

function createElement{ //创建虚拟DOM. function render{ //把虚拟DOM渲染到真实DOM节点。let elementList = [], //保存着一些元素数组，这些元素数组的第一项是父元素，其他项是子元素。

Kakoola 2020-07-29

JavaScript DOM 控制CSS

JavaScript更改P元素的样式：1.<html>2.<body>3.<p id="p2">Hello World!"red";6.</script>7.<p

drdrsky 2020-07-29

React：虚拟DOM和diff算法

目的：为了实现页面元素的高效更新。

hyMiss 2020-07-27

Vue虚拟DOM

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因。Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。diff 算法 — 比较两棵虚拟 DOM 树的差异；p

书虫媛 2020-07-08

一篇文章教会你如何将DOM转换为virtual DOM

Virtual DOM是虚拟节点，它通过Javascript的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM节点。浏览器在处理DOM时，总会附加很多属性，这会使得每一次数据更新，渲染很慢。Virtual　DOM利用

liaoxuewu 2020-07-08

减少浏览器的回流和重绘

避免过多样式嵌套。避免使用css表达式。使用绝对定位可以让动画元素脱离文档流。尽量不适用float布局。图片最好设置好width和height. 尽量简化浏览器不必要的任务，减少页面重新布局。使用viewpoint设置屏幕缩放级别。避免使用引起回流的和重绘

SIMONDOMAIN 2020-07-08

JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版

爱读书的旅行者 2020-07-07

浏览器是如何渲染页面的？

a.解析HTML文件，创建DOM树。自上而下，遇到任何样式与脚本都会阻塞；c.将CSS与DOM合并，构建渲染树；解析HTML构建dom树—>构建render树—>布局render树—>绘制页面。

tianzyc 2020-07-04

虚拟DOM和diff算法

Vue和React是数据驱动视图，如何有效控制DOM操作?能不能把计算，更多的转移为js计算？因为js执行速度很快。patch函数-->patch,对比tag,对比tag与key,对比children

Lophole 2020-07-04

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole 2020-06-28

JS事件、Bom对象和Dom对象（1）（乐字节架构）

如需要跟多资料请点击右侧 → 这是一条不归路，有秃头风险，请慎重选择！事件 是 JavaScript 应用跳动的心脏 ，进行交互，使网页动起来。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

liaoxuewu 2020-06-26

前后端分离中前端DOM渲染页面

html 仅仅作为静态文件，客户端端在请求时，服务端将数据返回给客户端，再通过本地的js代码读取返回的数据再使用DOM将这些数据渲染到html中，保留的代码中天然的展示层和数据层的分离；在我们校园帮帮网的项目中用于在页面加载时接受后端问题列表数据然后现实在

ApeLife技术 2020-06-26

JS HTML DOM

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，你可以访问所有的 HTML 元素，连同它们所包含的文本和属性。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、Ja

北京老苏 2020-06-25

【JS】05 DOM 文档对象模型 P2 元素的CRUD、Dom集合对象

你需要先找到他的父元素。<p id="p1">这是一个段落。我想说，这用CSS标签选择器不好吗？但是这操作跟数组没有区别啊。。。只不过Java的数组要求长度是固定且数据类型一致的。NodeList对象是一个从文档中获取的节点

Lophole 2020-06-14

【JS】04 DOM 文档对象模型 P1 查找元素、改变内容、绑定事件

document.write() 可用于直接向 HTML 输出流写内容。【绝对不要在文档加载完成之后使用 document.write()。修改 HTML 内容的最简单的方法是使用 innerHTML 属性。<p>以上段落通过脚本修改。DOM对

SIMONDOMAIN 2020-06-14
adeyi

adeyi

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号