虚拟 DOM

最新推荐文章于 2024-02-03 15:50:20 发布
最新推荐文章于 2024-02-03 15:50:20 发布
阅读量146 收藏 1
点赞数
分类专栏： 虚拟 DOM 文章标签： vue 虚拟 DOM diff算法 vdom的如何应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43949788/article/details/102662823
版权

虚拟 DOM

本章分析了虚拟 DOM 的使用场景、常用 API、以及 diff 算法 的代码框架。通过学习和了解虚拟 DOM ，为后面的 vue 和 React 学习打好基础。

知识点

5-1 什么是 vdom，为何使用 vdom？

5-2 vdom 的如何应用，核心 API 是什么？

5-3 介绍 一下 diff 算法

Ignorance is the curse of God, knowledge the wing wherewith we fly to heaven.——William Shakespeare

无知乃是罪恶，知识乃是我们借以飞向天堂的翅膀。——莎士比亚

virtual dom

  • vdom 是 vue 和 React 的核心，先讲哪个都绕不开它
  • vdom 比较独立，使用也比较简单
  • 如果面试问到 vue 和 React 的实现，免不了问 vdom

问题

  • vdom 是什么？为何会存在 vdom？
  • vdom 的如何应用，核心 API 是什么？
  • 介绍一下 diff 算法

5-1 什么是 vdom，为何使用 vdom？

知识点

  • 什么是 vdom？
  • 设计一个需求场景
  • 用 jQuery 实现
  • 遇到的问题
什么是 vdom？
  • virtual dom，虚拟 DOM
  • 用 JS 模拟 DOM 结构
  • DOM 变化的对比，放在 JS 层来做 （ 图灵完备语言 ）
  • 提高重绘性能
<ul id="list">
    <li class="item">Item 1</li>
	<li class="item">Item 2</li>
</ul>

用 JS 模拟 DOM

// vdom
{
    tag:'ul',
    attrs:{
        id:'list'
    },
    children:[
        {
            tag:'li',
            attrs:{className:'item'},
            children:['Item 1']
        },
        {
            tag:'li',
            attrs:{className:'item'},
            children:['Item 2']
        }
    ]
}
设计一个需求场景
/*
* 1.将该数据展示成一个表格
* 2.随便修改一个信息，表格也跟着修改
* */
[
    {
    name: '张三',
    age: '20',
    address: '北京'
    }, {
    name: '李四',
    age: '21',
    address: '上海'
    }, {
    name: '王五',
    age: '22',
    address: '广州'
    }
]

jQuery 实现 ：

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

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
    var data = [
        {
            name: '张三',
            age: '20',
            address: '北京'
        }, {
            name: '李四',
            age: '21',
            address: '上海'
        }, {
            name: '王五',
            age: '22',
            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>'))
        })

        //渲染 到页面   jQuery放在这里：只有 一次DOM渲染，性能更好，但是 并不符合理想情况
        $container.append($table)
    }

    $('#btn-change').click(function () {
        data[1].age = 30
        data[2].address = '深圳'
        //  re-render 再次渲染
        render(data)
    })

    //页面加载完，立即执行
    render(data)
</script>
</body>
</html>

mark

遇到的问题
  • DOM 操作是 “昂贵”的，js 运行效率高
  • 尽量减少 DOM 操作 ，而不是 “推倒重来”
  • 项目越复杂 ，影响就越严重
  • vdom 即可解决这个问题
问题解答

  • vdom 是什么？为何会存在 vdom？

    • virtual dom，虚拟 DOM
    • 用 JS 模拟 DOM 结构
    • DOM 操作非常 “昂贵”
    • 将 DOM 对比操作放在 JS 层，提高效率

  • vdom 的如何应用，核心 API 是什么？

    • 介绍 snabbdom
    • 重做 之前的 demo
    • 核心 API

5-2 vdom 的如何应用，核心 API 是什么？

