HiClean Study Notes

website·Indexed 30 days ago

https://hiclean.icu

A collection of technical study notes and demos covering frontend engineering, JavaScript, CSS, Vue.js, and computer science basics. Topics include browser rendering flows, TCP/HTTP protocols, data structures, event loop mechanisms, and practical implementation guides for file uploads and tRPC.

Tokens
94.3K
Snippets
370
Records
544
Agent score
51%

What's inside HiClean Study

  1. Overview of Data Structure Classifications

    Data structures are categorized into three main types:

    1. Logical Structures:
      • Linear Structures: Elements have a one-to-one relationship (e.g., Linear Lists, Stacks, Queues, Strings, Arrays, Generalized Lists).
      • Non-linear Structures: Elements have one-to-many or many-to-many relationships (e.g., Tree structures, Graph structures).
    2. Storage Structures:
      • Sequential Storage: Elements are stored in physically adjacent memory units.
      • Linked Storage: Elements are linked via pointers.
    3. Operations: Common operations include retrieval, sorting, insertion, deletion, and modification.
  2. Overview of the Browser Rendering Pipeline

    The process of transforming a URL into a rendered page consists of two primary phases: Network Communication and Browser Rendering. Network Communication handles resource retrieval (caching, TCP connection, and file downloading). Browser Rendering takes the retrieved resource strings and processes them through an 8-stage pipeline to produce the final visual output.
  3. Overview of the Browser Rendering Pipeline

    The process of transforming a URL into a rendered page consists of two primary phases: Network Communication and Browser Rendering. Network Communication retrieves resources (handling caching, TCP connections, and file downloads). Browser Rendering then processes these resources through an eight-stage pipeline where the output of one stage serves as the input for the next.
  4. Understand JavaScript Closures

    A closure is the combination of a function and a reference to its surrounding state (the lexical environment). In JavaScript, closures are created every time a function is created. This allows an inner function to access the scope of its outer function even after the outer function has finished executing.

    Key characteristics:

    • Closures are created at the moment of function creation.
    • They contain all variables and reference addresses within that scope.
    • A closure is formed only if the inner function actually uses a variable from the outer function's scope.
  5. Understand Data Structure Classifications

    Data structures are categorized into three main types:

    1. Logical Structures:
      • Linear Structures: Elements have a one-to-one relationship (e.g., Linear Lists, Stacks, Queues, Strings, Arrays, Generalized Lists).
      • Non-linear Structures: Elements have one-to-many or many-to-many relationships (e.g., Tree structures for one-to-many, Graph structures for many-to-many).
    2. Storage Structures:
      • Sequential Storage: Elements are stored in contiguous memory locations.
      • Linked Storage: Elements are stored non-contiguously and linked via pointers.
    3. Operations: Common operations include retrieval, sorting, insertion, deletion, and modification.
  6. Use Object class methods: equals, hashCode, and toString

    The java.lang.Object class provides fundamental methods for all Java objects:

    • equals(Object obj): Used to compare if two references are equal. By default, it compares memory addresses. Subclasses typically override this to compare object content.
    • hashCode(): Returns an integer hash value used for hash-based collections. If two references point to the same object, they must have the same hash code.
    • toString(): Returns a string representation of the object. The default format is ClassName@HexHashCode. Subclasses should override this to provide meaningful attribute information.
  7. Understand the fundamentals of Deep Learning and Neural Networks

    Deep Learning is an advanced form of Machine Learning that utilizes neural network structures to process and understand complex, unstructured data such as video, images, text, and audio. It requires significant data and computational resources.

    At its core, a neural network consists of layers of interconnected neurons. Each connection has a weight (strength). By adjusting these weights, the network can learn to approximate any function. Training a neural network is essentially the process of using data to fit a mathematical function that represents a specific AI application.

  8. Understand the core concepts of Deep Learning and Neural Networks

    Deep learning is an advanced form of machine learning that uses neural network structures to process and understand complex, unstructured data such as video, images, text, and audio.

    At its core, a neural network consists of layers of interconnected neurons. Each connection has a specific strength (weight). By adjusting these strengths, the network can learn to approximate any mathematical function. Therefore, training a neural network is essentially the process of using data to fit a function that represents a specific AI application.

  9. Implement multi-process clustering with the cluster module

    The cluster module provides a more robust API for creating a multi-process application than raw child_process.fork. It uses a master-worker model where the master process manages workers and distributes incoming TCP connections using a Round-robin load balancing algorithm via IPC.
  10. Understand the CSS property computation process

    CSS determines the final value of a property through a four-step sequence. If a step provides a value, the process typically moves toward the final computed value; if not, it proceeds to the next fallback mechanism:

    1. Determine Declared Value: Identify values explicitly defined in CSS rules.
    2. Resolve Cascading Conflicts: If multiple rules target the same property, determine which one wins based on origin, specificity, and order.
    3. Apply Inheritance: If no declared value exists, check if the property can be inherited from a parent element.
    4. Use Default Value: If the property is not declared and not inherited, the browser applies the initial/default value.
  11. Understand JavaScript runtime environments and memory allocation

    JavaScript runs in environments such as Browsers, WebViews, Hybrid Apps (WebApp), and Node.js. These environments provide the necessary memory structures for code execution:

    • Stack Memory (Execution Context Stack - ECS): Used for executing code and storing primitive data types (primitive values). It manages Execution Contexts (EC) to distinguish between global, function, or block scopes (e.g., EC(G) for global context).
    • Heap Memory: Used for storing complex data types, specifically objects and functions.

    Stack and Heap are independent memory spaces; the stack stores the reference (address) to the data located in the heap for non-primitive types.

  12. Use the Node.js process global object

    The process object provides information about, and control over, the current Node.js process. Key properties and methods include:

    • cwd(): Returns the current working directory where the command was executed.
    • exit(): Terminates the current process.
    • argv: An array containing the command-line arguments passed when the Node.js command was run.
    • platform: Returns the operating system platform.
    • kill(): Sends a signal to a process to terminate it.
    • env: Contains the user environment variables.