BestHub
Sign in
Tag

DOM

1 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2025 · Frontend Development

Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements

This article explains the underlying browser mechanisms that cause page jank when creating millions of DOM elements, analyzes the event loop, rendering pipeline, macro‑ and micro‑tasks, and presents practical solutions such as setTimeout, requestAnimationFrame, MessageChannel, and requestIdleCallback to keep the UI responsive.

DOMEvent LoopJavaScript
0 likes · 16 min read
Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 12, 2025 · Frontend Development

Make Any Webpage Editable with a Single JavaScript Command (document.designMode)

This article demonstrates how to turn an entire web page into an editable document instantly by setting the document.designMode property to "on" via the browser console, explains how to disable it, and compares related APIs such as contentEditable and execCommand.

ContentEditableDOMJavaScript
0 likes · 4 min read
Make Any Webpage Editable with a Single JavaScript Command (document.designMode)
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 9, 2025 · Frontend Development

Understanding Vue.js nextTick: Mechanism, Usage, and Custom Implementation

This article explains the Vue.js nextTick API, why scrolling to newly added list items may stop prematurely, demonstrates proper usage with scrollIntoView, and provides a hand‑written implementation using MutationObserver to ensure DOM updates complete before executing callbacks.

DOMJavaScriptMutationObserver
0 likes · 6 min read
Understanding Vue.js nextTick: Mechanism, Usage, and Custom Implementation
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jan 7, 2025 · Frontend Development

The Evolution of Front-End Development: From Raw DOM to Vue.js

This article traces the evolution of front‑end development from raw DOM manipulation through jQuery to modern Vue.js, highlighting the philosophical ideas behind Vue’s design, code examples, and the benefits of component‑based, reactive frameworks for building maintainable web applications.

DOMReactiveVue.js
0 likes · 11 min read
The Evolution of Front-End Development: From Raw DOM to Vue.js
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 11, 2024 · Frontend Development

Implement Click-to-Scroll to Current User Position in a Vue3 Ranking List

This tutorial explains how to use Vue 3 to render a ranking list, add a unique data-key to each user item, and implement a click handler that smoothly scrolls the selected user into view with Element.scrollIntoView while optionally highlighting the element for two seconds.

DOMHighlightJavaScript
0 likes · 5 min read
Implement Click-to-Scroll to Current User Position in a Vue3 Ranking List
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 28, 2024 · Frontend Development

Understanding Browser Distance and Size Properties for Frontend Development

This article explains how to obtain and calculate various distance and size properties in the browser—such as pageY, clientY, offsetY, scrollY, getBoundingClientRect, scrollTop, offsetTop, clientTop, and height metrics—using React event handlers and plain JavaScript, with practical code examples.

DOMJavaScriptReact
0 likes · 11 min read
Understanding Browser Distance and Size Properties for Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 8, 2023 · Frontend Development

Advanced JavaScript Methods: getBoundingClientRect, IntersectionObserver, createNodeIterator, getComputedStyle, requestAnimationFrame

This article introduces five lesser‑known but powerful JavaScript browser APIs—getBoundingClientRect, IntersectionObserver, createNodeIterator, getComputedStyle, and requestAnimationFrame—explaining their properties, typical application scenarios such as drag‑and‑drop, lazy loading, DOM traversal, style inspection, and animation timing, and providing ready‑to‑use code examples.

Browser APIsDOMJavaScript
0 likes · 11 min read
Advanced JavaScript Methods: getBoundingClientRect, IntersectionObserver, createNodeIterator, getComputedStyle, requestAnimationFrame
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 12, 2023 · Frontend Development

Detecting Text Ellipsis and Showing a Popper on Hover with CSS and JavaScript

This article explains how to apply CSS ellipsis to truncate overflowing text, then use JavaScript—particularly the createRange API and temporary DOM measurements—to detect when truncation occurs and display a popper tooltip only on hover, comparing several practical implementation methods.

CSSDOMEllipsis
0 likes · 9 min read
Detecting Text Ellipsis and Showing a Popper on Hover with CSS and JavaScript
政采云技术
政采云技术
Aug 2, 2023 · Frontend Development

Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver

This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.

DOMIntersectionObserverJavaScript
0 likes · 8 min read
Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver
php中文网 Courses
php中文网 Courses
Jul 28, 2023 · Backend Development

Parsing and Generating XML Files in PHP

This article explains how to use PHP's built-in XML extension to parse XML files into a DOM tree and to generate XML documents programmatically, providing step‑by‑step code examples for loading, traversing, creating elements, setting attributes, and saving the resulting XML files.

DOMGenerationPHP
0 likes · 4 min read
Parsing and Generating XML Files in PHP
360 Tech Engineering
360 Tech Engineering
Jul 3, 2023 · Frontend Development