介绍 snabbdom ：一个 vdom 实现库。

介绍 snabbdom

虚拟DOM非常棒。它允许我们将应用程序的视图表示为其状态的函数。但现有的解决方案太过臃肿，太慢，缺乏功能，API偏向于OOP和/或缺少我需要的功能。

Snabbdom 由一个非常简单，高性能和可扩展的核心组成，只有≈200SLOC。它提供了模块化架构，具有丰富的功能，可通过自定义模块进 为了保持核心简单，所有非必要功能都委托给模块。

你可以将 Snabbdom 塑造成你想要的任何东西！选择，选择和自定义所需的功能。或者，您可以使用默认扩展并获得具有高性能，小尺寸和下面列出的所有功能的虚拟DOM库。

介绍 snabbdom - h 函数

mark

介绍 snabbdom -patch 函数

mark

使用 snabbdom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.min.js"></script>
<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)

    document.getElementById('btn-change').addEventListener('click', function () {
        //生成 newVnode
        var newVnode = h('ul#list', {}, [
            h('li.item', {}, 'Item 1'),
            h('li.item', {}, 'Item B'),
            h('li.item', {}, 'Item 3')
        ])
        patch(vnode, newVnode)
    })
</script>
</body>
</html>

mark

重做 之前的 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container"></div>
<button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.min.js"></script>
<script>
    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: '21',
            address: '上海'
        }, {
            name: '王五',
            age: '22',
            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) {
            // 再次渲染
            patch(vnode, newVnode)
        } else {
            // 初次渲染
            patch(container, newVnode)
        }
        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>

mark

核心 API

  • h（’<标签名>’，{ … 属性 … }，[… 子元素 …]）
  • h（’<标签名>’，{ … 属性 … }，[ ‘…’]）
  • patch（container，vnode）
  • patch（vnode，newVnode）

问题解答

  • vdom 的如何应用，核心 API 是什么？
    • 如何使用？ 可用 snabbdom的 用法 来 举例
    • 核心 函数 ：h 函数，patch 函数

5-3 介绍 一下 diff 算法

题目

  • 什么是 diff 算法？
  • 去繁就简
  • vdom 为何用 diff 算法 ？
  • diff 算法 的 实现流程
什么是 diff 算法

diff 算法 一直在我们身边

并不是 Vue 和 React 创造出来的概念

diff算法命令演示 ：

  • linux系统下： diff log1.txt log2.txt ：比较2个文件的不同
  • git diff xxxx 的示例 ： git里面比较不同版本间的代码差异
去繁就简
  • diff 算法非常复杂，实现难度很大，源码量很大
  • 去繁就简，讲明白核心流程 ，不关心细节
  • 面试官也大部分都不清楚细节，但是很关心核心流程
  • 去繁就简之后，依然 具有很大挑战性，并不简单
vdom 为何用diff 算法
  • DOM 操作是 “昂贵”的，因此尽量减少DOM 操作
  • 找出本次 DOM 必须更新的节点来更新，其它的 不更新
  • 这个 “ 找出 ” 的过程，就需要 diff 算法

diff 实现过程

  • patch （container，vnode）
  • patch （vnode，newVnode）
patch （container，vnode）

mark

