DOCSEARCHbyAlgolia
Submit Docs

Awesome Interview Frontend Guide

website·Indexed 30 days ago

https://hzfe.github.io/awesome-interview/

A comprehensive technical resource for frontend interview preparation. It covers core JavaScript and TypeScript concepts, CSS layout and optimization, browser internals, network protocols (HTTP/1.1, HTTP/2), security, and framework internals for React and Vue. Includes implementation guides for Promises/A+, apply/call/bind, and throttle/debounce, as well as algorithm challenges and webpack workflow analysis.

Tokens
42.6K
Snippets
113
Records
240
Agent score
75%

What's inside Awesome Interview

  1. Introduction to TypeScript Generics

    TypeScript Generics are tools that allow developers to defer the specification of a type until the time the component (class, interface, or function) is actually used, rather than defining it at the time of declaration. This provides flexibility and reusability across different types.

  2. Overview of the browser page loading process

    The process of loading a web page after entering a URL consists of the following sequential steps:

    1. URL Input and validation
    2. DNS Resolution (converting domain name to IP address)
    3. Establishing a TCP connection
    4. Sending HTTP/HTTPS requests (including TLS handshake for HTTPS)
    5. Server response
    6. Browser parsing and rendering of the page
    7. Closing the TCP connection after the HTTP request ends.

  3. Overview of JavaScript Module Specifications

    JavaScript module specifications solve naming conflicts (global scope pollution) and reduce coupling between code components, improving maintainability and reusability. The primary specifications are:

    • CommonJS: Used primarily in Node.js; synchronous loading via require and exporting via exports.
    • AMD (Asynchronous Module Definition): Used in browsers; asynchronous loading via define and require, emphasizing dependency declaration before the module factory.
    • CMD (Common Module Definition): Used in browsers; asynchronous loading via require and exports, emphasizing dependencies declared close to where they are used.
    • UMD (Universal Module Definition): A cross-platform wrapper that combines CommonJS and AMD to ensure compatibility across different environments.
    • ESM (ECMAScript Module): The official standard natively supported by modern browsers; uses import and export.

  4. Overview of the webpack build workflow

    webpack is a module bundling tool that transforms various resource types (images, CSS, JS, etc.) into JS-formatted bundle files. The core task is content transformation and resource merging, which occurs in three distinct stages:

    1. Initialization Stage: Merges configuration (from files, objects, and Shell parameters) with defaults, creates the Compiler object, and initializes the environment (injecting built-in plugins, registering module factories, and loading configured plugins).
    2. Build Stage: Executes the Compiler.run method to create a Compilation object. It identifies entry points, recursively traverses dependencies, uses loaders for transformation, and utilizes the acorn JS parser to convert content into AST objects to map the dependency graph.
    3. Generation Stage: Uses the dependency graph to group modules into Chunks. These chunks are converted into Assets and finally written to the file system based on the output configuration.

  5. Overview of Webpack Loaders

    Webpack natively only processes JavaScript and JSON files. Loaders extend this capability by transforming other file types into valid Webpack modules (such as ES modules, CommonJS, or AMD) that can be added to the dependency graph. A loader is essentially a function that transforms the input content and returns the result.

  6. Overview of JavaScript Asynchronous Programming Patterns

    JavaScript is a single-threaded, synchronous, and blocking language. To achieve non-blocking execution of asynchronous tasks, browsers provide Web APIs that insert callback functions into the event loop. Common asynchronous patterns include: asynchronous callbacks, timers, publish-subscribe patterns, Promises, Generators, async/await, and Web Workers.

  7. Overview of the Browser Rendering Pipeline

    The browser rendering process begins when the browser process receives the first byte of HTML and notifies the rendering process. The pipeline consists of five primary stages:

    1. PARSE: Parses HTML to construct the DOM tree.
    2. STYLE: Calculates the final effective styles for each node (CSSOM).
    3. LAYOUT: Calculates the exact position and size of each node.
    4. PAINT: Draws boxes and organizes them into layers to avoid unnecessary repaints.
    5. COMPOSITE & RENDER: Composites layers into a bitmap and sends it to the GPU for screen display.

    Performance is optimized by ensuring the pipeline is not blocked, avoiding unnecessary reflows (layout) and repaints, and utilizing GPU hardware acceleration.

  8. Overview of HTTP Caching Mechanisms

    HTTP caching is divided into two primary categories: Strong Caching and Conditional (Negotiation) Caching.

    • Strong Caching: The browser retrieves resources directly from the local cache without sending a network request if the cache is valid. The browser displays a 200 from cache status code.
    • Conditional Caching: The browser sends a request to the server with a cache identifier. If the resource hasn't changed, the server returns a 304 Not Modified status, instructing the browser to use the local version. Otherwise, it returns 200 OK with the updated data.

  9. Understand the MVVM architecture in Vue

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

    • Model: The data layer responsible for business logic and server interaction.
    • View: The UI layer that renders the data.
    • ViewModel: The bridge between the Model and View, ensuring that changes in the model update the view and vice versa.

  10. Understand the purpose and benefits of React Fiber

    React Fiber is the reconciliation engine introduced in React 16 to support incremental rendering of the virtual DOM. It replaces the older 'Stack Reconciler' (which used a non-interruptible recursive process) with a 'Fiber Reconciler' that allows updates to be asynchronous and interruptible.

    Key capabilities include:

    • Time Slicing: Breaking large, complex tasks into smaller chunks to prevent blocking the main thread and avoid frame drops (jank).
    • Prioritization: Assigning priorities to tasks so high-priority updates (like user input) can be scheduled ahead of low-priority ones.
    • Task Control: The ability to pause, resume, or abort tasks during the reconciliation process.

  11. Understand the Browser Same-Origin Policy

    The Same-Origin Policy (SOP) is a security feature implemented by browsers to prevent malicious sites from interacting with data on a different origin. A request is considered cross-origin if the Protocol, Hostname, or Port differs between the page and the request target. It is important to note that cross-origin restrictions are enforced by the browser; the server still processes the request and sends a response, but the browser prevents the client-side code from accessing it.

  12. Understand the Babel compilation process

    Babel acts as a JavaScript compiler that converts modern JS (or dialects like TS, JSX, Flow) into a version compatible with target environments. The process consists of three main stages:

    1. Parsing: Uses @babel/parser to convert source code into an Abstract Syntax Tree (AST). This involves Lexical Analysis (tokenization) and Syntactic Analysis (building the tree structure).
    2. Transformation: Uses @babel/traverse to perform a depth-first traversal of the AST. Plugins are applied here to add, remove, or modify AST nodes.
    3. Generation: Uses @babel/generator to convert the modified AST back into a JavaScript code string.