Virtual DOM

最新推荐文章于 2024-11-26 19:01:37 发布

mrlwc

最新推荐文章于 2024-11-26 19:01:37 发布

阅读量204

点赞数

分类专栏： VUE 文章标签： virtual dom

本文链接：https://blog.youkuaiyun.com/qq_36630230/article/details/84564632

版权

VUE 专栏收录该内容

2 篇文章

订阅专栏

一，什么是 Virtual DOM

简单来说，Virtual DOM就是使用javascript的json格式模拟了DOM结构的树形结构

如下：

(DOM)

<div id=box" class='boxname'>
    <span title='spantitle'>context</span>
</div>

(Virtual DOM)

{
    tag:'div',
    attrs:{
        id:'box',
        className:'boxname'
    },
    children:[
        {
            tag:'span',
            attrs:{
               title:'spantitle'
            },
            children:['context']
        }
    ]
}

二，Virtual DOM 的好处

在前端的页面渲染中，之前的操作都是通过js获取数据再来操作dom，这样就将html结构通过逻辑来控制，当有数据修改的时候通过删除创建dom的方式来进行页面刷新，由于dom的操作是非常消耗性能的，这样就造成了大量操作dom的时候时常会出现页面卡死的情况，所以尽可能的少操作dom成了前端性能优化的必要手段，Virtual DOM就是将DOM的模型对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。