DOCSEARCHbyAlgolia
Submit Docs

bywater-blog

website·Indexed 31 days ago

https://0529bill.github.io/bywater-blog/

A technical blog focusing on frontend development, featuring detailed guides on JavaScript (closures, event loop, garbage collection, prototypes), React (Hooks, reconciliation, Redux, React 18), and interview preparation through the 2022 Iron Man competition. It includes practical implementations of Promise.all and Promise.race, LeetCode problem solutions, and discussions on CSR vs SSR and image optimization.

Tokens
43.1K
Snippets
172
Records
313
Agent score
75%

What's inside bywater-blog

  1. Overview of Core Web Vitals (CWV)

    Core Web Vitals are a set of specific metrics introduced by Google in 2021 to measure user experience and page performance. These metrics directly impact SEO and website ranking. The three primary Core Web Vitals are:

    1. Largest Contentful Paint (LCP): Measures loading performance.
    2. First Input Delay (FID): Measures interactivity.
    3. Cumulative Layout Shift (CLS): Measures visual stability.

  2. Understand the browser rendering pipeline (Reflow, Repaint, Compositing)

    When a browser receives HTML and CSS, the rendering engine follows these steps to display the page:

    1. DOM & CSSOM Construction: The engine parses HTML into a Node Tree (DOM tree) and CSS into a CSSOM tree. These are combined to create the Render Tree.
    2. Reflow (Layout): The browser calculates the exact position and pixel size of every node in the render tree, starting from the root. This is computationally expensive as it recalculates relationships between elements. Reflow is triggered by scrolling, resizing the window, or modifying DOM elements.
    3. Repaint (Painting): The browser determines the painting order of elements (e.g., handling z-index, backgrounds, and text) to resolve overlaps.
    4. Compositing: The final render is drawn to the screen via the GPU.

  3. Understand Static Site Generation (SSG) characteristics

    Static Site Generation (SSG) produces separate HTML files for every URL at build time. These pre-rendered files are served to the client upon request.

    Pros:

    • Very fast FCP and TTFB because the server simply serves a pre-existing file.

    Cons:

    • Scalability: Generating individual files for every possible URL is inefficient for sites with a massive number of pages.
    • Stale Content: The site must be rebuilt and redeployed whenever content changes, making it unsuitable for highly dynamic content.

  4. Understand React 18 Concurrent Rendering

    Concurrent rendering in React 18 allows React to interrupt, pause, or discard updates to improve user experience. Unlike traditional rendering, it enables the ability to change the order of rendering tasks, ensuring that high-priority updates (like user input) are processed before lower-priority tasks, preventing the UI from freezing during heavy updates.

  5. Understand JavaScript Closures and Lexical Environments

    A closure is a function that remembers and can access variables from its outer scope, even after the outer function has finished executing. In JavaScript, all functions are closures.

    This behavior is powered by the Lexical Environment, a hidden object created for every function, block {}, and script. The Lexical Environment consists of:

    1. Environment Record: An object that stores all local variables.
    2. Outer Reference: A reference to the parent (outer) lexical environment, allowing the function to look up variables in the scope chain.

  6. Compare npm, yarn, and pnpm package managers

    Different package managers handle the node_modules structure and dependency resolution differently:

    • npm 2.0: Used a nested structure, which led to very large file sizes and deep directory nesting.
    • npm 3.0+: Uses a flat structure to reduce duplication, but this can lead to 'phantom dependencies' (where packages not explicitly listed in package.json are accessible because they were hoisted to the top level).
    • yarn: Introduced lock files to ensure consistent dependency versions across environments.
    • pnpm: Stores packages in a global content-addressable store on disk and uses symbolic links (symlinks) in the project's node_modules. This is faster, saves disk space, and eliminates phantom dependencies.

  7. Understand React's role in MVC/MVVM architectures

    React is a library focused on the View layer rather than a full framework. In a macro MVC (Model-View-Controller) architecture, React handles the View, while the Model and Controller logic are typically handled by the backend.

  8. Use Blob URLs to handle binary data in the browser

    Blob URLs (also known as Object URLs) are pseudo-protocols that allow Blob and File objects to be used as URL sources. This is essential for elements that require a URL to load data, such as <img> tags or download links, without needing to upload the binary data to a server first.

    Key characteristics of Blob URLs:

    • Used for storing large files like audio, video, large documents, or images.
    • More performant than Base-64 encoded data URLs.
    • Blob objects are immutable.
    • Blob URLs can only be generated internally by the browser.

  9. Understand the JavaScript Execution Context phases

    When JavaScript code is executed, the engine creates a Global Execution Context which consists of two main phases:

    1. Creation Phase:
      • Creates the global object (window in browsers, global in Node.js).
      • Binds this to the global object.
      • Sets up a memory heap for variables and function references.
      • Stores function declarations in the memory heap and initializes variables to undefined.
    2. Execution Phase:
      • Code is executed line-by-line.
      • Variables are assigned their actual values.
      • When a function is called, the engine creates a Function Execution Context (similar to the global context), but the global object is replaced by the arguments object containing the function's passed values.

  10. Use IIFEs to encapsulate var variables

    Immediately Invoked Function Expressions (IIFEs) were historically used to create private scopes for var declarations to prevent polluting the global namespace. With the introduction of let and const (which provide block scoping), IIFEs are generally no longer necessary for variable encapsulation.
    (function () {
  var message = "Hello";
  alert(message); // Hello
})();

  11. Understand React core concepts and advantages

    React is a free, open-source JavaScript library used for building user interfaces. Key characteristics include:

    • Declarative UI: Focuses on what the UI should look like rather than how to change it. React handles DOM manipulations internally when state or data changes, which improves performance.
    • Reusable Components: Allows developers to build independent components to increase code readability, reusability, and reduce debugging time.
    • One-Way Data Flow: Ensures data flows in a single direction, making the application more predictable and easier to debug.
    • Strong Ecosystem: Benefits from a massive amount of community support and available npm packages.

    Trade-off: Because React is a library rather than a full-featured framework, many essential tools are third-party packages. While this offers flexibility, it requires developers to continuously learn new libraries and manage potential version compatibility issues.

  12. Understand the JavaScript Event Loop and Asynchronous Execution

    The Event Loop is a mechanism that allows JavaScript to perform non-blocking, asynchronous operations despite being single-threaded. It manages the execution of code by coordinating the Call Stack and the Callback Queue. When the Call Stack is empty, the Event Loop pushes pending tasks from the Callback Queue onto the stack for execution. Tasks in the queue are prioritized as follows: Microtasks (e.g., Promises) are executed before Macrotasks (e.g., setTimeout, setInterval).