虚拟DOM的好处_前端_web_建站_vue_react_leaflet_arcgis

什么是虚拟dom

用 JS 模拟 dom 结构，对真实 DOM 结构的一个映射，状态变更的时候，对比差异，最后把差异更新到真正的 DOM 中

虚拟DOM的好处？

加入我们使用JQ渲染一些数据，大概步骤就是定义一个渲染函数，渲染函数刚开始会把所有的子节点清空，然后在渲染一次。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <ul class="list">
    </ul>
    <input id="btn1" type="button" value="点我" onclick="test();" />
</body>



<script>
    var test;
    $(function () {
        var listData = [
            { name: '张三', age: 18 },
            { name: '李四', age: 19 },
            { name: '王五', age: 20 },
            { name: '赵六', age: 21 },
        ]
        var $list = $('.list')
        //定义渲染函数

        function render(data) {

            //每次渲染先把自身清空
            $list.html('')
            data.forEach(function (item, index) {
                $list.append($('<li>姓名：' + item.name + '年龄：' + item.age + '<button class="change-data" onclick="test(' + index + ')">修改数据</button></li>'))
            })

        }
        // 改变值后，等于又把所有的子元素重新渲染了一边，耗费性能
        test = function (index) {
            listData[index].name = '修改后的数据'
            render(listData)
        }

        //首次渲染
        render(listData)
    })

</script>

</html>

这是使用JQ的渲染数据，在render函数的时候每次会把父节点清空然后重新渲染，如果我们能找出差异，只渲染差异的部分，这样就提升了性能

DOM操作是昂贵的，为什么昂贵那，因为每次创建DOM，就是创建一个DOM对象，DOM对象又包含了很多很多的DOM属性,尽量减少DOM操作，不要删除重来

另外重要的一点，如果我们使用原声或者JQ操作DOM的时候，会从构建DOM树->css样式表->将DOM树和CSS样式表关联起来，生成render树，每个节点都有一个attach方法，接受样式信息，返回一个rende对象，最终生成一个render树->有了render树后就是layout布局，为每个render树的节点确定一个显示在浏览器的精确位置->render树和节点显示坐标都有了之后，就调用节点的paint方法，把他们绘制出来

在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

为什么需要虚拟DOM，它有什么好处?

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发生变化时，其实就是对应某个DOM节点发生了变化，

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

正文

虚拟DOM的好处

什么是虚拟dom