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

当我用<span>标记替换字符串时,MutationObserver创建无限循环

当你使用<span>标记替换字符串时,MutationObserver创建无限循环的原因是因为MutationObserver会监听DOM的变化,并在每次变化发生时触发回调函数。当你使用<span>标记替换字符串时,会导致DOM的结构发生变化,从而触发MutationObserver的回调函数。而在回调函数中又对DOM进行了修改,进而再次触发MutationObserver的回调函数,从而形成了无限循环。

为了解决这个问题,你可以在回调函数中添加一个判断条件,当满足某个条件时,停止对DOM的修改,从而避免无限循环。例如,你可以在回调函数中判断是否已经替换了所有的<span>标记,如果是,则停止对DOM的修改。

另外,你还可以使用其他方法来替换字符串,而不是直接操作DOM。例如,你可以使用正则表达式来替换字符串,或者使用字符串的replace方法进行替换。这样可以避免对DOM进行频繁的修改,从而减少MutationObserver的触发次数。

总结起来,当你使用<span>标记替换字符串时,要注意MutationObserver可能会创建无限循环的问题。你可以通过添加判断条件或使用其他方法来替换字符串来解决这个问题。

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

相关·内容

JavaScript 高级程序设计(第 4 版)- DOM

任何时候要迭代 NodeList,最好再初始化一个变量保存当时查询的长度,然后用循环变量与这个变量进行比较 最好限制操作 NodeList 的次数。...记录队列 每次 MutationRecord 被添加到 MutationObserver 的记录队列,仅当之前没有已排期的微任务回调(队列中微任务长度为 0),才会将观察者注册的回调(在初始化 MutationObserver...属性,会返回元素所有后代的 HTML 字符串,包括元素、注释和文本节点。...outerHTML 属性 读取 outerHTML 属性,会返回调用它的元素(及所有后代元素)的 HTML 字符串。...在写入outerHTML 属性,调用它的元素会被传入的 HTML 字符串经解释之后生成的 DOM 子树取代。

1.1K30
  • 如何在页面中监听“不存在”的 DOM 节点

    前言事情是这样的,某天我想给文档网站加个访问量统计的插件,这个插件是第三方的,工作原理是将数据填充到页面中特定 id 的节点上,例如有一个 的节点,插件加载完成后就会通过...如果你的网站是自己例如 Vue 这样的框架编写的,那你自然会想到在 onMounted 生命周期里加载脚本,但在这个场景下页面真正渲染完成是在一个黑盒当中,那么我要如何才能获知这个本“不存在”的 DOM...有没有什么方法可以避免无意义的轮询,又能在渲染完成第一间加载脚本呢?这就要提到 MutationObserver 这个浏览器 API 了。...当 MutationObserver 绑定到一个节点上,它会创建一个观察器实例,该实例会监听其绑定的节点及其子节点的变化,并在发生变化时触发一个回调函数。...编辑器自动保存当我们给一个普通的 div 添加 contentEditable 属性,它便具有了可编辑的能力,这时我们可以通过 MutationObserver 来监听文本内容的变动,并执行某些逻辑,

    1.2K40

    Vue.js框架中权衡的艺术

    一般我们插入大量新HTML标记时,使用innerHTML 与 通过多次DOM操作先创建节点再指定它们之间的关系相比,效率更高,因为在设置innerHTML 就会先创建一个HTML解析器,这个解析是在浏览器级别的基础上代码...当新建页面 const html = ` ...... ` div.innerHTML = html 通过 innerHtml 创建页面的性能 = HTML字符串拼接的计算量 + innerHTML的DOM计算量 通过 虚拟dom...创建页面的性能 = 创建虚拟dom的计算量 + 创建真实DOM的计算量 innerHTML 虚拟DOM JavaScript运算 拼接html字符串 创建虚拟dom DOM构建 新建所有dom元素...拼接html字符串 创建虚拟dom + diff算法 DOM构建性能因素 销毁旧dom新建新dom与模版大小相关 必要的dom更新与数据变化量相关 更新dom ,虚拟DOM性能更加优越 修改

    1.7K20

    响应式、模版克隆、Proxy 代理。。。JavaScript 框架工作原理你还了解多少?

    当我阅读大型框架领域的最新动态,我常常会被自己不知道的事情压得喘不过气来。 不过,了解某些东西如何工作的最好方法之一就是自己动手创建。...当我们构建玩具示例,我们也将使用标记模版字面量(Tagged Template Literals),简单来说它可以让我们另一种方式进行函数调用,来创建这样的 API: const dom = html...在 effect 出错使用try/catch 2. 避免重复运行同一 effect 3. 防止无限循环 4....当我们将该 state 传递给 render ,它应该返回应用了该状态的 DOM 树: Blue!...: [ "Hello ", "" ] 只有当标记模板的位置完全不同时, tokens 才会不同: html`` html``

    19110

    nextTick的原理及运行机制

    JS运行机制 JS执行是单线程的,它是基于事件循环的。事件循环大致分为以下几个部分: 所有同步任务在主线程上执行,形成一个执行栈。 主线程之外,还存在一个“任务队列”。只要异步有了运行结果。...[1](html5新特性,会在指定的DOM发生变化时被调用) Vue是异步更新DOM的 vue 是异步驱动视图更新的,即当我们在事件中修改数据,视图并不会即时的更新, 而是在等同一事件循环的所有数据变化完成后...,再进行事件更新; vue文档中的介绍[2]: Vue 在更新 DOM 是异步执行的,只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。...然后,在下一个的事件循环tick中, Vue 刷新队列并执行实际(已去重)的工作。...这也验证了上面提到的 Vue在更新DOM是异步更新的。

    1.3K50

    vue高频面试题合集(四)附答案

    那么优化过程就是深度遍历AST树,按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对,对运行时的模板起到很大的优化作用。...mounted(挂载后):在el被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。...然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。beforeDestroy(销毁前):实例销毁之前调用。... keep-alive 包裹的组件在切换不会进行销毁,而是缓存到内存中并执行 deactivated 钩子函数,命中缓存渲染后会执行 activated 钩子函数。...首先,对比节点本身,判断是否为同一节点,如果不为相同节点,则删除该节点重新创建节点进行替换如果为相同节点,进行patchVnode,判断如何对该节点的子节点进行处理,先判断一方有子节点一方没有子节点的情况

    71340

    2 行代码,将 .NET 执行时间降低 87%!(附代码)

    创建请求,消费者可以提供一个可选的请求值,以指定特定索引。在这种情况下,必须在运行时构建URL,通过用户提供的索引名称替换URL中的{索引}部分。...必要还可以使用带有标记的URL模式,利用调用者代码提供的路由值替换可选的标记,从而创建最终的URL字符串。...然后,遍历带有标记的URL中的每个字符串。URL路径中的标记元素存储在字符串数组字段“_tokenized”中。在每次迭代中,如果字符串值以“@”字符开头,则表明需要用相应的值替换它。...当所有带有标记的值都被添加并替换之后,就可以调用StringBuilder的ToString方法,返回最终的字符串。每次客户端发送请求,这段代码都会被调用,因此是库中的热路径。...现在这段代码使用的是StringBuilder,这是良好的实践,在需要将补丁数量的字符串连接到一起,可以避免字符串分配。有几种使用Span的方法可以减少字符串分配的次数。

    48741

    JavaScript——字符串对象

    索引号) str.charCodeAt(0) str[index] 获取指定位置字符串 HTML5,IE8+支持 charAt(index) 根据位置返回字符串 var...; console.log(str.concat('Yue'));//zeyiYue 注:在开发中,我们更喜欢  + 来拼接字符串 截取字符串...//只会替换第一个匹配到的字符 如果想全部替换,可以使用循环 var str = '天生我财必有用,财源广进'; while (str.indexOf('财') !...简单类型传参 函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。...复制类型传承 函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参,其实是把变量在栈空间里保存的堆地址复制给了形参,形参和实参其实保存的是同一个堆地址,所以操作的是同一个对象。

    35210
    领券