DOCSEARCHbyAlgolia
Submit Docs

Muri Life Technical Notes

website·Indexed 30 days ago

https://my.muri.life/

A collection of technical documentation covering algorithms, data structures, and frontend engineering. Includes LeetCode solutions for dynamic programming, backtracking, and sliding windows; implementations of binary heaps, trees, and graphs; deep dives into JavaScript (ECMAScript, this, prototypes), Vue 3 diff algorithms, React useState, and Webpack configuration; as well as API documentation for the Chongmen anime site.

Tokens
58.8K
Snippets
288
Records
333
Agent score
50%

What's inside Muri Life

  1. Understand the JavaScript Event Loop execution order

    JavaScript is single-threaded to avoid complex synchronization issues (especially with DOM manipulation). To prevent blocking the main thread, it uses an Event Loop to manage task execution. Tasks are categorized into three priority levels:

    1. Synchronous Tasks: Executed immediately on the main thread in the order they appear.
    2. Microtasks: Executed after all current synchronous tasks are complete, but before the next macrotask.
    3. Macrotasks: Executed after the microtask queue has been cleared.

    Execution Flow:

    • Synchronous tasks enter the execution stack and run immediately.
    • Asynchronous tasks are added to the Event Table; once triggered, their callbacks enter the Event Queue.
    • The Event Loop continuously checks if the main thread is empty. If so, it processes all pending microtasks, then moves to the next macrotask.

  3. Understand JavaScript Execution Context and the Variable Object

    An Execution Context (EC) is created by the JavaScript engine whenever it prepares to execute a block of code (global code, function code, or eval code). These contexts are managed in a stack called the Execution Context Stack (ECS). Each execution context consists of three primary properties: the Variable Object (VO), the Scope Chain, and the this binding.

    The Variable Object (VO) is the data scope associated with an execution context that stores variables and function declarations defined within that context. There are three main types of Variable Objects:

    1. Global VO: The global object (e.g., window in browsers, global in Node.js), which serves as the end of the scope chain.
    2. Function VO (Activation Object/AO): Created when entering a function context during the analysis phase and initialized via the function's arguments object.
    3. Block VO: Used for let and const declarations within block-level scopes (e.g., inside an if statement).

  4. Verify the JavaScript Prototype Chain hierarchy

    The prototype chain establishes a hierarchy where functions and objects eventually link back to Object.prototype and null. The following relationships are fundamental to JavaScript's inheritance model:
    function Kon() {}
const yui = new Kon();

// Instance -> Constructor Prototype
yui.__proto__ === Kon.prototype; // true

// Constructor Prototype -> Constructor
Kon.prototype.constructor === Kon; // true

// Constructor Prototype -> Object Prototype
Kon.prototype.__proto__ === Object.prototype; // true

// Object Prototype -> null (End of chain)
Object.prototype.__proto__ === null; // true

// Constructor -> Function Prototype
Kon.__proto__ === Function.prototype; // true

// Function Prototype -> Object Prototype
Function.prototype.__proto__ === Object.prototype; // true

// Object Constructor -> Function Prototype
Object.__proto__ === Function.prototype; // true

// Function Constructor -> Function Prototype (Self-referential)
Function.__proto__ === Function.prototype; // true

// Object Prototype Constructor
Object.prototype.constructor === Object; // true

  5. Understand Browser Reflow and Repaint

    Reflow (Layout) occurs when the browser's layout engine calculates the size and position of elements based on the box model. Repaint occurs when the browser draws the elements on the screen based on their calculated box model and visual properties (such as color and direction).

    Crucially, a Reflow always triggers a Repaint, but a Repaint does not necessarily trigger a Reflow.

  6. Understand and implement Monotone Stacks

    A Monotone Stack is used when you need to find the nearest larger or smaller element to the left or right of a current element. By maintaining a stack of indices, you can reduce the time complexity of these searches from $O(n^2)$ to $O(n)$.

    Key Principles:

    • Store Indices: Store array indices in the stack rather than values. This allows you to retrieve both the value (A[idx]) and its position.
    • Monotone Decreasing Stack:
      • If the current element is $\le$ the top of the stack, push the current index.
      • If the current element is $>$ the top of the stack, pop elements until the stack is empty or the top is $\le$ the current element. The popped element's nearest larger value to the right is the current element, and its nearest larger value to the left is the new stack top.
    • Monotone Increasing Stack: Follows a similar logic but triggers pops when the current element is smaller than the stack top.

  8. Counting Sort algorithm overview

    Counting Sort is a specialized bucket sort that works by counting the number of occurrences of each unique element in an array.

    Algorithm Process:

    1. Identify the range of values [min, max] in the unsorted array. The offset is min.
    2. Initialize a count array cnts of length max - min + 1.
    3. Traverse the original array and increment the count for each element: cnts[num - min]++.
    4. For the unstable version: Iterate through cnts and fill the original array with values i + min based on the counts.
    5. For the stable version: Calculate the prefix sum of cnts to determine the exact final position of each element, then traverse the original array in reverse to populate the result array.

  9. Understand the Vue runtime rendering process

    The Vue runtime is responsible for converting virtual representations into actual DOM elements. It uses the h function to generate a VNode (Virtual Node), which is then processed by the render function using mount and patch methods to render the real DOM to the page.

  10. Understand JavaScript Prototype Chain Concepts

    JavaScript uses a prototype-based inheritance system. Key concepts include:

    • Explicit Prototype (prototype): A property that exists only on functions (except arrow functions). It is the object that will be assigned as the prototype to instances created by the function.
    • Implicit Prototype ([[prototype]] / __proto__): A property present on all objects (except null and undefined) that points to the prototype of the constructor that created the object.
    • Constructor (constructor): A property on a prototype object that points back to the original constructor function.
    • Everything is an Object: Most values in JavaScript (including primitives like numbers and booleans) behave as objects because they can access methods via their prototype chain, though null and undefined are exceptions.

  11. Simulate React lifecycle methods using useEffect in functional components

    In React functional components, the useEffect hook is used to simulate class-based lifecycle methods. The behavior depends on the dependency array (the second argument).

    • No dependency array: Simulates componentDidMount, componentDidUpdate (runs on every re-render), and componentWillUnmount (via the return cleanup function).
    • Dependency array with state [state]: Simulates componentDidMount and componentDidUpdate (runs only when the specified state changes), and componentWillUnmount (via the return cleanup function).
    • Empty dependency array []: Simulates componentDidMount (runs once on mount) and componentWillUnmount (via the return cleanup function).
    const Component = () => {
  useEffect(() => {
    // DidMount / DidUpdate
    
    return () => {
      // WillUnmount
    }
  }, []) // Use [] for mount/unmount only, [state] for specific updates, or omit for every render
}