DOCSEARCHbyAlgolia
Submit Docs

Quan Cheng's Blog and Documentation

website·Indexed 29 days ago

https://quanscheng.vercel.app

A personal technical knowledge base featuring tutorials and articles on Chrome Extension development, React (including react-router-dom v6 and Valtio), TypeScript, Web3/DApp development, and general software engineering practices like Git and ESM.

Tokens
53K
Snippets
302
Records
367
Agent score
71%

What's inside Quan Cheng

  1. Understand Resumability as an alternative to Hydration

    Resumability is a paradigm that enables instant interactivity without the need to crawl the component tree or perform traditional hydration. Unlike hydration-based approaches where components act as the root, Resumability treats event handlers as the root/entry point. This allows the framework to treat all components as static, as the event points directly to the necessary logic without requiring the execution of user code for the entire component tree.

  2. Understand V8 Bytecode and JIT Compilation

    V8 uses bytecode as an intermediate representation between the Abstract Syntax Tree (AST) and machine code to reduce memory consumption. The execution process employs Just-In-Time (JIT) compilation: the interpreter executes bytecode and identifies 'hot code' (frequently executed code exceeding a specific threshold). This hot code is then compiled by a background compiler thread into highly optimized machine code for subsequent executions. If the optimized code becomes invalid (e.g., due to a change in function argument types), V8 performs 'deoptimization' and reverts the execution back to bytecode.

  3. Implement Garbage Collection using the Reachability Algorithm

    V8 determines if an object is 'active' using a reachability algorithm based on GC Roots.

    • Active Objects: Objects that can be reached by traversing from the GC Roots are marked as accessible and preserved in memory.
    • Inactive Objects: Objects that cannot be reached from GC Roots are marked for collection.

    The general GC process follows three steps: marking active/inactive objects, reclaiming memory from inactive objects, and optionally performing memory compaction to remove fragments.

  4. Understand standard Hydration in SPA frameworks

    Standard hydration is the process used by frameworks like React, Vue, Svelte, and Angular to make server-rendered HTML interactive. It is an O(n) algorithm where the framework must re-execute the entire application starting from the root to restore state and attach event handlers that were lost during the renderToString process. Interaction is only possible after the entire component tree has been executed and event handlers are set.

  5. Understand standard Hydration in SPA frameworks

    Hydration is the process used by frameworks like React, Vue, Svelte, and Angular to make server-rendered HTML interactive. It works by re-executing the entire application from the root to restore state and attach event handlers that were lost during the renderToString process. This is an O(n) algorithm where N is the number of components that must be 'awakened' before the user can interact with the page.

  6. Understand the core capabilities of React Server Components (RSC)

    React Server Components (RSC) introduce a model where specific components are designated to run exclusively on the server. Key advantages include:

    1. Server-side Execution: Developers can explicitly define which component code must run on the server.
    2. Direct Data Fetching: Server components can fetch data directly from within the component body and stream the resulting data to the client.
    3. Independent Loading: Slow-loading server components can be loaded independently without blocking the rendering of other components.

  7. Optimize execution using V8 Lazy Parsing

    To avoid long startup times and excessive memory usage from parsing all code at once, V8 implements 'Lazy Parsing'. For functions that are not immediately executed, V8 uses a Pre-Parser to perform a lightweight check: it verifies syntax, parses function declarations, and determines scope without generating a full AST. The full AST is only generated by the Parser when the function is actually called.
    function sum(a, b) {
  return a + b
}
const a = 666
const c = 996
sum(1, 1) // Only at this point is the internal code of sum() fully parsed into an AST

  8. Understand Resumability as an alternative to Hydration

    Resumability is a paradigm that enables instant interactivity without the need to crawl or re-execute a component tree. Unlike hydration-based methods where the component is the root, Resumability treats event handlers as the root/entry point. This allows the framework to treat all components as static and trigger logic only when an event occurs, bypassing the need for a traditional hydration phase.

  9. Request narrow host permissions for Tab data

    To access sensitive tab properties like title and url without requesting the broad "tabs" permission (which warns users about browsing history collection), use host_permissions. This restricts the extension's high-level access to specific match patterns, protecting user privacy while still allowing the extension to read data from the specified sites.
    {
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

  10. Implement Partial Hydration using Islands Architecture

    Partial hydration (popularized by the Astro framework) optimizes performance by only hydrating specific 'interactive islands' rather than the entire page. This reduces the browser's workload and speeds up Time to Interactive (TTI). However, this approach requires developers to manually define these islands, and because each island acts as an independent sub-application, communication between different islands can be hindered.

  11. Understand Sparse Hydration in React Server Components (RSC)

    React Server Components implement a form of 'Sparse Hydration'. Unlike the Islands architecture, RSC maintains a single root allowing components to communicate. Server Components do not re-execute in the browser; instead, React serializes their vNodes as data into the HTML. Developers manage these boundaries using the 'use server' and 'use client' directives.

  12. Understand Sparse Hydration in React Server Components (RSC)

    React Server Components implement a form of 'Sparse Hydration'. Unlike the Islands architecture, RSC maintains a single root allowing components to communicate. Server Components do not re-execute in the browser; instead, React serializes their vNode as data within the HTML. Developers manage the boundaries between server and client logic using the 'use server' and 'use client' directives.