dom

事件委托性能真相：90%内存节省背后的数据实证最近在面试中，我和一位候选人聊到了事件委托。他说：“我知道事件委托，就是给父元素绑定事件来处理子元素嘛。” 我追问：“那你能说说，为什么要这样做吗？除了处理动态元素，还有什么好处？” 他停顿了一下，说：“应该...性能会好一点吧。”

5大DOM/BOM核心考点：从入门到精通，让面试官眼前一亮上周面试了一位3年经验的前端，简历上写着"精通DOM操作"。我问他事件委托的原理，他说"就是给父元素绑定事件"。我追问"为什么用事件委托？性能提升多少？"，他支支吾吾答不上来。

脑子慢且灵

【Web前端】JS+DOM来实现乌龟追兔子小游戏大家天天开心在学习了JavaSCript这门语言的基础后，并稍微了解了点DOM后，我根据所学的一些课程类似写了一个有关乌龟追兔子的小游戏，这里面有很多关于JS和DOM的知识点包括一丢丢的算法，希望大家可以认真阅读一下

30KB 轻量王者！SortableJS 轻松搞定拖拽需求作为一名每天和 DOM 打交道的前端程序员，我深知在项目中实现拖拽排序功能的痛点 —— 自己手写不仅要处理复杂的鼠标 / 触摸事件，还要考虑兼容性和性能问题。直到我接触到了SortableJS，这个轻量级且功能强大的库彻底改变了我处理拖拽需求的方式。今天就从实际开发角度，带大家全面了解 SortableJS，并通过代码实例演示其核心用法。

葡萄城技术团队

告别 DOM 的旧时代：从零重塑 Web 渲染的未来引言浏览器这玩意儿现在真够诡异的。WebAssembly 在服务器端混得风生水起，但客户端还是那副老样子，跟十年前没啥区别。

从一个动画需求，来学习js中animation动画事件的具体应用本文通过一个具体的动画需求，来讲解一下js中animationend事件使用如下：三个动画相关事件——用于链式动画控制、状态更新操作等交互逻辑

学习 TreeWalker api 并与普通遍历 DOM 方式进行比较TreeWalker 是 JavaScript 中用于遍历 DOM 树的一个接口。允许你以灵活的方式在 DOM 树中进行前向和后向遍历，包括访问父节点、子节点和兄弟节点。适用于处理复杂的 DOM 操作：在遍历过程中进行添加、删除或修改节点的操作，并继续遍历。

拾光拾趣录

如何高效判断DOM元素是否进入可视区域业务背景：某家居平台商品列表页含200+商品卡片，需实现：技术痛点：传统方案痛点：致命缺陷：关键代码解析：

拾光拾趣录

DocumentFragment：高性能DOM操作在高性能Web应用开发中，DOM操作是前端性能瓶颈的主要来源之一。数据显示，一次DOM回流的花销可能超过1000次JavaScript操作。而DocumentFragment正是解决这个问题的关键利器。

不再为多余的DOM元素烦恼：React Fragment与原生DocumentFragment深度解析在现代前端开发中，我们经常面临一个看似简单但又容易被忽视的问题：如何高效、优雅地渲染多个并列的 DOM 元素？

别再刷新了！让我们一起走进React Router的无刷新乌托邦在传统的多页面应用（MPA, Multi-Page Application）中，每次页面跳转都意味着：

拾光拾趣录

虚拟DOM超详细流程虚拟DOM（Virtual DOM）是现代前端框架（如Vue和React）性能优化的核心机制。继上篇《虚拟DOM》后，本文将全面解析其工作流程，带你深入理解这个"内存中的DOM操作加速器"如何提升现代Web应用的性能。

拾光拾趣录

虚拟DOM在百万级DOM节点的大型应用中，虚拟DOM可使页面渲染性能提升3-8倍（数据来源于React团队性能测试）。本文从底层实现到性能对比，揭示虚拟DOM的真实价值。

爱编程的喵

从DOM0到事件委托：揭秘JavaScript事件机制的性能密码作为前端开发者，你是否曾经为了给一个列表中的每个item添加点击事件而写了一大堆重复代码？或者在动态添加DOM节点时发现事件监听器失效了？今天我们就来深入探讨JavaScript事件机制，看看如何优雅地处理这些问题。

探索鲜为人知的浏览器API：document.currentScript的实用案例我时常会在浏览器中发现一些本应多年前就了解的成熟 JavaScript API。比如 window.screen 属性和 CSS.supports() 方法。令人欣慰的是，我发现并非只有我一个人对这些 API 一无所知。记得我曾发推提到 window.screen，结果收到了大量反馈，原来很多人也不知道这个 API，这让我感觉没那么愚蠢了。

亿牛云爬虫专家

深度学习在DOM解析中的应用：自动识别页面关键内容区块本文介绍了如何在爬取东方财富吧（https://www.eastmoney.com）财经新闻时，利用深度学习模型对 DOM 树中的内容区块进行自动识别和过滤，并将新闻标题、时间、正文等关键信息分类存储。文章聚焦爬虫整体性能瓶颈，通过指标对比、优化策略、压测数据及改进结果，展示了从单页耗时约 5 秒优化到约 2 秒的过程，极大提升了工程效率。

零基础 | 入门前端必备技巧——使用 DOM 操作插入 HTML 元素在 Web 开发中，动态地将 HTML 元素插入到页面里是一项基础且关键的技能。本文会深入剖析一段运用 DOM 操作插入 HTML 元素的代码，以 EditInPlace 函数为例，讲解其实现思路与代码逻辑。

前端必看 | 用EditInPlace实现B站个性签名设计下面是B站的个性签名设计效果，可以发现这个设计摒弃了传统的表单设计，点击可以在文本上编辑，再次点击可以保存个性签名，这样的设计使得页面简约而不简单！

真不要依赖dom结构被上了一课，一个好好的功能突然有一天就不行了。原因只是因为安装了一个浏览器插件。一个浏览器插件是如何能影响我项目的功能的呢

React 直接操作 DOM一般而言，我们在 React 中使用虚拟 DOM 来操作 DOM，但是有些时候，我们需要直接操作 DOM。在 React 中，我们可以使用 useRef 这个 Hook 函数来获取 DOM 元素。分为以下两个步骤：