核心：如何使用 左边的 JS 节点 生成 右侧 Dom 节点？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQ94N5ST-1571637673592)(http://static.zxinc520.com/blog/20190826/xcTxunRSOhnV.png?imageslim)]

patch （vnode，newVnode）

核心：**对比 **

mark

mark

mark

diff 实现过程
  • patch （container，vnode）和 patch （vnode，newVnode）
  • createElment
  • updataChildren

问题解答

  • 介绍一下 diff 算法？
    • 知道什么是 diff 算法，是linux 的基础命令
    • vdom 中 应用 diff算法目的： 是为了 找出需要更新的节点
    • diff 实现：patch （container，vnode）和 patch （vnode，newVnode）
    • 核心 逻辑 ， createElment 和 updataChildren
小P孩一枚
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
虚拟DOM
小王的博客
08-24 1382
虚拟DOM相关知识
虚拟dom (virtual dom)(vnode)
热门推荐
yiyueqinghui的博客
04-12 2万+
1,虚拟DOM的逻辑（React虚拟dom到真实dom发生了什么） 2，React16 更新了什么 React16中引入了Fiber这个概念，从根本上解决了由于js的单线程运行，遇到计算量较大的情况，导致动画和交互卡顿的问题。 Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务，并且可随时中止或恢复任务，同时也可以...
虚拟 DOM 详解
TongJ_的博客
02-20 2751
虚拟 dom 本质上就是一个普通的 JS 对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一棵虚拟 DOM 树
虚拟dom详解
最新发布
qq_42931285的博客
02-03 1059
虚拟dom详解
什么是虚拟DOM
weixin_44439675的博客
05-06 1万+
一、前端 - 从接收html 到 体现在页面上的流程： 1.创建DOM树（分析HTML元素，构建一颗DOM树） 2.创建StyleRules（分析CSS文件和元素上的inline样式，生成页面的样式表） 3.创建Render树（将DOM树和样式表，关联起来） 4.布局Layout（浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标） 5.绘制Painting（调用每个节点paint方法，把它们绘制出来） 二、什么是DOM： Document Object Model(文档对象
虚拟 DOM 是什么? 有什么优缺点?
zhangyu812的博客
04-27 3991
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 ...
浅谈React的最大亮点之虚拟DOM
08-27
主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
虚拟DOM的实现
05-20
这是虚拟DOM简单实现的代码，理解时可以参考http://blog.csdn.net/dear_mr/article/details/72566716
vue 虚拟DOM的原理
01-21
为什么需要虚拟DOM？ 　如果对前端工作进行抽象的话，主要就是维护状态和更新视图，而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。 　运行js的速度是很快的，...
解决vue中虚拟dom,无法实时更新的问题
10-18
今天小编就为大家分享一篇解决vue中虚拟dom,无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如何理解虚拟DOM
种麦南山下的博客
10-11 4807
虚拟 DOM （Virtual DOM ）是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM。
vue中的虚拟dom
九仞山的专栏
06-06 4506
介绍了vue中的虚拟DOM的实现原理，以及v-for指令中为什么要设置key值
虚拟DOM和真实DOM的区别和联系
xiaomao_wxj的博客
11-01 2608
虚拟DOM和真实DOM区别和联系
虚拟dom
weixin_52972239的博客
06-14 1577
1、虚拟DOM（virtual DOM）简称vdom，是一个普通的js对象，用来描述真实dom结构，因为它不是真实的DOM，所以称为虚拟DOM 2、属性：vdom具有三个属性 （1）tag：标签名 （2）attrs：属性 （3）children：子元素对象3、虚拟DOM的设计思想 （1）提供一种方便的工具，使开发效率得到保证； （2）保证最小化的DOM操作，使得执行效率得到保证1、原因一：真实的DOM运行是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，真实的DOM节点，哪怕一个最简单
什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路
lllllrp的博客
08-09 520
虚拟 DOM （）这个概念相信大家都不陌生，从React到Vue，虚拟DOM为这两个框架都带来了跨平台的能力（和Weex实际上它只是一层对真实DOM的抽象，以JavaScript对象 (VNode节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上在Javascript对象中，虚拟DOM表现为一个Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别创建虚拟。
vue 虚拟 DOM理解
08-20
Vue 的虚拟 DOM 是一种在内存中以 JavaScript 对象的形式表示页面结构的技术。它是 Vue 在渲染页面时的一个关键概念。 传统的 DOM 操作是直接操作页面上的实际 DOM 元素，而虚拟 DOM 则是通过 JavaScript 对象来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值