Frontend Engineering and Data Structures Guide

A Tree is an abstract data type or data structure consisting of $n$ ($n > 0$) finite nodes organized in a hierarchical relationship. It is used to model data sets with tree-like properties. Key characteristics include:

• Each node has a finite number of child nodes or no child nodes.
• The node without a parent is called the root node.
• Every non-root node has exactly one parent node.
• Except for the root, each child node can be divided into multiple disjoint subtrees.
• There are no cycles (loops) within a tree.

Compared to other structures: it combines the advantages of arrays (fast access), linked lists (efficient insertion/deletion), and hash tables (high efficiency), while mitigating their respective weaknesses. Common applications include company organizational charts and the frontend DOM tree.

Node.js provides several global objects for process and environment management:

• process: Contains information about the current Node process, environment, and arguments.
• console: Provides standard output functions.
• global: The top-level global object (similar to window in browsers).
• __dirname: Returns the directory path of the current module (excluding the filename).
• __filename: Returns the full path and filename of the current module.

Note: __dirname and __filename are module-level variables available in every module but are not accessible in the interactive REPL (command line).

A Queue is a restricted linear data structure that operates on the First-In-First-Out (FIFO) principle. Elements are inserted at the back (rear) and removed from the front (head).

Key characteristics:

• FIFO: The first element added is the first one to be removed.
• Structure: Each element (except the head and tail) has one predecessor and one successor.
• Common Applications: Level-order traversal and Breadth-First Search (BFS).

The browser rendering process follows these primary stages:

1. HTML Parsing: The browser parses HTML to build the DOM (Document Object Model) Tree.
2. CSSOM Construction: CSS files are downloaded and parsed into the CSSOM (CSS Object Model) tree. While CSS download doesn't block DOM parsing, it does block the construction of the Render Tree.
3. Render Tree Construction: The DOM and CSSOM are combined. Elements with display: none are excluded from the Render Tree.
4. Layout (Reflow): The browser calculates the exact geometry (size and position) of each node in the Render Tree.
5. Paint: The browser converts the layout frames into actual pixels on the screen, including colors, borders, and images.

A Heap is a special type of complete binary tree used primarily to solve Top K problems (finding the K largest or smallest elements in a dataset). There are two main types of binary heaps:

• Max Heap: Every node is greater than or equal to its children.
• Min Heap: Every node is less than or equal to its children.