How Browsers Work · Part 16 — V8 Deep: Optimization Tiers & Deopt
Bên trong máy ảo JS: Ignition, Sparkplug, Maglev, TurboFan, hidden class, inline cache, elements kind và deoptimization — cùng cách đọc chúng mà không tối ưu mò.
Filter/Tag
#javascript
33 entries
-
-
How Browsers Work · Part 7 — The Event Loop, Tasks & Microtasks
The model that ties JS to rendering: task sources and queues, microtask checkpoints, promises, rAF, long tasks, and cooperative scheduling.
-
How Browsers Work · Part 6 — The JavaScript Engine (V8)
Inside modern V8: parsing, Ignition bytecode, Sparkplug and Maglev tiering, TurboFan optimization, Maps, inline caches and evidence-based performance work.
-
Web Performance · Part 8 — JavaScript Performance & Bundle
Client JavaScript is often costly because it must download, parse, compile, and execute. Measure bundles, split by route/component, tree-shake, lazy-load, and trim dependencies.
-
Webpack · Part 2 — The Config Anatomy
webpack.config.js from scratch — mode, entry, output, context, and resolve. Turn the zero-config magic into explicit configuration you control, including aliases and extensions. With an interactive config builder.
-
Webpack · Part 1 — The Mental Model & Your First Build
Why bundlers exist, the dependency graph Webpack builds from a single entry, the four core concepts (entry, output, loaders, plugins), and your first real build. With an interactive dependency-graph visualizer.
-
Web Components · Phần 1 — Mental Model nền tảng & Custom Element đầu tiên
Phân biệt Web Components, Custom Elements, Shadow DOM và template; xây kb-task-card đầu tiên theo hướng progressive enhancement bằng API gốc của trình duyệt.
-
Web Components · Phần 2 — Custom Elements: Registry, Upgrade & Lifecycle
Hiểu quy tắc đặt tên, CustomElementRegistry, cơ chế upgrade và lifecycle; làm kb-task-card an toàn khi detach, reconnect, di chuyển hoặc đổi document.
-
Web Components · Phần 3 — Public API: Attributes, Properties & Events
Thiết kế contract cho kb-task-card: attribute primitive, property có type, boolean reflection, method có chủ đích và CustomEvent để Kanban giao tiếp lỏng.
-
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.
-
Web Components · Phần 5 — Shadow DOM, slots và composed tree
Hiểu host, light DOM, shadow tree và composed tree; dùng slot mặc định, named slot, fallback và slotchange để xây kb-task-column có API composition rõ ràng.
-
Web Components · Phần 10 — Contract testing và debugging trong browser thật
Kiểm thử public contract của Accessible Mini Kanban trên browser thật: lifecycle, upgrade, attribute/property, event, slot, keyboard và form trước khi refactor sang Lit.
-
SVG from Zero to Senior · Part 9 — Interactive & Data-Driven SVG with JavaScript
Make SVG think: generate shapes from a data array, the essential screen→user coordinate mapping with getScreenCTM().inverse() for correct hit-testing, pointer events, tooltips, and a small interactive chart from scratch.
-
The Beacon API — Sending Data That Survives Page Unload
A practical guide to navigator.sendBeacon: why it exists, how it differs from fetch keepalive, the Content-Type/Blob trick, CORS and size limits, and the real-world use cases — analytics, web vitals, error logging, autosave.
-
Web Components · Phần 9 — Vanilla capstone: một component hoàn chỉnh
Checkpoint ghép Custom Elements, Shadow DOM, slots, public events, theming, accessibility, ElementInternals và Declarative Shadow DOM thành một toggle dùng được.
-
Landing Page Animations — CSS, Vanilla JS, and React + Framer Motion
Senior guide to landing-page motion: page-load orchestration, scroll reveal, stagger, parallax, gestures, and route transitions — with CSS, vanilla JS, and Framer Motion patterns plus library picks.
-
What's New in ES2025 & ES2026 — The Complete Guide with Examples
A bilingual, example-driven tour of ECMAScript 2025 (Iterator Helpers, Set methods, Promise.try, RegExp.escape, import attributes, Float16Array) and ES2026 (explicit resource management with using, Array.fromAsync, Error.isError).
-
Observer APIs deep dive — MutationObserver, ResizeObserver và họ hàng trong browser
Đào sâu Observer pattern trong browser: MutationObserver theo dõi DOM, ResizeObserver bắt resize, IntersectionObserver, PerformanceObserver, ReportingObserver — concept, use case production, pitfall, memory cleanup.
-
Frontend có tin được khi validate file upload không? Đào sâu vào binary và magic number
Frontend validation đẹp nhưng dễ bypass. Bài này đào sâu magic number, cấu trúc PNG, detect executable bằng TypeScript, polyglot file, và defense in depth đúng cách.
-
JavaScript Generators & yield — A Practical Guide with 10 Use Cases
A bilingual deep-dive into generator functions and yield: the pausable-function mental model, core syntax, two-way communication, async generators, plus 10 real-world use cases and practice exercises.
-
Signals & Fine-Grained Reactivity — The Model Taking Over Frontend (2026)
Bilingual deep-dive: signals vs Virtual DOM, the three primitives, a ~30-line vanilla runtime, push/pull glitch-free updates, Solid/Angular/Svelte/Vue/Preact/TC39, React compiler angle, pitfalls.
-
Unicode, String, Buffer, Blob — Hiểu sâu binary và text trong JavaScript frontend
Vì sao `"🇻🇳".length === 4`? Bài này đào sâu Unicode code point, surrogate pair, grapheme cluster, và cách JS xử lý binary qua ArrayBuffer, TypedArray, DataView, Blob, TextEncoder — kèm use case frontend thực chiến.
-
JavaScript Intl API — Dates, Numbers, Currency & Locale-Aware Formatting Without Hand-Rolling
Why not to hand-roll i18n formatting: Intl.NumberFormat, DateTimeFormat, PluralRules, Collator, Segmenter, performance, and timezone pitfalls.
-
JavaScript Memory Management & Leak Hunting — V8 GC, DevTools, and Production Signals
How V8 garbage collection works, why leaks are reachability bugs, classic frontend leak patterns, WeakRef tradeoffs, and a DevTools hunting workflow.
-
JavaScript Error Handling & Resilience — try/catch Limits, Global Handlers, and Production Patterns
Senior deep-dive: Error object anatomy, what try/catch cannot catch, custom errors with cause, async patterns, global handlers, retries, and monitoring.
-
Immutable State in JavaScript — References, Cloning, structuredClone, and Change Detection
Master JS value vs reference semantics, shallow copy traps, structuredClone limits, immutable updates, Object.freeze, and Map/Set for predictable state.
-
Event Delegation & DOM Performance — Propagation, Batching, and Layout Thrashing
Senior guide to event delegation with closest(), addEventListener options, DocumentFragment batching, read/write separation, and when virtualization wins.
-
Forms & the Constraint Validation API — Native Validation Done Right
Native HTML form validation deep-dive: ValidityState, setCustomValidity, async/cross-field patterns, ARIA errors, FormData — and why the server always wins.
-
Robust Data Fetching — fetch(), AbortController, Retry, and the Stale-Response Race
Client-side fetch resilience for seniors: HTTP gotchas, AbortController timeouts, exponential backoff, stale-response races, dedup, and a fetchJSON wrapper.
-
JavaScript Closures, Scope & this — Lexical Environments, Loop Bugs, and Binding Rules
Lexical scope, closures, the var-in-loop bug, memory tradeoffs, and this binding — with an interactive demo and real frontend patterns.
-
Debounce, Throttle & rAF — rate-limiting high-frequency browser events
Debounce vs throttle vs rAF — from-scratch implementations, leading/trailing/maxWait, passive listeners, scrollend, and React pitfalls.
-
JavaScript Async Patterns — Promises, Combinators, AbortController & Concurrency
Promise anatomy, sequential vs parallel pitfalls, all/allSettled/race/any semantics, cancellation, retries, concurrency pools, and error traps.
-
JavaScript Event Loop Deep Dive — Microtasks, Macrotasks, and Real Browser Timing
Deep dive into the JS event loop: call stack, macrotask vs microtask queues, await desugaring, timer clamping, rAF, and predictable console ordering.