DOCSEARCHbyAlgolia
Submit Docs

laoergege-blog

website·Indexed 30 days ago

https://laoergege-blog.pages.dev

A technical blog covering a wide range of software engineering topics, including JavaScript and TypeScript type systems, Rust basics and ownership, Node.js event loops, browser rendering principles, HTTP protocols, Git internals, and data structures and algorithms.

Tokens
55.4K
Snippets
158
Records
326
Agent score
70%

What's inside laoergege-blog

  1. Overview of JavaScript Module Evolution

    JavaScript modularization has evolved through three primary stages to manage variable scoping and dependency loading:

    1. Primitive Stage: Used file splitting, Object Namespaces (to prevent global pollution), and Immediately Invoked Function Expressions (IIFE) for access control.
    2. Community Standardization Stage: Introduced standards like CommonJS (synchronous loading for servers), AMD (asynchronous loading for browsers), and UMD (Universal Module Definition).
    3. ES Modules (ESM): The official language standard for JavaScript modules.

  2. Overview of the Vue component update and Diff lifecycle

    Vue updates are performed at the component level. A component update is triggered when its state or props change. The update process follows these steps:

    1. A depth-first recursive Diff of the tree.
    2. Comparison of the parent node first.
    3. Same-level comparison of child nodes.
    4. For complex array-to-array updates, Vue employs a 'Longest Increasing Subsequence' (LIS) algorithm (after removing head and tail matches) to minimize DOM movements, followed by recursive Diffing of each child node.

  3. Overview of Chrome Browser Rendering Architecture

    Chrome uses a multi-process architecture where a sandboxed renderer process employs the Blink rendering engine to convert web content into an interactive page. The Blink renderer process consists of several key threads:

    • Main Thread (Blink rendering engine)
    • Compositor Thread ("cc")
    • WebWorker Threads
    • Raster Threads

  4. Overview of Progressive Web App (PWA) core technologies

    A Progressive Web App (PWA) is a collection of technologies designed to provide a native-app-like experience on the web. The core components include:

    • Web App Manifest: Defines how the app appears to the user (e.g., standalone window mode).
    • Service Workers: Scripts that run in the background for offline capabilities and resource management.
    • CacheStorage: Used for storing and retrieving network requests.
    • Notifications & Push Messages: Enable re-engagement via system-level alerts.

  5. Understand the fundamentals of HTTP (Hypertext Transfer Protocol)

    HTTP is the protocol used for transmitting hypertext. 'Hypertext' refers to:

    • The transmission of HyperText Markup Language (HTML).
    • The use of hyperlinks to navigate between different hypertext documents.
    • The ability to transmit various data types including text, images, audio, and video.

  6. Analyze the Vue 3 `createApp` and Renderer initialization

    Vue 3 uses a decoupled renderer architecture to support multiple platforms. The createApp function initializes a platform-specific renderer (e.g., runtime-dom for web). The mount method follows a standardized cross-platform flow: it first creates a VNode for the root component and then calls the renderer's render function (which internally uses patch) to generate the actual DOM.
    // Simplified internal logic of createAppAPI
function createAppAPI(render) {
  return function createApp(rootComponent, rootProps = null) {
    const app = {
      _component: rootComponent,
      _props: rootProps,
      mount(rootContainer) {
        // 1. Create root VNode
        const vnode = createVNode(rootComponent, rootProps);
        // 2. Use renderer to transform VNode to DOM
        render(vnode, rootContainer);
        app._container = rootContainer;
        return vnode.component.proxy;
      },
    };
    return app;
  };
}

  7. Understand the Rust project hierarchy (Workspace, Package, Crate)

    Rust organizes code in a hierarchical structure:

    • Workspace: A collection of one or more Packages.
    • Package: The basic unit of Cargo functionality. A package can contain at most one library crate and any number of binary crates. Binary crates are defined by placing files in the src/bin directory.
    • Crate: The unit of compilation for the Rust compiler (rustc). Crates are module trees. The crate root is the starting point for the compiler: src/main.rs for binary crates and src/lib.rs for library crates.

  8. Understand Vue's Reactive Rendering Mechanism (MDV)

    Vue implements the Model-Driven-View (MDV) principle, where UI updates are automated based on business data changes. In Vue 3, the rendering process is treated as a 'side effect'. The core flow is:

    1. Component rendering is established as a reactive effect.
    2. Executing the render effect triggers dependency collection for the data accessed during render.
    3. Data changes trigger an update task, which is placed in an asynchronous queue.
    4. A Scheduler handles the asynchronous dispatch of these updates.

  9. Understand Chrome/Chromium Multi-Process Architecture

    Chrome/Chromium utilizes a multi-process architecture to improve stability and security. The primary processes include:

    • Browser Process: Manages the UI, user interaction, child process lifecycle, and storage.
    • GPU Process: Handles graphics acceleration and rendering tasks.
    • Network Process: Manages the loading of network resources.
    • Renderer Process: Responsible for rendering web pages and executing JavaScript.
    • Plugin Process: Handles browser plugins.

  10. TCP Protocol Overview and Reliability Mechanisms

    TCP (Transmission Control Protocol) is a connection-oriented, reliable, byte-stream transport layer protocol. It ensures data is delivered without loss and in the correct order through several key mechanisms:

    • Connection-Oriented: Establishes a stateful end-to-end connection before data transfer, maintaining objects in memory to track IP addresses, ports, data volume, and health.
    • Reliability: Uses a request/response model where every sent packet requires an acknowledgement (ACK). If no response is received, the sender triggers a retransmission.
    • Byte-Stream: Ensures data is received in the correct order using sequence numbers.
    • Flow and Congestion Control: Uses sliding windows to manage the rate of data transfer based on the receiver's state and network congestion.

  11. Understand TTY and TTY Driver functionality

    TTY (TeleTYpewriter) refers to the text-based command-line terminal used for interacting with a computer. In Linux/Unix, TTYs are abstracted as special device files located at /dev/tty[n].

    The TTY driver includes a 'line discipline' logical component that handles:

    • Character buffering: Buffering characters until a carriage return is received, then sending them to the foreground user process.
    • Special key interception: Handling functional keys and sending process signals (e.g., sending SIGINT via kill -2 when CTRL+c is pressed).
    • Session management: Allowing multiple programs to run simultaneously.

  12. Understand the DNS hierarchical architecture

    The Domain Name System (DNS) uses a distributed, layered structure to map domain names to IP addresses. The hierarchy consists of:

    1. Root DNS Server: Manages top-level domain servers and returns the IP addresses for TLDs like .com, .net, or .cn.
    2. Top-level DNS Server (TLD): Manages authoritative name servers for domains under its TLD (e.g., the .com TLD server returns the IP for the apple.com name server).
    3. Authoritative DNS Server: The final source of truth that manages and returns the actual IP address for a specific host under its domain.
    4. Local DNS/Recursive DNS Server: Acts as the intermediary (e.g., ISP DNS, router cache, or OS cache) that performs the recursive lookup on behalf of the client.