前端面试（四）vdom（virtual dom）

最新推荐文章于 2022-11-18 07:00:00 发布

weixin_34235135

最新推荐文章于 2022-11-18 07:00:00 发布

阅读量527

点赞数

文章标签：面试前端 javascript ViewUI

原文链接：https://juejin.im/post/5cb4452e5188251b170792fb

版权

什么是vdom,为何要用vdom

什么是vdom

（1）virtual dom , 虚拟DOM

（2）用JS模拟DOM结构

（3）DOM变化的对比，放在JS层来做（JS是图灵完备的语言，能实现算法、递归等）

（4）提高重绘性能

// 实际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>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="container"></div>
    <button id="btn-change">change</button>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script type="text/javascript">
        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>')

            // // 渲染到页面 (如果放在了这里，那么下面会多渲染五次DOM)
            // $container.append($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>复制代码

用jQuery实现
遇到的问题

（1）DOM操作是“昂贵的”， js运行效率高

（2）尽量减少DOM操作，而不是“推到重来”

（3）项目越复杂，影响就月严重

（4）vdom

vdom如何使用，核心函数有哪些

snabbdom
重做之前的dom
核心API

diff算法

什么是diff算法
去繁就简
vdom为何用diff算法
diff算法的核心流程

weixin_34235135

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端面试（四）vdom（virtual dom）

什么是vdom,为何要用vdom什么是vdom（1）virtual dom , 虚拟DOM（2）用JS模拟DOM结构（3）DOM变化的对比，放在JS层来做（JS是图灵完备的语言，能实现算法、递归等）（4）提高重绘性能// 实际DOM 结构<ul id="list"> <li class="item">item 1</li> <li cla...
复制链接

扫一扫