DOCSEARCHbyAlgolia
Submit Docs

Dachao Technical Notes

website·Indexed 30 days ago

https://dachao.top

A collection of technical analyses and tutorials covering frontend internals, browser mechanics, and server-side technologies. Key topics include deep dives into Vue 2 and Vue 3 source code (reactivity, Diff algorithms, and vue-router 4.x), browser rendering, event loops, network protocols (HTTPS, WebSocket), cybersecurity (XSS, CSRF), and introductions to C# and MongoDB.

Tokens
238.7K
Snippets
900
Records
1.5K
Agent score
50%

What's inside Dachao

  1. Overview of vue-router 4.x Internal Architecture

    The core of vue-router 4.x is centered around the createRouter function located in packages/router/src/router.ts. This function initializes the router instance by setting up the route matcher, navigation guards, current route state, and parameter handling. It returns a Router object that provides the public API for navigation (push, replace, go), route management (addRoute, removeRoute), and guard registration (beforeEach, afterEach).

  2. Overview of Session Control Techniques

    HTTP is a stateless protocol, meaning it cannot distinguish if multiple requests come from the same client. Session control (Authorization) is used to manage user identity across requests. The three common techniques for session control are: cookie, session, and token. These mechanisms provide the necessary credentials (tokens or certificates) to transition a user from a guest mode to a logged-in mode, granting access to protected resources.

  3. Overview of Dual-ended Diff algorithm

    Dual-ended Diff is designed to optimize DOM movements compared to Simple Diff. While Simple Diff may perform unnecessary moves, Dual-ended Diff compares the start and end of both the new and old children lists simultaneously using four pointers. This allows it to identify movements from both ends of the list, reducing the total number of DOM operations required to reach the target state.

  4. Overview of the Vue 3 mounting and rendering flow

    The Vue 3 rendering process begins with createApp(APP).mount('#app'). The high-level execution sequence is as follows:

    1. App Creation: createApp initializes the renderer and creates the app instance.
    2. Mounting: app.mount creates a VNode for the root component and invokes the render function.
    3. Patching: The render function calls patch, which leads to processComponent and then mountComponent for the initial render.
    4. Instance Initialization: mountComponent creates a component instance via createComponentInstance and initializes it using setupComponent.
    5. Effect Setup: setupRenderEffect creates the reactive effect that manages the component's updates and initial DOM insertion.
    // High-level flow
app = createApp(APP)
app.mount('#app')
  -> createVNode(APP)
  -> render(vnode, container)
    -> patch(null, vnode, container)
      -> processComponent(...)
        -> mountComponent(vnode, container, null)
          -> createComponentInstance(vnode, null)
          -> setupComponent(instance)
          -> setupRenderEffect(instance, vnode, container)

  5. Overview of the Vue 2 template compilation process

    Template compilation in Vue 2 is the process of transforming a user-written template into a JavaScript render function. This process is divided into three primary stages: parsing, optimization, and code generation.

  6. Overview of JavaScript Modularization Standards

    To solve global variable pollution and dependency chaos, several modularization standards emerged:

    • CommonJS: The first major modularization solution, adopted by Node.js to enable server-side JS development.
    • AMD (Asynchronous Module Definition): Designed to adapt CommonJS concepts to the browser environment.
    • CMD (Common Module Definition): An improvement over the AMD specification.
    • ES6 Modules: The official JavaScript language standard for modularization released in 2015, enabling the creation of large-scale applications.

  7. Introduction to Less CSS Preprocessor

    Less (Leaner Style Sheets) is a dynamic style language that extends CSS with features like variables, mixins, and functions to make styles more maintainable and extensible. It can run on the client side or on the server via Node.js. Common compilation tools include Koala and the Easy LESS extension for VS Code.

  8. Overview of Automatic Mixed Precision (AMP) in PyTorch

    Automatic Mixed Precision (AMP) allows a model to use FP16 (16-bit floating point) for computationally intensive operations (like convolutions and matrix multiplications) while maintaining FP32 (32-bit floating point) for precision-critical operations (like BatchNorm, softmax, and loss functions). This reduces memory footprint and leverages GPU Tensor Cores for faster training without requiring changes to the model architecture.

  9. Overview of the Promise A+ Specification

    Promise is a specification designed specifically for handling asynchronous scenarios. It aims to prevent 'callback hell' and make asynchronous code clearer, more concise, and unified. The original specification created by the frontend community is known as Promise A+.

  10. Overview of webpack module bundling

    webpack is a module bundler for modern JavaScript applications. It treats every file as a module and starts from a development-time entry module to analyze all dependency relationships. It then processes these dependencies (via compression and merging) to generate runtime files suitable for production deployment. It runs in a Node.js environment and supports various module standards, including CommonJS and ES6 Modules.

  11. Overview of the Vue.js template compilation process

    The Vue.js template compiler translates source code (templates) into target code (render functions). The process is divided into three main stages:

    1. Parser: Converts the template string into a Template AST.
    2. Transformer: Transforms the Template AST into a JavaScript AST (jsAST).
    3. Generator: Converts the jsAST into the final executable render function code.
    const templateAST = parse(template); // Parser
const jsAST = transform(templateAST); // Transformer
const code = generate(jsAST); // Generator

  12. Overview of Automated Hyperparameter Tuning with Optuna

    Optuna is used to automate the search for optimal hyperparameters (e.g., learning rate, batch size, scheduler type) to avoid manual trial-and-error. Instead of exhaustive Grid Search or blind Random Search, Optuna employs Bayesian optimization via the Tree-structured Parzen Estimator (TPE). TPE builds a probabilistic model based on previous trial results to sample hyperparameters from regions more likely to yield higher performance.