DOCSEARCHbyAlgolia
Submit Docs

zh-shan Front-end Interview Knowledge Base

website·Indexed 29 days ago

https://zh-shan.github.io

A comprehensive collection of front-end interview materials covering JavaScript, CSS, HTML, Vue, Node.js, and browser principles. Includes technical deep dives into computer networks, data structures, algorithms, design patterns, performance optimization, and front-end engineering, along with hand-written code implementations for common functions and operators.

Tokens
21.5K
Snippets
50
Records
125
Agent score
75%

What's inside zh-shan Interview Guide

  1. Use CSS Pre-processors and Post-processors

    CSS tooling is divided into two main categories to improve developer experience and browser compatibility:

    • Pre-processors (e.g., Less, Sass, Stylus): These are abstraction layers that compile a special syntax into standard CSS. They introduce programming features like variables, nesting, mixins, inheritance, loops, and functions to increase code reusability.
    • Post-processors (e.g., PostCSS): These process a completed stylesheet to make it more effective. The most common use case is automatically adding vendor prefixes (e.g., -webkit-, -moz-) to ensure cross-browser compatibility.

  2. Analyze frontend performance across the page lifecycle

    Frontend performance optimization aims to make pages display and respond faster. Optimization strategies should be categorized by the three stages of a page's lifecycle:

    1. Loading Phase: From the initial request to the rendering of the complete page. Performance is primarily impacted by network latency and JavaScript script execution.
    2. Interaction Phase: From the completion of page loading to the user's interactions. Performance is primarily impacted by JavaScript script efficiency.
    3. Closing Phase: The cleanup operations performed after a user issues a command to close the page.

    Developers should focus primarily on the Loading and Interaction phases to improve user experience.

  3. Implement CSS Engineering practices

    CSS Engineering aims to solve problems related to macro design (organization/splitting), coding optimization (nesting, variables), build optimization (minification), and maintainability.

    Core pillars of CSS engineering include:

    1. Preprocessors (Sass, Less): Provide nesting, variables, mixins, and modularity to avoid repetitive code and deep nesting issues.
    2. Post-processors (PostCSS): Automate tasks like vendor prefixing and polyfilling.
    3. Build Tools (Webpack loaders): Optimize the final bundled CSS output.

  4. Understand JavaScript Execution Context

    Before executing JavaScript code, the engine parses it and creates an Execution Context.

    • Global Execution Context: Created first. It handles variable definitions and function declarations. Variables are initially assigned undefined during the creation phase.
    • Function Execution Context: Created whenever a function is called. In addition to variable and function definitions, it includes this, arguments, and the function's parameters.

    Execution happens in two main phases: the creation/compilation phase (where memory is allocated for declarations) and the execution phase (where code is run and variables are assigned values).

  5. Understand the difference between DOM and BOM

    DOM (Document Object Model) treats the document as an object, defining methods and interfaces to handle webpage content. BOM (Browser Object Model) treats the browser as an object to interact with the browser window. The core of BOM is the window object, which acts as both the interface for the browser window and the Global object. The document object (the root of DOM) is a child object of the BOM's window object.

  6. Understand the JavaScript Event Loop mechanism

    JavaScript is a single-threaded language, meaning it can only execute one task at a time. To prevent long-running tasks (like API requests or timers) from blocking the main thread, JavaScript uses an Event Loop to manage synchronous and asynchronous execution.

    Execution Flow:

    1. Call Stack: Synchronous tasks are pushed onto the Call Stack (LIFO) and executed immediately. If the stack overflows, a 'stack overflow' error occurs.
    2. Asynchronous Tasks: When an async task is initiated, it is called in the stack, but its callback is placed into a task queue. The initial call is then removed from the stack to allow other code to run.
    3. Task Queues: Async tasks are split into two queues: the Macrotask Queue and the Microtask Queue.

    The Event Loop Cycle:

    1. Pick the first macrotask from the Macrotask Queue and execute it in the Call Stack.
    2. Once the Call Stack is empty (all synchronous code for that macrotask is finished), execute all tasks in the Microtask Queue until it is completely empty.
    3. If new microtasks are added during this process, they are also executed before moving to the next macrotask.
    4. Once the Microtask Queue is empty, the cycle ends and the next macrotask from the Macrotask Queue is processed.

  7. Understand Block Scope in JavaScript

    Scope determines the visibility and lifetime of variables. Before ES6, JavaScript only had Global Scope and Function Scope.

    Block Scope (introduced in ES6) refers to variables defined within a pair of curly braces {}. Variables declared with block-scope keywords (like let and const) are only accessible inside that specific block and are invisible to the outside code.

  8. Use Utility-first CSS with Tailwind CSS

    Tailwind CSS is a utility-first framework where page designs are built by composing small, single-purpose utility classes. Key advantages include: eliminating the need for custom class naming, controllable CSS file size via purging, and a unified design system.

  9. Understand PostCSS and its use cases

    PostCSS is a tool that processes CSS itself (unlike preprocessors that process 'CSS-like' languages). It functions similarly to Babel for JavaScript, allowing developers to compile advanced CSS syntax not yet widely supported by browsers and automatically add vendor prefixes. Key use cases include improving code readability, using the Autoprefixer plugin for browser compatibility, and writing 'future-proof' CSS.

  10. Determine if a value is an Array

    Multiple methods exist to verify if a variable is an array. The modern standard is Array.isArray().
    const arr = [];

// Recommended (ES6+)
Array.isArray(arr); 

// Other methods
Object.prototype.toString.call(arr) === '[object Array]';
arr instanceof Array;
arr.__proto__ === Array.prototype;
Array.prototype.isPrototypeOf(arr);

  11. Implement Progressive Enhancement vs. Graceful Degradation

    These are two opposing strategies for handling browser compatibility:

    • Progressive Enhancement: Start with a basic, functional version for the lowest common denominator of browsers, then incrementally add advanced features and interactions for modern browsers. It focuses on the content first and looks forward.
    • Graceful Degradation: Build the full-featured experience for the most advanced browsers first, then provide simplified fallbacks or compatibility fixes for older browsers. It starts from a complex state and looks backward.

  12. Implement HTML5 Offline Storage using AppCache

    HTML5 offline storage allows a site to be accessible without an internet connection by caching resources via a .appcache manifest file.

    Setup:

    1. Link the manifest file in the <html> tag:
    <html lang="en" manifest="index.manifest">
    1. Define resources in the index.manifest file using these sections:
    • CACHE: List of resources to store offline. The manifest file and the page referencing it are cached automatically.
    • NETWORK: Resources that must be downloaded from the network every time (not cached). If a resource is in both CACHE and NETWORK, CACHE takes priority.
    • FALLBACK: Provides a replacement resource if the primary one fails (e.g., / /offline.html serves offline.html for any failed root request).

    Management:

    • Updating: Update the manifest file, use JavaScript, or clear browser cache.
    • Loading: Online, the browser checks the manifest; if it changed, it updates the cache. Offline, the browser uses the cached resources.

    Caveats:

    • Manifest and fallback resources must be same-origin.
    • If the manifest or any listed file fails to download, the entire update fails and the old cache is used.
    • Storage limits vary by browser (e.g., 5MB per site).
    CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html