Virtual DOM

1.为什么使用虚拟DOM?

DOM操作太消耗浏览器计算资源,diff算法才有其存在的意义。 DOM操作为什么慢? 1.直观感受:在浏览器控制台,用for循环遍历div属性,会看到有很多属性输出。对于浏览器渲染引擎而言,一个HTML元素就是一个占用内存的数据结构,因此元素的属性越多理论上占用的内存越多,就越消耗性能。再从另外一个角度分析,页面渲染也是图形化的过程,玩游戏的朋友应该知道网络稍微不好,游戏页面就很卡,也就是说图形化是很消耗硬件资源的。 浏览器渲染:DOM操作会引起浏览器repaint和reflow。 如何减少DOM操作? 先隐藏需要操作的DOM:display:none,再显示:display:block。 离线操作DOM:我们先将元素脱离文档流,然后对元素进行操作,最后再把操作后的元素放回文档流。 可以cloneNode,将DOM操作变成纯粹的内存操作 createDocumentFragment 操作完成之后替换原来的DOM元素。如果是添加多个节点,将所有DOM节点都在内存中拼装完成之后再append到DOM中。 replaceChild appendChild 2.为什么用JavaScript模拟DOM结构?

因为JavaScript是图灵完备语言,图灵完备语言即支持无限循环等逻辑操作。换成一种思路,前端也就HTML、CSS、JavaScript三门编程语言,不用JavaScript,难道用CSS?HTML更不可能了,DOM本身就是HTML。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 疑问汇总

    angular模块化怎么做的? 指令、过滤器 虚拟DOM webpack原理 gulp JQuery $ 双向数据绑定MVVM promise实现...

    城市中的游牧民族
  • Windows错误、问题汇总

    参考链接——http://ask.zol.com.cn/x/3029281.html

    城市中的游牧民族
  • 前后端交互的问题

    1.返回的JSON数据中存在英文双引号 前后端约定的数据格式是json,但是这种情况下前端无法解析。 举例: { "name": "你好"老吴"...

    城市中的游牧民族
  • 从 React 历史的长河里聊虚拟DOM及其价值

    本质上是 JavaScript 对象,这个对象就是更加轻量级的对 DOM 的描述。

    前端劝退师
  • 增量 DOM 与虚拟 DOM 的对比使用

    如果你熟悉 React,你大概听说过虚拟 DOM 的概念。React 受欢迎的主要原因之一就是通过虚拟 DOM 提高用户界面性能。

    桃翁
  • React虚拟DOM的理解

    Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最...

    WindrunnerMax
  • Shadow DOM 初探

    Shadow DOM用官方的翻译来说就是影子 DOM,他能够为Web组件中的 DOM和 CSS提供了封装,实际上是在浏览器渲染文档的时候会给指定的DOM结构插入...

    IMWeb前端团队
  • 现代前端技术解析:现代前端交互框架

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • Shadow DOM v1 简介

    Shadow DOM 是 Web Components 定义的四大标准之一。Shadow DOM 解决了构建网络应用的脆弱性问题。脆弱性是由 HTML、CSS ...

    阿宝哥
  • Shadow DOM简介

    一个网页会形成一颗DOM树,树上有很多结点,但过多的结点使结构复杂起来,Shadow DOM允许我们用封装的方式简化这种结构。Shadow DOM是网页DOM树...

    gojam

扫码关注云+社区

领取腾讯云代金券