虚拟DOM（一）

最新推荐文章于 2025-04-10 20:57:33 发布

-只争朝夕-

最新推荐文章于 2025-04-10 20:57:33 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript vue 文章标签：虚拟DOM

本文链接：https://blog.youkuaiyun.com/qq_41463701/article/details/86558641

版权

虚拟DOM是一种用JavaScript模拟的DOM树结构，用于优化浏览器中的DOM操作，以提高性能。由于DOM操作昂贵，频繁渲染会导致性能下降。通过JS操作虚拟DOM，减少实际DOM更新，能显著提升应用性能。文章对比了jQuery与虚拟DOM（如snabbdom）在DOM更新上的差异，展示了虚拟DOM如何仅修改变动部分，避免全量渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虚拟DOM（一）

二、什么是虚拟DOM,为什么要使用虚拟DOM

首先:虚拟DOM(vdom) 就是用JS来模拟DOM结构的树形结构。

JS模拟DOM结构

  <ul id='list'>
    <li class='item'>Item 1</li>
    <li class='item'>Item 2</li>
  </ul>

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

那么我们为什么要使用虚拟?

因为DOM操作是’昂贵’ 的,在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能,为了提高性能,JS在V8引擎下运行效率是很高的,我们尽量减少DOM操作,而不是’推倒重来’

我们可以看看这篇博文虚拟DOM介绍

我们打印一下普通divDOM节点看看里面有什么东西

// dom节点
var div = document.createElement('div');
var item,result = '';
for (item in div){
   
  result += "|" +item;
}
console.log(result)
///。。。茫茫多的东西 大家可以自己打印一下

对比一下jQuery和vdom的不同

两个例子:

jQuery实现：控制台打开看到,会将整个table DOM重新渲染,这并不符合我们的预期，我们希望的是每次修改能够只修改我们想要修改的DOM而不是重新渲染所有的DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.

最低0.47元/天解锁文章