dom

拾光拾趣录2 天前
前端·性能优化·dom
如何高效判断DOM元素是否进入可视区域业务背景: 某家居平台商品列表页含200+商品卡片,需实现:技术痛点:传统方案痛点:致命缺陷:关键代码解析:
拾光拾趣录6 天前
前端·dom
DocumentFragment:高性能DOM操作在高性能Web应用开发中,DOM操作是前端性能瓶颈的主要来源之一。数据显示,一次DOM回流的花销可能超过1000次JavaScript操作。而DocumentFragment正是解决这个问题的关键利器。
今禾8 天前
前端·react.js·dom
不再为多余的DOM元素烦恼:React Fragment与原生DocumentFragment深度解析在现代前端开发中,我们经常面临一个看似简单但又容易被忽视的问题:如何高效、优雅地渲染多个并列的 DOM 元素?
今禾10 天前
前端·前端框架·dom
别再刷新了!让我们一起走进React Router的无刷新乌托邦在传统的多页面应用(MPA, Multi-Page Application)中,每次页面跳转都意味着:
拾光拾趣录14 天前
前端·vue.js·dom
虚拟DOM超详细流程虚拟DOM(Virtual DOM)是现代前端框架(如Vue和React)性能优化的核心机制。继上篇《虚拟DOM》后,本文将全面解析其工作流程,带你深入理解这个"内存中的DOM操作加速器"如何提升现代Web应用的性能。
拾光拾趣录15 天前
前端·vue.js·dom
虚拟DOM在百万级DOM节点的大型应用中,虚拟DOM可使页面渲染性能提升3-8倍(数据来源于React团队性能测试)。本文从底层实现到性能对比,揭示虚拟DOM的真实价值。
爱编程的喵18 天前
前端·javascript·dom
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码作为前端开发者,你是否曾经为了给一个列表中的每个item添加点击事件而写了一大堆重复代码?或者在动态添加DOM节点时发现事件监听器失效了?今天我们就来深入探讨JavaScript事件机制,看看如何优雅地处理这些问题。
啪叽1 个月前
前端·javascript·dom
探索鲜为人知的浏览器API:document.currentScript的实用案例我时常会在浏览器中发现一些本应多年前就了解的成熟 JavaScript API。比如 window.screen 属性 和 CSS.supports() 方法。令人欣慰的是,我发现并非只有我一个人对这些 API 一无所知。记得我曾发推提到 window.screen,结果收到了大量反馈,原来很多人也不知道这个 API,这让我感觉没那么愚蠢了。
亿牛云爬虫专家3 个月前
深度学习·爬虫代理·dom·性能·代理ip·内容区块·东方财富吧
深度学习在DOM解析中的应用:自动识别页面关键内容区块本文介绍了如何在爬取东方财富吧(https://www.eastmoney.com)财经新闻时,利用深度学习模型对 DOM 树中的内容区块进行自动识别和过滤,并将新闻标题、时间、正文等关键信息分类存储。文章聚焦爬虫整体性能瓶颈,通过指标对比、优化策略、压测数据及改进结果,展示了从单页耗时约 5 秒优化到约 2 秒的过程,极大提升了工程效率。
天天扭码3 个月前
前端·javascript·dom
零基础 | 入门前端必备技巧——使用 DOM 操作插入 HTML 元素在 Web 开发中,动态地将 HTML 元素插入到页面里是一项基础且关键的技能。本文会深入剖析一段运用 DOM 操作插入 HTML 元素的代码,以 EditInPlace 函数为例,讲解其实现思路与代码逻辑。
天天扭码3 个月前
前端·javascript·dom
前端必看 | 用EditInPlace实现B站个性签名设计下面是B站的个性签名设计效果,可以发现这个设计摒弃了传统的表单设计,点击可以在文本上编辑,再次点击可以保存个性签名,这样的设计使得页面简约而不简单!
柚子8163 个月前
javascript·dom
真不要依赖dom结构被上了一课,一个好好的功能突然有一天就不行了。原因只是因为安装了一个浏览器插件。一个浏览器插件是如何能影响我项目的功能的呢
zy0101014 个月前
前端·javascript·react.js·dom·react操作dom
React 直接操作 DOM一般而言,我们在 React 中使用虚拟 DOM 来操作 DOM,但是有些时候,我们需要直接操作 DOM。在 React 中,我们可以使用 useRef 这个 Hook 函数来获取 DOM 元素。分为以下两个步骤:
庸俗今天不摸鱼4 个月前
前端·性能优化·dom
【万字总结】前端全方位性能优化指南(四)——虚拟DOM批处理、文档碎片池、重排规避在浏览器宇宙中,DOM操作如同「时空裂缝」——一次不当的节点更新可能引发连锁重排,吞噬整条渲染流水线的性能。本章直面这一核心矛盾,以原子级操作合并、节点记忆重组、排版禁忌破解为三重武器,重构DOM更新的物理法则。通过虚拟DOM的批处理引擎将千次操作坍缩为单次提交,借助文档碎片池实现90%节点的跨时空复用,再以transform替代top等20项反重排铁律,我们将彻底终结「JavaScript线程阻塞→样式重算→图层复合」的死亡三角循环。当DOM树的每一次颤动都被精密控制,浏览器终于能在量子尺度上重建渲染秩
一只会铲史的猫4 个月前
agent·markdown·dom
一款HTML转Markdown格式的工具目前AI大语言模型的输出基本都是Markdown格式,这就意味着AI是能充分理解Markdown格式的,这一点非常重要。
nameofworld8 个月前
前端·面试·学习方法·promise·dom
前端面试笔试(三)目录一、数据结构算法等综合篇二、代码输出篇1.yield与生成器函数2.this指向有关3.instanceof 与Array.isArray
九月镇灵将9 个月前
爬虫·学习·nodejs·dom·bom·补环境
爬虫逆向学习(十二):一个案例入门补环境此分享只用于学习用途,不作商业用途,若有冒犯,请联系处理站点:aHR0cDovLzEyMC4yMTEuMTExLjIwNjo4MDkwL3hqendkdC94anp3ZHQvcGFnZXMvaW5mby9wb2xpY3k= 接口:/xjzwdt/rest/xmzInfoDeliveryRest/getInfoDeliveryList
胡耀超9 个月前
开发语言·前端·javascript·dom
全面解析文档对象模型(DOM)及其操作(DOM的概念与结构、操作DOM节点、描述DOM树的形成过程、用DOMParser解析字符串为DOM对象)文档对象模型(DOM)是Web开发中的核心概念,它提供了一种结构化的方法来表示和操作HTML和XML文档。通过DOM,开发者可以动态地访问和更新文档的内容、结构和样式。本文将深入探讨DOM的概念与结构、操作DOM节点的方法、DOM树的形成过程,以及如何使用DOMParser解析字符串为DOM对象。
Trouvaille ~1 年前
开发语言·前端·javascript·css·html·dom·事件
【前端基础篇】JavaScript之DOM介绍前面学习的 JS 分成三个大的部分WebAPI 就包含了 DOM + BOM. 这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).
Trouvaille ~1 年前
开发语言·前端·javascript·css·html·dom·bom
【前端基础篇】JavaScript基础介绍在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果,更易理解喔😘以及在看本篇之前最好有HTML与CSS的基础