首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

javascript/dom - 创建vs重新安排dom节点有多贵?

在JavaScript/DOM中,创建和重新安排DOM节点的成本取决于许多因素,包括节点的数量和复杂性、布局和渲染的要求、使用的浏览器引擎和版本等。然而,一般来说,在JavaScript/DOM中创建和重新安排DOM节点相对较为便宜。

在成本方面,创建一个新的DOM节点通常非常便宜,因为浏览器引擎提供了内置的API来处理这个过程。例如,通过createElement()方法创建一个新的DOM节点,只需要几个步骤,成本非常低。

相比之下,重新安排DOM节点通常需要更复杂的操作,并且可能需要更多的计算和资源。例如,如果你需要移动一个DOM节点,你需要将该节点从原来的位置移除,然后在新的位置插入它。这个过程中,你需要修改元素的属性、样式、子节点等,这些操作可能会涉及到更多的计算和资源。

因此,总的来说,创建和重新安排DOM节点在成本方面的差异可能不是非常显著。但是,如果你需要频繁地创建和重新安排大量的DOM节点,那么可能会需要考虑优化和减少资源消耗。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Vue.js框架中权衡的艺术

    ,修改dom 需要先找到真实dom 和虚拟dom的差异,更新dom差异的地方。...不知道这个api的可以去查一查,活着看下我之前写的dom bom博客, 从零开始学习dom bom innerHTML 可以获取调用元素的所有子节点对应的html片段 可以是根据指定的值创建DOM树,替换原有的元素节点...一般我们插入大量新HTML标记时,使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比,效率更高,因为在设置innerHTML 时就会先创建一个HTML解析器,这个解析是在浏览器级别的基础上代码...创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量 innerHTML 虚拟DOM JavaScript运算 拼接html字符串 创建虚拟dom DOM构建 新建所有dom元素...新建所有dom元素 新建页面时,JavaScript运算和DOM构建层面相差不大,innerHTML 性能甚至优于 虚拟dom 当更新页面时 innerHTML 虚拟DOM JavaScript运算

    1.7K20

    10个非常基础的Javascript面试问题

    本文特别适合正在寻找Javascript开发工作的初学者。我搜索了许多Javascript面试问题,这10个对我来说似乎最重要。让我们深入研究一下。 1.什么是Javascript?...它是一种基于原型的范式脚本语言,它是动态的,并支持面向对象,命令式和函数式编程样式。 2.什么是DOM DOM代表文档对象模型。加载网页后,浏览器会使用HTML和CSS文件创建一个DOM。...DOM节点和元素表示。您可以使用javascript处理DOM。它是一个树状结构。 3. JS代码如何执行 要回答的问题有点大。但是我们可以简单地说一下。Javascript在浏览器上运行。...Var vs Let vs Const 在ES6之前,var是声明变量的唯一方法。但是现在我们更多选择。 一个术语作为范围。范围是指可以使用这些变量的位置。...可以通过从一个函数返回另一个函数来创建它。它为每个实例创建一个封闭的环境。

    67110

    JQuery入门

    JQuery入门 Jquery cdn加速 快速入门 1.先引入依赖2.使用script标签引入3.编写jquery代码VS javaScript代码重点1: (): 调用方法 ()---->叫做jquery...)来绑定点击响应函数,把单击响应函数作为click()的参数传入即可重点3: 核心函数$ ()的四种用法 1.传入参数为函数时,文档加载完成就执行该函数 2.传入参数html字符串时,根据这个字符串创建元素节点对象...----apppendTo方法 3.传入参数为选择器字符串时,根据这个字符串查找元素节点对象 4.传入参数为DOM对象时,将DOM对象包装成JQuery对象返回 dom对象转jquery对象----》...dependency> 2.使用script标签引入 3.编写jquery代码VS...$(function (){ alert("大忽悠") }) ---- 2.传入参数html字符串时,根据这个字符串创建元素节点对象

    5.2K20

    浏览器工作原理 - 页面

    ,HTML 解析器会为该 Token 创建一个 DOM 节点,然后将该节点添加到 DOM 树中,它的父节点就是栈中相邻那个元素生成的节点 如果解析出 Text Token,会生成文本节点,将该节点加入...的 DOM 节点,添加到 document 上: 然后依次解析 body 和 div: 当解析出 Text Token 时,渲染引擎会为 Text Token 创建一个文本节点,并将其添加到 DOM...的解析,因为 JavaScript 可能会修改当前已经生成的 DOM 结构: HTML 解析器暂停工作后,JavaScript 引擎会介入,并执行 script 标签中的脚本,将 DOM 节点中内容进行修改...修改 CSSOM 的能力,所以在执行 JavaScript 前,还需要依赖 CSSOM,即 CSS 在部分情况下也会阻塞 DOM 生成。...需要一种方法来减少 JavaScriptDOM 的操作,所以了虚拟 DOM

    85320

    JavaScript高级程序设计学习总结一

    大家好,又见面了,我是你们的朋友全栈君 一,JavaScript的实现 JavaScript和ECMAScript通常都被人认为是相同的含义,JavaScript的含义比ECMAScript规定要...一个完整的的JavaScript实现应该由三个不同的部分组成。...规定的内容: 语法 类型 语句 关键字 保留字 操作符 对象 三,文档对象类型(DOMDOM是针对XML但经过扩展用于HTML的应用程序编程接口(API,应用程序编程接口)。...DOM把整个页面印射为一个多层节点结构.HTML或XHL页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。...看下图: 通过DOM创建的表示文档的实行图,开发人员获得了控制页面内容和结构的主动权。借助DOM提供的API,开发人员可以轻松自如地删除,添加,替换,或修改任何节点

    53440

    在vue的v-for循环中,key为什么不能用index?

    is undefined),直接执行 destroyhook 并返回2、如果旧节点不存在(oldVnode is undefined),直接创建节点3、如果新节点与旧节点都存在则进入下一层判断,对节点进行比对图片参考...前端进阶面试题详细解答4、使用 sameVnode 函数判断新节点与旧节点是否为相同的节点,如果相同则递进对比其子节点,如果不同则直接重新创建节点patchVnode 函数图片1、如果新节点为文本节点...更新子节点2.2、如果只有新节点 child,则直接添加子节点(addVnode)2.3、如果只有旧节点 child,则直接删除子节点(removeVnodes)2.4、如果旧节点 text,则删除...vs 旧开始节点,如果相同则直接遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步2、新结束节点 vs 旧结束节点,如果相同则直接遍历其 children,调用 patchVnode...4、旧结束节点 vs 新开始节点,如果相同则先把新开始节点移动到旧结束节点的后一个位置,然后遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步5、若前面4种情况都没有命中

    1K10

    在vue的v-for中,key为什么不能用index?4

    is undefined),直接执行 destroyhook 并返回2、如果旧节点不存在(oldVnode is undefined),直接创建节点3、如果新节点与旧节点都存在则进入下一层判断,对节点进行比对图片参考...前端进阶面试题详细解答4、使用 sameVnode 函数判断新节点与旧节点是否为相同的节点,如果相同则递进对比其子节点,如果不同则直接重新创建节点patchVnode 函数图片1、如果新节点为文本节点...更新子节点2.2、如果只有新节点 child,则直接添加子节点(addVnode)2.3、如果只有旧节点 child,则直接删除子节点(removeVnodes)2.4、如果旧节点 text,则删除...vs 旧开始节点,如果相同则直接遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步2、新结束节点 vs 旧结束节点,如果相同则直接遍历其 children,调用 patchVnode...4、旧结束节点 vs 新开始节点,如果相同则先把新开始节点移动到旧结束节点的后一个位置,然后遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步5、若前面4种情况都没有命中

    1K50

    在vue的v-for中,key为什么不能用index?

    is undefined),直接执行 destroyhook 并返回2、如果旧节点不存在(oldVnode is undefined),直接创建节点3、如果新节点与旧节点都存在则进入下一层判断,对节点进行比对图片...4、使用 sameVnode 函数判断新节点与旧节点是否为相同的节点,如果相同则递进对比其子节点,如果不同则直接重新创建节点patchVnode 函数图片1、如果新节点为文本节点(isUndef(vnode.text...更新子节点2.2、如果只有新节点 child,则直接添加子节点(addVnode)2.3、如果只有旧节点 child,则直接删除子节点(removeVnodes)2.4、如果旧节点 text,则删除...vs 旧开始节点,如果相同则直接遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步2、新结束节点 vs 旧结束节点,如果相同则直接遍历其 children,调用 patchVnode...4、旧结束节点 vs 新开始节点,如果相同则先把新开始节点移动到旧结束节点的后一个位置,然后遍历其 children,调用 patchVnode 比较子元素差异,指针往前走一步5、若前面4种情况都没有命中

    1.1K10

    virtual DOM和diff算法(一)

    virtual DOM因react的流行而被人们重视,在没有virtual DOM的时候,我们都是操作dom节点来进行页面的渲染和修改的,相比于频繁操作dom,virtual DOM很好的将dom进行了一层映射...,将原本需要在真实dom进行的创建节点、删除节点、添加节点等一系列复杂的dom操作完全放到virtual DOM中进行。...翻译:呈现react ui时,首先渲染成virtual DOM,这个virtaul DOM不是真实的DOM节点,而是一个轻量的、纯javascript数据结构的普通对象或者数组,代表真实的DOM对象图。...翻译: 当改变发生时,从头开始创建一个新的virtual DOM。这个新的virtual DOM反应了新的数据模型的状态。这时react新旧两个virtual DOM。...今天就说这么,明天更新关于diff算法的学习笔记,敬请期待~ 愿我们能力不向生活缴械投降---Lin 参考文献: http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html

    48940

    【译】理解 Virtual DOM

    正如我所提到的,DOM 两个部分:基于对象的 HTML 文档表示和操作该对象的 API。 例如,让我们将这个简单的 HTML 文档与无序列表和一个列表项一起使用。 <!...Virtul DOM 长什么样? ”Virtul DOM“ 这个名称看起来很神秘,但事实上,它只是一个普通的 Javascript 对象。 让我们重温一下我们之前创建DOM树: ?...一旦收集了所有差异,我们就可以批量更改 DOM,只进行所需的更新。 例如,我们可以循环遍历每个差异,并根据diff指定的内容添加新的子节点或更新旧的子节点。...请注意,这是一个介绍 Virtual DOM 如何工作 的例子,它时极度简化的,在这里很多我没有涉及到的细节。...DOM vs virtual DOM 回顾一下,Virtual DOM 是一种工具,使我们能够以更简单,更高效的方式与DOM元素进行交互。

    1K20

    vue面试考察知识点全梳理3

    虚拟dom由于dom操作耗时十分长,且dom对象的体积很大,单个div的dom属性就有294个之多;Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM...计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:当计算属性被访问时触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(缓存,依赖发生变化才执行)。...什么根据? 答:undefined1、Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计,因此仅进行同层比较。...undefined2、如果父节点不同,放弃对子节点的比较,直接删除旧节点然后添加新的节点重新渲染;undefined3、如果子节点变化,Virtual DOM不会计算变化的是什么,而是重新渲染。...;在组件重新被激活时把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个子元素(将子节点当成树的根节点故只有一个),一般和它搭配使用的 component 动态组件或者是

    83930

    vue面试考察知识点全梳理

    虚拟dom由于dom操作耗时十分长,且dom对象的体积很大,单个div的dom属性就有294个之多;Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM...计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:当计算属性被访问时触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(缓存,依赖发生变化才执行)。...什么根据? 答:undefined1、Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计,因此仅进行同层比较。...undefined2、如果父节点不同,放弃对子节点的比较,直接删除旧节点然后添加新的节点重新渲染;undefined3、如果子节点变化,Virtual DOM不会计算变化的是什么,而是重新渲染。...;在组件重新被激活时把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个子元素(将子节点当成树的根节点故只有一个),一般和它搭配使用的 component 动态组件或者是

    85220

    vue面试考察知识点全梳理

    虚拟dom由于dom操作耗时十分长,且dom对象的体积很大,单个div的dom属性就有294个之多;Virtual DOM 就是用一个原生的 JS 对象去描述一个 DOM 节点,所以它比创建一个 DOM...计算属性 VS 侦听属性计算属性计算属性的触发有以下两种情况:主动访问:当计算属性被访问时触发getter函数,执行用户返回的计算结果,如果返回值发生变化才触发渲染更新(缓存,依赖发生变化才执行)。...什么根据? 答:undefined1、Web UI 中 DOM 节点跨层级的移动操作特别少,可以忽略不计,因此仅进行同层比较。...undefined2、如果父节点不同,放弃对子节点的比较,直接删除旧节点然后添加新的节点重新渲染;undefined3、如果子节点变化,Virtual DOM不会计算变化的是什么,而是重新渲染。...;在组件重新被激活时把缓存的domvnode.elm插入dom树即可;keep-alive组件只处理第一个子元素(将子节点当成树的根节点故只有一个),一般和它搭配使用的 component 动态组件或者是

    80020

    十步零基础JavaScript学习路径

    首先说编辑器的选择,sublime text、vs code、atom、webstorm,还有HBuilder。...关于JavaScript版本,我建议还是从ES5开始学,一定基础之后再来看ES2015+的新特性。 基本语法 学编程语言和学自然语言很多相似的地方,我们得从最基本的单词和语法开始学。...DOM DOM的树状结构 节点:元素节点、文本节点、属性节点 节点关系:同级、父子级等等 获取节点:querySelector、querySelectorAll等等 节点操作:增删改查 事件绑定:事件流和事件委托应该了解一下...DOM提供的方法也很多,仍然不要过多的投入精力,新手自学总是会被这些大量的方法困扰,我们要做的是对DOM一个概括性的了解,至于那些杂乱的接口,后续我们完全可以用jQuery或框架代替。...尾声 通过这十步,就可以对JavaScript体系一个整体的了解,然后重点向那个方向发展,就看自己爱好或是工作需要了。技术的道路很漫长,这只是一个起点。

    90990

    关于Virtual DOM理解和Snabbdom源码浅析

    https://www.zhihu.com/question/31809713/answer/53544875 Virtual DOM库 virtual-dom 一个JavaScript DOM模型,支持元素创建...JavaScript 对象(Vnode)描述真实 DOM init()设置模块,创建 patch() patch()比较新旧两个 Vnode 把变化的内容更新到真实 DOM 树上 Snabbdom搭建项目...核心文件浅析 h.ts h 函数最早见于 hyperscript,使用 JavaScript 创建超文本,Snabbdom 中的 h 函数不是用来创建超文本,而是创建 Vnode。...--》创建注释节点 - sel不为空 --》创建对应的DOM对象;触发模块的钩子函数create;创建所有子节点对应的DOM对象;触发钩子函数create;如果是vnodeinset钩子函数,追加到队列...--》创建注释节点 - sel不为空 --》创建对应的DOM对象;触发模块的钩子函数create;创建所有子节点对应的DOM对象;触发钩子函数create;如果是vnodeinset钩子函数,追加到队列

    1.1K10

    前端开发,从草根到英雄(下)

    要了解JavaScript是如何与网站交互,你需要知道文档对象模型(Document Object Model) DOM是HTML文档中具体的结构,它是对应于HTML节点的、由JavaScript对象构成的树型结构...它对DOM提供了简单直接的描述 JavaScript可以修改DOM元素,这里一个选择HTML元素并修改它的内容的例子: 不要担心,这仅仅是一个简单的例子,你可以通过JavaScript "DOM操作...想学习更多关于JavaScript如何与DOM交互的内容,你要通过以下MDN部分的指导,The Document Object Model 事件 使用DOM开发web和XML的例子 如何创建一个DOM树...试着回答以下问题: 什么是DOM? 如何查询元素? 如何添加事件监听者? 如何合适的改变DOM节点属性?...jQuery 目前为止,你已经使用JavaScriptDOM做了很多操作了。事实是,已经很多DOM操作的库,他们提供API来简化你的代码。

    95710
    领券