DOCSEARCHbyAlgolia
Submit Docs

jsLibrary - Frontend Development Knowledge Base

website·Indexed 29 days ago

https://slbyml.github.io/

A comprehensive collection of frontend development resources, including JavaScript native implementations, CSS layout techniques, and algorithm summaries. It features detailed guides on Vue.js principles, Virtual DOM and DIFF algorithms, Webpack optimization, HTTP server concepts, and LeetCode algorithm solutions across various difficulty levels.

Tokens
37.1K
Snippets
143
Records
227
Agent score
75%

What's inside jsLibrary

  1. Overview of Server-Sent Events (SSE)

    Server-Sent Events (SSE) is a real-time communication technology based on the HTTP protocol that allows a server to push data unidirectionally to a client. It uses a long-lived HTTP connection where the server keeps the connection open and streams text data to the client. SSE is particularly efficient for scenarios like news feeds, stock tickers, and AI Copilot responses where the client only needs to receive updates without sending frequent requests.

  2. Overview of the Optimal (OPT) cache algorithm

    The Optimal (OPT) algorithm, proposed by Belady in 1966, evicts the page that will not be used for the longest period in the future. While it guarantees the highest hit rate, it is impossible to implement in real-world systems because it requires perfect knowledge of future requests. It is primarily used as a theoretical benchmark to measure the performance of other algorithms.

  3. Overview of LRU-Multi Queues (MQ) algorithm

    The LRU-Multi Queues (MQ) algorithm is an extension of the 2Q strategy. It implements multiple buffer queues, each assigned a different priority level. Items are upgraded or downgraded between queues based on specific eviction and access logic. This approach provides more granular control over cache priority but comes with higher implementation complexity and computational cost.

  4. SSE Advantages and Limitations

    Understand when to use Server-Sent Events compared to other communication technologies.

    Advantages:

    • Simplicity: Easier to implement than WebSockets (no complex handshake).
    • HTTP Based: Works over standard HTTP, making it compatible with existing network infrastructure and CORS.
    • Efficiency: Lower server resource consumption for one-way data pushing.

    Limitations:

    • Unidirectional: Only supports Server $\rightarrow$ Client communication.
    • Text Only: Cannot transmit binary data.
    • Stability: Susceptible to network interruptions, requiring robust reconnection logic.

  5. Understand JavaScript memory allocation for primitives and objects

    JavaScript manages memory using a Stack and a Heap:

    • Stack: Stores primitive data types (e.g., numbers, strings) because they have a fixed, small size.
    • Heap: Stores reference data types (e.g., objects, arrays) because they are irregular and can grow in size.

    When a variable is assigned a reference type, the stack stores a pointer (address) to the actual data in the heap. Copying a reference variable (e.g., const d = b) only copies the pointer, meaning both variables point to the same object in memory. Modifying one affects the other.

  6. Understand Virtual DOM and the purpose of DIFF algorithms

    Virtual DOM is a lightweight copy of the real DOM containing its basic structure and information. It acts as a buffer between JavaScript processing and real DOM rendering, allowing frameworks to merge multiple DOM operations and reduce the frequency of reflows and repaints. The DIFF algorithm compares two Virtual DOM trees to find differences and update the page efficiently using a depth-first, same-level comparison strategy. This prevents the need to re-render the entire application when only a small piece of data changes.

  7. Relationship between LIS and Vue 3.0 DOM Diff Algorithm

    Vue 3.0 upgraded its diffing process by moving away from simple index-based key lookups. Instead, it calculates a scheme that minimizes DOM movements. This optimization is fundamentally based on the Longest Increasing Subsequence (LIS) algorithm. Vue uses the concept of tracking indices and their preceding relationships (similar to the chain and result logic in LIS) to determine the most efficient way to update the DOM.

  8. Implement immutable state with Immer.js

    Traditional deep cloning methods can suffer from performance issues because they traverse the entire data structure regardless of whether the data is actually used. Immer.js solves this by using JavaScript Proxies to implement a 'copy-on-write' mechanism. It only clones the parts of the object tree that are actually modified, while keeping references to the unchanged parts, thereby achieving immutability with minimal performance overhead.

  9. How Vue.js reactivity works

    Vue implements reactivity using a combination of data hijacking (via Object.defineProperty) and the Publisher-Subscriber pattern. The system relies on three core entities:

    1. Observer: During the initData phase, Vue traverses the data options and converts properties into getters/setters. Getters track dependencies, and setters notify changes.
    2. Dep (Dependency): A publisher-subscriber implementation. When a getter is triggered, the Dep.depend method collects the associated Watcher.
    3. Watcher: Acts as the bridge between the Observer and the Compile phase. When a view uses a data property, a Watcher is instantiated to collect the dependency. When data changes, the setter calls dep.notify, which triggers the Watcher to update the view via the DIFF process.

  10. Implement Micro-Frontend architecture

    Micro-frontends decompose large, complex web applications into smaller, loosely coupled, independent applications. Common integration methods include iframes, JavaScript, and Web Components.

    Benefits:

    • Smaller codebases that are easier to maintain and develop.
    • Technology stack independence (loose coupling).
    • Independent development and deployment cycles.

  11. Distinguish between DOM and BOM

    • DOM (Document Object Model): Represents the document structure. The fundamental object is document.
    • BOM (Browser Object Model): Represents the browser environment. The core object is window, which includes methods like open() and resize(), as well as objects like location, history, and screen.

  12. React Fiber rendering pipeline

    Since version 16, React uses the Fiber architecture to separate the DIFF process from the actual rendering into two phases:

    • Reconciler Phase: Performs the DIFF calculation and marks nodes with an effectTag to collect all necessary changes.
    • Renderer Phase: Applies the collected changes to the actual DOM.