前端框架通识：Virtual DOM（虚拟 DOM）

最新推荐文章于 2024-07-02 16:48:36 发布

原创

最新推荐文章于 2024-07-02 16:48:36 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入探讨虚拟DOM的概念及其实现方式，解释了为何使用虚拟DOM能提升前端性能，重点讲解了Diff算法在虚拟DOM中的作用，以及如何通过Snabbdom库实现虚拟DOM和局部更新。

众所周知，操作 DOM 是很耗费性能的一件事情，既然如此，我们可以考虑通过 JS 对象来模拟 DOM 对象。

什么是虚拟DOM

vdom是虚拟DOM(Virtual DOM)的简称，指的是用JS模拟的DOM结构，将DOM变化的对比放在JS层来做。换而言之，vdom就是JS对象

如下DOM结构：

<ul class='list'>
  <li>1</li>
</ul>

映射成虚拟DOM就是这样：

const ul = {
  tag: 'ul',
  props: {
    class: 'list'
  },
  children: {
    tag: 'li',
    children: '1'
  }
}

使用原生DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
  <button id="btn-change">改变</button>
  <button id="btn-change-one">改变单个</button>
  <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
  <script>
    const data = [{
        name: "张三",
        age: 20,
        address: "北京"
      },
      {
        name: "李四",
        age: 21,
        address: "武汉"
      },
      {
        name: "王五",
        age: 22,
        address: "杭州"
      },
    ];
    //渲染函数
    function render(data) {
      const $container = $('#container');
      $container.html('');
      const $table = $('<table>');
      // 重绘一次
      $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'));
      data.forEach(item => {
        // 每次进入都重绘
        $table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.address}</td></tr>`))
      })
      $container.append($table);
    }
    
    render(data)

    $('#btn-change').click(function () {
        for(let i=0; i < data.length; i++) {
            data[i].age = data[i].age + i
        }
      render(data);
    });
    $(