DOCSEARCHbyAlgolia
Submit Docs

sssnowww Frontend Knowledge Base

website·Indexed 29 days ago

https://sssnowww.github.io/

A comprehensive collection of frontend technical notes and interview experiences. It covers core web technologies including JavaScript, TypeScript, Vue, CSS, and Webpack, alongside computer science fundamentals like operating systems, computer networks, and algorithms. The site also features detailed interview question logs and coding challenges from companies such as Alibaba, Meituan, Baidu, Pinduoduo, and ByteDance.

Tokens
39.7K
Snippets
120
Records
249
Agent score
74%

What's inside sssnowww

  1. Understand DOM basic concepts

    The Document Object Model (DOM) represents a web page as a tree of objects. Key entities include:

    • Document: The entire page, represented by the document object.
    • Element: All HTML tags, represented as element objects.
    • Node: Any content in the page, including tags, attributes, text, and comments, represented as node objects.

  2. Understand Webpack core capabilities

    Webpack is a static module bundler for modern JavaScript applications. Its primary capabilities include:

    • Code Compilation: Improves efficiency and resolves browser compatibility issues.
    • Module Integration: Enhances performance and maintainability while reducing the number of frequent browser requests for files.
    • Universal Module Support: Treats all resource files as modules, providing a unified modularization scheme where all asset loading is controlled via code.

  3. Understand the JavaScript Event Loop and Task Queues

    JavaScript is single-threaded and uses an Event Loop to achieve non-blocking I/O. Tasks are divided into Synchronous tasks (executed immediately on the main stack) and Asynchronous tasks (placed in queues).

    Asynchronous tasks are further divided into:

    1. Microtasks: Executed immediately after the current main function ends but before the next macro-task begins. Examples: Promise.then, MutationObserver, process.nextTick (Node.js).
    2. Macrotasks: Larger time-granularity tasks. Examples: script (main code), setTimeout, setInterval, UI events, postMessage.

    Execution Order: The engine executes one macrotask, then clears the entire microtask queue before moving to the next macrotask.

  4. Understand Vue's MVVM architecture

    Vue follows the MVVM (Model-View-ViewModel) pattern to decouple business logic from the UI:

    • Model: Handles business logic and server-side interactions.
    • View: The UI layer (HTML) that displays the data model.
    • ViewModel: Acts as the communication bridge between the Model and the View.

  5. Understand the Browser Event Loop execution order

    The browser event loop processes tasks in the following sequence:

    1. Execute all synchronous code.
    2. Once the execution stack is empty, check for asynchronous code.
    3. Execute all available Microtasks.
    4. Render the DOM interface.
    5. Execute Macrotasks. If a macrotask triggers microtasks, return to step 3 to execute them before the next macrotask.
    6. Repeat the cycle.

  6. Understand TypeScript core concepts and features

    TypeScript (TS) is a typed superset of JavaScript (JS) that supports ES6 syntax and object-oriented programming concepts such as classes, interfaces, inheritance, and generics. Key language features include:

    • Type Annotations & Compile-time Checking: Annotate variable types to catch errors during compilation.
    • Type Inference: Automatically determines variable types when annotations are missing.
    • Type Erasure: Type annotations and interfaces are removed during the compilation process and do not exist at runtime.
    • Interfaces: Used to define the shape of object types.
    • Enums: Used for scenarios where values are restricted to a specific set of options.
    • Generics: Allows types to be specified later when the code is used.
    • Namespaces: Isolates names to a specific region to prevent naming conflicts.
    • Tuples: Arrays that can hold a fixed number of elements of different specified types.
    • Mixins: Ability to accept values of arbitrary types.

  7. Understand the relationship between ECMAScript and JavaScript

    ECMAScript (ES) is the official specification for the JavaScript language. JavaScript is the actual implementation of that specification. A complete JavaScript environment typically consists of the ECMAScript core and environment-specific extensions: browser-side extensions (BOM and DOM) and server-side extensions (such as Node.js).

  8. Understand Vue's Virtual DOM and Diff Algorithm

    The Virtual DOM is a JavaScript object (VNode) representing the real DOM, containing tag, attrs, and children. It reduces expensive real DOM operations by:

    1. Creating a virtual tree of the intended UI.
    2. Comparing the new virtual tree with the old one (Diffing).
    3. Applying only the necessary changes to the real DOM.

    Diff Algorithm Optimization: Vue optimizes the process by only comparing nodes at the same level (avoiding cross-level comparison), reducing complexity from O(n³) to O(n).

  9. Configure tass-ui Monorepo with pnpm

    tass-ui uses a Monorepo architecture (single repository, multiple projects) managed by pnpm. The project structure organizes modules into a packages directory. To enable cross-referencing between packages, a pnpm-workspace.yaml file is required in the root directory.
    # pnpm-workspace.yaml
packages:
    - 'packages/**'
    - 'examples'

  10. Use WebSocket for full-duplex communication

    WebSocket is an HTML5 application layer protocol that provides full-duplex communication between a browser and a server over a single TCP connection. It reuses the HTTP handshake channel for initialization.

    Key Characteristics:

    • Bidirectional: Both client and server can send messages independently without waiting for a request.
    • Real-time: Lower overhead than HTTP polling, making it ideal for real-time apps.
    • Data Types: Supports both text and binary data.
    • Efficiency: Lightweight data format with lower performance overhead compared to repeated HTTP requests.

  11. Understand Vue's MVVM Architecture

    Vue follows the MVVM (Model-View-ViewModel) pattern to decouple business logic from the UI:

    • Model: Handles business logic and server-side interactions.
    • View: The UI layer (HTML) that displays the data model.
    • ViewModel: Acts as the communication bridge between the Model and the View.

  12. Understand the JavaScript Event Loop and Task Queue

    JavaScript is single-threaded to avoid DOM rendering conflicts. It achieves non-blocking behavior via the Event Loop, which manages two types of asynchronous tasks:

    1. Macro-tasks: Larger time-grain tasks. Examples include script (initial synchronous code), setTimeout, setInterval, UI events, and I/O (Node.js).
    2. Micro-tasks: Tasks executed immediately after the current macro-task finishes but before the next macro-task begins. Examples include Promise.then, MutationObserver, and process.nextTick (Node.js).

    Execution Order:

    • Execute one macro-task.
    • If micro-tasks are queued during the macro-task, execute all of them sequentially until the micro-task queue is empty.
    • Move to the next macro-task in the queue.