DOCSEARCHbyAlgolia
Submit Docs

YK Manual - Frontend Development Notes

website·Indexed 29 days ago

https://yk2012.github.io/yk_manual/

A collection of technical notes and guides on advanced frontend development. It covers React (basics, Hooks, Redux, react-router-dom 5.2, and JSX), Vue (Vue 3 reactivity, Vuex, and framework design), and general web development topics including AJAX with axios, Virtual DOM diff algorithms, Abstract Syntax Trees (AST), and JavaScript sorting algorithms.

Tokens
220K
Snippets
1.1K
Records
1.4K
Agent score
75%

What's inside YK Manual

  1. Overview of Vue 3 Architectural Changes

    Vue 3 introduced several core architectural shifts to improve extensibility and performance:

    • Monorepo Structure: The framework is split into independent packages for reactivity, compilation, and runtime. The reactivity system is now decoupled from the core framework and can be used in other environments (e.g., Node.js or React).
    • Custom Renderers: Rendering logic is split into platform-agnostic logic and browser-specific APIs, enabling better cross-platform capabilities.
    • TypeScript Rewrite: The entire codebase was rewritten in TypeScript for better type safety and developer tooling.
    • Static Analysis: Vue 3 optimizes the Virtual DOM with static marking, allowing the compiler to skip static parts of the template and perform only necessary updates.

  2. Overview of Browser Threading Architecture

    The browser utilizes multiple threads to handle different tasks, ensuring the UI remains responsive while processing data or timers:

    1. GUI Rendering Thread: Handles the visual rendering (can be in a suspended/frozen state).
    2. JavaScript Engine Thread: Parses and executes JavaScript code.
    3. Timer Triggering Thread: Manages the timing for setTimeout and setInterval (separate from the JS engine).
    4. Browser Event Thread: Handles BOM rendering and other browser-level events.
    5. HTTP Thread: Responsible for network data requests.
    6. EventLoop Polling Thread: Adds triggered events to the end of the processing queue.

  3. Overview of the browser rendering process

    The browser transforms HTML and CSS into a visual page through the following sequence:

    1. Build DOM Tree: The browser parses the HTML string into a Document Object Model (DOM) tree structure.
    2. Style Calculation & CSSOM Tree: CSS is parsed to create a CSS Object Model (CSSOM) tree of rules.
    3. Load JS Scripts: JavaScript is loaded and may manipulate the DOM and CSSOM trees via APIs.
    4. Construct Render Tree: The DOM and CSSOM trees are combined into a Rendering Tree.
    5. Layout Calculation: The browser calculates the exact position and size of each node in the render tree.
    6. Painting: The final visual representation is drawn using the operating system's Native GUI APIs.

  4. Overview of the browser rendering pipeline

    The process of rendering a web page from HTML, CSS, and JavaScript involves several sequential stages:

    1. DOM Tree Construction: Converting HTML into a DOM tree.
    2. Style Calculation: Computing the final styles for each DOM node.
    3. Layout: Determining the geometric position of visible elements.
    4. Layering: Creating a LayerTree for complex effects (3D, z-index, etc.).
    5. Painting: Generating a list of drawing instructions for each layer.
    6. Tiling/Rasterization: Converting drawing instructions into actual pixels.
    7. Composition: Combining layers into the final image on screen.

  5. Overview of Vuex State Management

    Vuex is a centralized state management pattern for Vue.js applications, designed to manage shared state across multiple components. It solves the problem of multiple views depending on the same state or different views needing to change the same state, which would otherwise require complex prop drilling (passing data through multiple levels of components).

  6. Overview of JavaScript Data Types

    JavaScript consists of six primary data types: five primitive types and one reference type (Object).

    Primitive Types:

    1. String: Textual data.
    2. Number: Both integers and floating-point numbers.
    3. Boolean: Logical values (true or false).
    4. Null: Represents an intentional empty value/object.
    5. Undefined: A variable that has been declared but not assigned a value.

    Reference Type: 6. Object: Used for more complex data structures.

  7. Overview of Vue 2 Core Features

    Vue 2 is a progressive JavaScript framework used for building dynamic user interfaces. Its key characteristics include:

    • MVVM Pattern: Follows the Model-View-ViewModel architecture.
    • Component-Based: Uses a componentized mode to improve code reuse and maintainability.
    • Declarative Rendering: Allows developers to describe the UI without direct DOM manipulation.
    • Virtual DOM & Diff Algorithm: Optimizes performance by reusing DOM nodes.
    • Lightweight: Small size and high efficiency, suitable for both Mobile and PC development.

  8. Introduction to Less CSS

    Less (Leaner Style Sheets) is a backward-compatible CSS extension language. It provides a more concise syntax and advanced features such as variables, mixins, and nesting to overcome the limitations of standard CSS and improve developer productivity.

  9. Understand JavaScript Object basics and classifications

    Objects in JavaScript are reference data types and composite data types that can store multiple properties of different data types. Using typeof on an object returns 'object'.

    Objects are classified into three categories:

    1. Built-in Objects: Defined by the ES standard (e.g., Math, String, Number, Boolean, Function, Object).
    2. Host Objects: Provided by the runtime environment, primarily the browser (e.g., BOM, DOM).
    3. Custom Objects: Created by the developer.

  10. Understand the benefits of using TypeScript over JavaScript

    TypeScript provides an optional type system for JavaScript, allowing developers to catch errors during compilation rather than at runtime. Key advantages include:

    • Improved Refactoring: Types make it easier to rename or restructure code with confidence.
    • Self-Documenting: Function signatures act as a formal specification (theorem) of what the code should do, while the body is the implementation.
    • Static Type Checking: Unlike JavaScript (a dynamic language), TypeScript determines variable types during the compilation phase, reducing runtime exceptions.
    • Compatibility: TS can be compiled into any version of JavaScript, ensuring compatibility across different JS environments.

  11. Understand browser caching mechanisms and storage locations

    Browser caching uses memory and disk areas as buffers to temporarily store previously visited information. This reduces server load, improves performance by loading local resources faster, and decreases bandwidth consumption.

    Typical browser cache lookup order: Service Worker $\rightarrow$ Memory Cache $\rightarrow$ Disk Cache $\rightarrow$ Push Cache

  12. Understand the complete browser rendering pipeline

    The process of transforming HTML, CSS, and JavaScript into a rendered page follows these sequential steps:

    1. DOM Tree Construction: The rendering process converts HTML content into a DOM tree.
    2. Style Calculation: CSS stylesheets are converted into styleSheets and specific styles are calculated for each DOM node.
    3. Layout: A layout tree is created, and the geometric position and size of elements are calculated.
    4. Layering: The layout tree is split into layers, creating a layer tree.
    5. Painting: A paint list (recording drawing orders and instructions) is generated for each layer and committed to the compositor thread.
    6. Rasterization: The compositor thread divides layers into tiles (typically 256x256 or 512x512). These tiles are converted into bitmaps via a rasterization thread pool, often accelerated by the GPU.
    7. Composition: The compositor thread sends DrawQuad commands to the browser process.
    8. Display: The browser process (via the viz component) uses DrawQuad commands to draw the content into memory and display it on the screen.