BestHub
Sign in
Tag

browser rendering

1 views collected around this technical thread.

Baidu Geek Talk
Baidu Geek Talk
Dec 18, 2023 · Frontend Development

Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics

The guide explains the browser’s event‑loop cycle, how macro‑tasks, micro‑tasks, requestAnimationFrame and requestIdleCallback interact with rendering, details long‑task impacts, React’s time‑slicing via MessageChannel, key interaction metrics such as TTI, FID and upcoming INP, and practical optimizations like task splitting, lazy loading and service‑worker caching.

Event LoopFIDINP
0 likes · 19 min read
Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics
DaTaobao Tech
DaTaobao Tech
May 24, 2023 · Mobile Development

Understanding and Optimizing Mobile Page Performance and Jank

Effective mobile page performance requires identifying three jank types—screen tearing, frame drops, and long unresponsiveness—monitoring metrics such as response time, animation latency, idle time, and SM, understanding the CPU‑GPU rendering pipeline, and applying optimizations like hardware acceleration, transform‑based animations, reduced layout thrashing, task slicing, and GPU‑friendly techniques.

FPSGPU AccelerationJank
0 likes · 13 min read
Understanding and Optimizing Mobile Page Performance and Jank
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 11, 2022 · Frontend Development

Understanding Visual Persistence, Frames, FPS, Hz, and Screen Tearing in Graphics and Browsers

This article explains the visual persistence phenomenon, defines frames, frame rate (FPS) and refresh rate (Hz), describes screen tearing and vertical synchronization, compares movie and game frame rates, and relates these concepts to browser rendering and React's concurrent mode.

FPSHzVSync
0 likes · 9 min read
Understanding Visual Persistence, Frames, FPS, Hz, and Screen Tearing in Graphics and Browsers
ByteFE
ByteFE
Jul 8, 2022 · Frontend Development

Frontend Development Digest: JavaScript Evolution, Web Authentication, Browser Rendering, and Modern Web Practices

This comprehensive frontend development digest explores the evolution of JavaScript frameworks, introduces WebAuth for secure authentication, details browser rendering principles and performance optimization, examines ES2022 features and Module Federation, and provides practical insights into web image handling and live streaming protocols.

ES2022HLS StreamingJavaScript
0 likes · 6 min read
Frontend Development Digest: JavaScript Evolution, Web Authentication, Browser Rendering, and Modern Web Practices
ByteFE
ByteFE
Jan 21, 2022 · Frontend Development

Frontend Development Weekly Digest: Vue 3 Default Release, Framework Ecosystem Reviews, and Performance Optimization Techniques

This technical digest explores the official transition of Vue 3 to the default framework version, reviews emerging frontend tools and ecosystem trends, analyzes browser rendering pipelines for animation optimization, and provides practical guidance on CSS techniques, React Hooks, and modern development workflows.

CSS OptimizationFrontend FrameworksJavaScript OOP
0 likes · 5 min read
Frontend Development Weekly Digest: Vue 3 Default Release, Framework Ecosystem Reviews, and Performance Optimization Techniques
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 29, 2021 · Frontend Development

Understanding Browser Compositing Layers: A Guide to CSS Hardware Acceleration

The article explains how browsers build render trees and use GPU‑accelerated compositing layers—created by properties like transform, will‑change, or media elements—to improve performance, avoid repaint glitches such as iOS timer flicker, and offers best‑practice tips for using these layers efficiently without excess memory use.

CSS OptimizationGPU renderingbrowser rendering
0 likes · 10 min read
Understanding Browser Compositing Layers: A Guide to CSS Hardware Acceleration
政采云技术
政采云技术
Sep 28, 2021 · Frontend Development

Browser Rendering: Reflow and Repaint

This article explains the browser rendering pipeline, the concepts of reflow and repaint, how they are triggered, their performance impact, and provides practical techniques such as minimizing layout thrashing, using GPU‑accelerated properties, and leveraging requestAnimationFrame to optimize front‑end performance.

GPU AccelerationPerformance Optimizationbrowser rendering
0 likes · 17 min read
Browser Rendering: Reflow and Repaint
Fulu Network R&D Team
Fulu Network R&D Team
Aug 10, 2020 · Frontend Development

Understanding the Execution Timing of useEffect and useLayoutEffect in React

This article explains the differences in execution timing between React's useEffect and useLayoutEffect hooks, analyzes their underlying mechanisms, demonstrates practical demos with performance monitoring, and delves into React's rendering process, scheduler, and related browser rendering concepts.

HooksPerformancebrowser rendering
0 likes · 12 min read
Understanding the Execution Timing of useEffect and useLayoutEffect in React
Tencent Cloud Developer
Tencent Cloud Developer
Feb 21, 2019 · Frontend Development

Understanding Browser Rendering: Reflow, Repaint, and Performance Optimizations

The article walks through the browser rendering pipeline—from parsing HTML/CSS and building the render tree to layout (reflow) and painting (repaint)—explains when these steps occur, details how browsers batch changes, and offers practical strategies such as batching DOM updates, caching layout reads, and using CSS3 hardware acceleration to minimize costly reflows and repaints for better performance.

JavaScriptPerformance Optimizationbrowser rendering
0 likes · 15 min read
Understanding Browser Rendering: Reflow, Repaint, and Performance Optimizations
Efficient Ops
Efficient Ops
Dec 2, 2018 · Fundamentals

What Really Happens When You Type a URL? From DNS to Browser Rendering

This article walks through the complete journey of a web request—from entering a URL, DNS resolution, TCP three‑way handshake, HTTP request and response, to the browser’s parsing, layout, and painting processes—explaining each step and the underlying protocols in clear detail.

DNSHTTP requestTCP handshake
0 likes · 17 min read
What Really Happens When You Type a URL? From DNS to Browser Rendering
Yuewen Frontend Team
Yuewen Frontend Team
Jul 27, 2018 · Frontend Development

How CSS Is Rendered: Unveiling the Critical Rendering Path

This article explains how browsers parse HTML, build the DOM and CSSOM, create the render tree, and perform layout and paint, highlighting why understanding CSS's role in the critical rendering path is essential for improving page load speed and user experience.

CSSCritical Rendering Pathbrowser rendering
0 likes · 12 min read
How CSS Is Rendered: Unveiling the Critical Rendering Path
Beike Product & Technology
Beike Product & Technology
Jun 23, 2017 · Frontend Development

Understanding and Optimizing Web Animation Performance

This article explains the fundamentals of web animation performance, examines a complex canvas‑based weather animation case, introduces tools like Chrome's FPS meter and stats.js, and details browser rendering pipelines, CPU/GPU roles, and practical optimization techniques for smoother front‑end experiences.

GPUPerformanceWeb Animation
0 likes · 13 min read
Understanding and Optimizing Web Animation Performance