DOCSEARCHbyAlgolia
Submit Docs

ChaosZhu Front-End Knowledge Base

website·Indexed 31 days ago

https://chaoszhu.com

A comprehensive collection of front-end development notes covering JavaScript (Event Loop, Promise, memory leaks, debounce/throttle), CSS (Flexbox, Grid, variables, Sass/SCSS), Design Patterns (Singleton, Observer, Strategy, Command), Webpack 4 configuration, SEO, and tools like Fiddler and Git.

Tokens
134.2K
Snippets
668
Records
929
Agent score
60%

What's inside ChaosZhu Front-End Notes

  2. Overview of qiankun micro-frontend framework

    qiankun is a micro-frontend implementation library based on single-spa developed by Ant Financial. It provides out-of-the-box APIs for easy integration (similar to iframes) and implements CSS style isolation and JS sandbox mechanisms. It uses runtime dynamic loading, ensuring the main and child applications are decoupled. Child applications must export three lifecycle hooks: bootstrap, mount, and unmount.

  3. Overview of the Move programming language

    Move is a strongly-typed development language used for writing smart contracts on the Sui blockchain. Its core is developed from scratch using Rust. Originally created by Meta (formerly Facebook) for the Libra/Diem blockchain platform, the language is now utilized by Sui, a blockchain platform designed from the ground up that launched its mainnet in May 2023.

  4. Overview of Web Components core technologies

    Web Components allow the creation of reusable DOM elements that can be used across any framework. They are composed of three primary technologies:

    1. Custom Elements: APIs to define new native DOM tags.
    2. Shadow DOM: Provides encapsulation by attaching an isolated DOM tree to an element, preventing styles from leaking in or out.
    3. HTML Templates: Uses <template> and <slot> tags to define markup that is not rendered until instantiated, serving as a blueprint for reusable components.

    Note: Web Components are not supported in IE or old versions of Edge; polyfills are required for these environments.

  6. Set page metadata for SEO and Authorship

    Use the name attribute in <meta> tags to provide metadata about the document. This is primarily used for Search Engine Optimization (SEO) and identifying the author or crawler permissions.
    <!-- Author of the page -->
<meta name="author" content="chaoszhu">

<!-- Page description for SEO -->
<meta name="description" content="description">

<!-- Keywords for SEO -->
<meta name="keywords" content="key word">

<!-- Instructions for search engine crawlers -->
<meta name="robots" content="all">

  7. Compare HTTP/1.0, HTTP/1.1, and HTTP/2 characteristics

    HTTP is a stateless application layer protocol. The evolution from 1.0 to 2 focuses on reducing latency and improving concurrency:

    • HTTP/1.0: Short-lived connections. Each request requires a new TCP connection, leading to high overhead and Head-of-Line (HOL) blocking where the next request must wait for the current response.
    • HTTP/1.1: Introduced persistent connections (Keep-Alive) and pipelining. While it allows multiple TCP connections to the same host (typically 6-8 in modern browsers), it still suffers from HOL blocking at the response level.
    • HTTP/2: Implements true parallelism via multiplexing over a single TCP connection using binary framing. It also introduces header compression and server push.

  8. Understand the Virtual DOM (vdom) workflow

    The Virtual DOM is a JavaScript object representation of a real DOM tree. The update process follows three main steps: 1. Represent the DOM tree structure using JavaScript objects and use this tree to build and insert a real DOM tree into the document. 2. When state changes, construct a new object tree and compare it with the old tree to identify differences. 3. Apply the identified differences to the real DOM tree to update the view.

  9. Understand the Same-Origin Policy (SOP)

    The Same-Origin Policy is a security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. Two URLs are considered 'same-origin' only if their protocol, domain, and port are all identical. Note that two different domains pointing to the same IP address are still considered different origins. SOP protects users by preventing malicious sites from accessing sensitive data (Cookies, localStorage, IndexedDB) or DOM elements of another site, and by blocking unauthorized cross-origin AJAX/fetch requests to prevent CSRF attacks.

  10. Understand the React Native New Architecture (JSI, Fabric, Turbo Modules)

    The new architecture aims to remove the performance bottlenecks of the asynchronous JSON bridge:

    • JSI (JavaScript Interface): A C++ framework that allows JS to hold direct references to Native Modules and call native methods synchronously, eliminating JSON serialization overhead.
    • Fabric Renderer: A new rendering system that replaces the old UI Manager (supported from v0.68, requires Node > 14).
    • Turbo Modules: Optimizes app startup by loading native modules lazily instead of all at once (supported from v0.68).
    • Codegen: A static type checker that ensures JS code and C++ JSI can communicate correctly.

  11. Understand Express middleware fundamentals

    In Express, a middleware function is defined as a function that accepts three parameters: req (request), res (response), and next (the callback to pass control to the next middleware).

    The request lifecycle follows a linear chain: Request $\rightarrow$ Middleware A $\rightarrow$ Middleware B $\rightarrow$ Middleware C $\rightarrow$ Response. Control flows through the chain via the next() function. The process stops once a response is sent using methods like res.send() or res.json(); attempting to execute further middleware after a response has been sent will result in an error.