您现在的位置是:首页 > 综合文章 > vuevue

虚拟DOM的好处

譬如朝露2020-05-19vue224人已围观

简介什么是虚拟dom用 JS 模拟 dom 结构,对真实 DOM 结构的一个映射,状态变更的时候,对比差异,最后把差异更新到真正的 DOM 中虚拟DOM的好处...

什么是虚拟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操作,不要删除重来

image.png

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


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


image.png

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

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

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


譬如朝露

文章评论

表情

共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

站长特荐

关闭
QQ 微信 支付宝扫一扫打赏