DOCSEARCHbyAlgolia
Submit Docs

wzCoding Blog

website·Indexed 29 days ago

https://wzcoding.github.io/blog/

A technical blog covering front-end development topics, including JavaScript core concepts (Event Loop, Promise, this binding), CSS layout and selectors, Vue3 internals (Diff algorithm, reactivity system, watch listeners), and general development patterns like Observer and Pub-Sub modes.

Tokens
81.9K
Snippets
285
Records
652
Agent score
74%

What's inside wzCoding Blog

  1. Overview of JavaScript Data Types

    JavaScript features 8 data types, categorized into primitive types and reference types:

    Primitive Types:

    • null: Represents the intentional absence of any object value.
    • undefined: The initial value of a variable that has been declared but not yet assigned a value.
    • Boolean: Logical values true or false.
    • String: A sequence of characters used for text.
    • Number: 64-bit double-precision floating-point numbers (integers and floats).
    • BigInt: Arbitrary-precision integers for values exceeding the safe integer range of the Number type.
    • Symbol: A unique and immutable identifier.

    Reference Type:

    • Object: Used to store collections of data or more complex entities.

  2. Overview of Vue 3.0 Key Features

    Vue 3.0 introduced several architectural improvements to enhance developer experience and application performance. Key advancements include the Composition API for better logic reuse, a rewritten reactivity system using the Proxy API for more precise dependency tracking, and native TypeScript support as the framework's source code is written entirely in TypeScript.

  3. Overview of Server-Sent Events (SSE)

    Server-Sent Events (SSE) is a lightweight technology used for real-time, one-way data streaming from a server to a client. Unlike WebSocket, which provides full-duplex communication, SSE is designed specifically for scenarios where the client only needs to receive a continuous stream of data without sending frequent messages back to the server. It operates over standard HTTP, avoiding the complexity of protocol upgrades and heartbeat management required by WebSockets. Common use cases include stock tickers and streaming AI responses (e.g., ChatGPT's word-by-word output).

  4. Overview of the Fast Diff algorithm

    The Fast Diff algorithm optimizes the reconciliation process by first processing identical nodes at the beginning and end of the new and old child lists. For the remaining nodes, it determines the minimum number of movements required by constructing a Longest Increasing Subsequence (LIS) based on the nodes' indices. Nodes belonging to the LIS are kept in place, while others are moved, minimizing the total number of DOM operations.

  5. Overview of the Browser Rendering Process

    Browser rendering is the process of converting an HTML string into pixel information on a screen. The process is divided into two main phases:

    1. Network Communication: Fetching the HTML string and related assets.
    2. Page Rendering: Parsing the data and painting it to the screen.

    The rendering pipeline follows these sequential steps: HTML Parsing $\rightarrow$ Style Calculation $\rightarrow$ Layout $\rightarrow$ Layering $\rightarrow$ Painting $\rightarrow$ Rasterization $\rightarrow$ Compositing $\rightarrow$ Final Page Output.

  6. Overview of Vue 3 watch watchers

    The watch watcher is a core feature in Vue 3 used to monitor changes in specific data sources. When the monitored data changes, it triggers a provided callback function, allowing developers to perform side effects or additional operations in response to state changes.

  7. Overview of the Vue Diff Algorithm

    The Diff algorithm is the core algorithm of the Vue renderer. When a page or component needs to be updated, the algorithm compares two sets of vnodes (virtual DOM nodes)—the old set and the new set. Its primary goal is to complete the update with minimum performance overhead by reusing as many nodes as possible and performing actual DOM operations only when nodes cannot be reused.

  8. Overview of Server-Sent Events (SSE)

    Server-Sent Events (SSE) is a lightweight technology used for one-way, real-time data streaming from a server to a client. Unlike WebSocket, which provides full-duplex communication, SSE is designed specifically for scenarios where the client only needs to receive a continuous stream of data without sending frequent messages back to the server. It is ideal for use cases such as stock tickers or streaming AI responses (e.g., ChatGPT's word-by-word output). SSE is more efficient than WebSocket for single-direction pushes because it operates over standard HTTP and avoids the complexity of protocol upgrades and heartbeat management.

  9. Overview of Double-Ended Diff algorithm

    The Double-Ended Diff algorithm optimizes the comparison of new and old child VNode sets by comparing four endpoints: the start and end of the new set, and the start and end of the old set. It dynamically updates these four indices to find reusable nodes and minimize DOM movements until the start indices exceed the end indices.

  10. Overview of Vue 3 Reactivity System

    The Vue 3 reactivity system is a core component used to implement data responsiveness and dependency collection. Unlike previous versions, Vue 3 leverages the JavaScript Proxy API to provide more comprehensive data interception, resulting in a more efficient and flexible reactivity system.

  11. Understand the Vue Diff Algorithm goals

    The Diff algorithm is the core of the Vue renderer. Its primary goal is to minimize DOM operations to reduce performance overhead when updating the page or components. It achieves this by comparing new and old sets of vnodes (virtual DOM nodes) and performing the following steps:

    1. Identify reusable elements: Use the vnode type and bound key to determine if an element can be reused (this avoids creating new DOM elements).
    2. Identify elements to move: Change the position of existing DOM elements without recreating them.
    3. Add new elements: Create and insert new DOM elements.
    4. Remove obsolete elements: Delete DOM elements that are no longer present in the new vnode set.

  12. Understand the CSS Box Model concept

    In web pages, every element is treated as a rectangular 'box'. The Box Model is the fundamental CSS concept used to determine the size, spacing, and layout of elements on a page, enabling precise control over how elements are arranged and positioned.