How Browsers Work · Part 15 — Rendering Scheduling & the Frame Lifecycle
Browser tạo một frame như thế nào: cơ hội update rendering, rAF, style/layout, observers, paint và composite; cùng content-visibility, idle callback và Scheduler API.
Filter/Tag
#rendering
14 entries
-
-
How Browsers Work · Part 5 — Layout, Paint & Compositing
The pixel pipeline: how styled DOM becomes layout geometry, paint records, raster tiles and compositor frames — why invalidation and animation cost depend on context.
-
How Browsers Work · Part 4 — CSS & the CSSOM
How the browser parses CSS into the CSSOM, resolves origins, layers, specificity and scope, computes values, and builds the layout tree — including when stylesheets block rendering.
-
Web Performance · Part 17 — Rendering Pipeline & CSS Performance
Nửa sau hiệu năng render: forced reflow / layout thrashing, content-visibility, CSS containment, kỷ luật will-change, selector cost, và animation chỉ chạm compositor để giữ 60fps.
-
Web Performance · Part 4 — Critical Rendering Path & Loading
The journey from HTML to pixels: DOM, CSSOM, render tree, layout, paint. Why CSS and JS block rendering, and resource hints (preload, preconnect, prefetch, defer, async) to control load order.
-
React 19 · Phần 01 — UI là value, không phải template
Xây mental model đầu tiên: component tạo React element, React giữ UI đồng bộ với state, còn DOM chỉ là output được commit vào browser.
-
Three.js from Zero to Senior · Part 19 — Toán 3D, Coordinate Spaces & Precision
Làm chủ point/vector/direction, dot/cross, chuỗi local→screen, matrix và normal matrix, quaternion/slerp, project/unproject, depth precision, floating origin và reversed depth.
-
Three.js from Zero to Senior · Part 20 — Render Pipeline, Depth, Transparency & Render Targets
Mở pipeline renderer: render lists, draw calls, passes, depth test/write, z-fighting, transparency sorting, alpha strategies, render targets, MRT, color pipeline và playbook debug.
-
Web Components · Phần 4 — Render, State, Template & Ranh giới bảo mật
Dùng template, state ownership và targeted DOM updates để kb-task-card render idempotent, giữ focus/node identity và không biến dữ liệu ngoài thành innerHTML gây XSS.
-
SVG from Zero to Senior · Part 19 — Performance & Rendering Internals
How the browser actually paints SVG, why thousands of DOM nodes get slow, the real cost of filters and huge paths, transform vs cx/cy animation, and the exact signals that tell you to switch to canvas or WebGL. With a live FPS stress test.
-
Next.js Core Concepts — From Pages Router to App Router (v14 → v15 → v16)
A comprehensive bilingual guide covering rendering, routing, caching in Next.js across versions 14, 15, and 16. Written in English with inline Vietnamese translations for language learners.
-
Rendering Strategies and React Server Components: Where HTML Gets Built
CSR, SSR, SSG, streaming, islands, and RSC — a principal-level map of where HTML is generated, what hydration costs, and how to choose.
-
Browser Rendering Pipeline — from HTML bytes to composited pixels
Parse, layout, paint, composite: critical path, main-thread contention, reflow thrashing, layer promotion, and engine changes in Blink, Gecko, and WebKit.
-
Tối ưu performance CSS — deep dive từ render pipeline tới production
Đi sâu vào cách browser xử lý CSS, chi phí của Layout/Paint/Composite, critical CSS, containment, content-visibility, GPU acceleration, và mọi kỹ thuật giúp CSS không còn là nút thắt performance.