Rendering Techniques for Browser Visualizations: DOM, SVG, Canvas, WebGL, and WebGPU

This article explains the four primary browser rendering approaches—DOM (HTML+CSS), SVG, Canvas, and WebGL/WebGPU—detailing their principles, advantages, limitations, and practical examples to help developers understand the underlying mechanics of web‑based visualizations.

DOMRenderingSVG
0 likes · 12 min read
Rendering Techniques for Browser Visualizations: DOM, SVG, Canvas, WebGL, and WebGPU
DaTaobao Tech
DaTaobao Tech
Jul 14, 2022 · Frontend Development

Implementing a Simple HTML Parser in JavaScript

The article walks through building a simple JavaScript HTML parser by explaining browser parsing basics, using regular expressions to detect tags, managing a stack to match opening and closing elements, creating element and text node objects, and outlining code snippets while noting omitted features like script and style handling.

DOMHTML ParserJavaScript
0 likes · 9 min read
Implementing a Simple HTML Parser in JavaScript
Baidu Geek Talk
Baidu Geek Talk
Mar 21, 2022 · Frontend Development

How WebKit Parses HTML: Decoding, Tokenization, and DOM Tree Construction

The article details WebKit’s rendering pipeline in WKWebView, describing how the network process streams HTML bytes to the rendering process, which decodes them via TextResourceDecoder, tokenizes the characters with HTMLTokenizer’s state machine, and constructs an efficient DOM tree using HTMLTreeBuilder and queued insertion tasks.

Browser EngineDOMHTML parsing
0 likes · 33 min read
How WebKit Parses HTML: Decoding, Tokenization, and DOM Tree Construction
Baidu App Technology
Baidu App Technology
Mar 7, 2022 · Mobile Development

How WKWebView Parses HTML: Decoding, Tokenization, and DOM Tree Construction

WKWebView parses HTML by streaming bytes from the network process to the rendering process, decoding them into characters, tokenizing into HTML tokens, building a DOM tree through node creation and insertion, and finally laying out and painting the document using a doubly‑linked in‑memory structure.

DOMHTML parsingWKWebView
0 likes · 37 min read
How WKWebView Parses HTML: Decoding, Tokenization, and DOM Tree Construction
Yuewen Frontend Team
Yuewen Frontend Team
Feb 24, 2022 · Frontend Development

Master Selections and Cursors in Web Development: Complete Guide with Code Samples

This comprehensive tutorial explains how selections and cursors work in web pages, covering the underlying Selection and Range APIs, handling editable and non‑editable elements, manipulating text in inputs, textareas, and rich content, and providing practical code snippets for every scenario.

CursorDOMJavaScript
0 likes · 21 min read
Master Selections and Cursors in Web Development: Complete Guide with Code Samples
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 11, 2021 · Frontend Development

Understanding Event Bubbling and Capturing in JavaScript

This article explains JavaScript’s event flow, detailing the three phases of capturing, target, and bubbling, demonstrates how to use addEventListener with the useCapture flag, and shows practical techniques for handling, delegating, and stopping event propagation in web applications.

DOMEvent BubblingEvent Capturing
0 likes · 10 min read
Understanding Event Bubbling and Capturing in JavaScript
Sohu Tech Products
Sohu Tech Products
Dec 9, 2020 · Frontend Development

Automatic Generation of Skeleton Screens Using DOM Analysis and Puppeteer

This article explains what skeleton screens are, reviews existing implementation methods, and presents a custom DOM‑based approach with configurable rules, code snippets, and a Puppeteer‑driven CLI tool that automatically generates and injects skeleton screens for web pages.

DOMPuppeteerSkeleton Screen
0 likes · 11 min read
Automatic Generation of Skeleton Screens Using DOM Analysis and Puppeteer
Practical DevOps Architecture
Practical DevOps Architecture
Nov 16, 2020 · Frontend Development

Introduction to JavaScript: Basics, Inclusion Methods, Selectors, Events, and DOM Manipulation

This article introduces JavaScript fundamentals, explains three ways to include scripts, demonstrates simple click events, shows how to use selectors, outlines event handling, and covers DOM manipulation techniques such as modifying content, styles, and classes, including retrieving computed styles.

CSS SelectorsDOMJavaScript
0 likes · 5 min read
Introduction to JavaScript: Basics, Inclusion Methods, Selectors, Events, and DOM Manipulation
php中文网 Courses
php中文网 Courses
Nov 12, 2020 · Frontend Development

Understanding Node, Element, NodeList, and HTMLCollection in the DOM

This article explains the differences between Node and Element in the DOM, clarifies the roles of NodeList and HTMLCollection, demonstrates how to inspect child nodes with code examples, and provides practical tips for handling these objects in frontend development.

DOMElementJavaScript
0 likes · 4 min read
Understanding Node, Element, NodeList, and HTMLCollection in the DOM