Huitoutunao Frontend Guides

website·Indexed 30 days ago

https://huitoutunao.com/

A collection of technical guides and notes focusing on frontend development. Topics include Vue 2 and Vue 3 source code analysis, JavaScript advanced concepts (currying, closures, V8 garbage collection), browser internals (Chrome architecture, HTTP, TCP), and practical tooling guides for NPM, NVM, Git, and Sass.

Tokens
60.8K
Snippets
263
Records
389
Agent score
47%

What's inside Huitoutunao

  1. Understand Vue 3 bundle size and tree-shaking optimizations

    Vue 3 significantly reduces bundle size (baseline compressed size is ~10KB, less than half of Vue 2) by moving global APIs and internal helpers to module.exports. This enables modern bundlers to perform static analysis and remove unused code (tree-shaking). The template compiler also only imports helpers for features actually used in the template.
  2. Understand the Git workflow and working areas

    Git manages code through four distinct areas:

    1. Workspace: The local directory where you develop and modify files.
    2. Index (Staging Area): A buffer where files are placed via git add to mark which changes will be included in the next commit.
    3. Repository (Local): The local database where commits are stored via git commit.
    4. Remote: A server (e.g., GitHub, GitLab) used to host code and synchronize changes from multiple local repositories via git push.

    Standard workflow: Workspace $\rightarrow$ Index $\rightarrow$ Local Repository $\rightarrow$ Remote Repository.

  3. Understand the behavior of the JavaScript new operator

    The new operator creates an instance of a user-defined object type or a built-in object that has a constructor function. Its behavior depends on the return value of the constructor:

    1. Standard Behavior: The resulting instance has access to properties defined within the constructor and methods defined on the constructor's prototype.
    2. Object Return: If the constructor explicitly returns an object, the new operator returns that object instead of the newly created instance.
    3. Primitive Return: If the constructor returns a primitive value (e.g., a string or number), the return value is ignored, and the new operator returns the newly created instance.
    // Case 1: Standard
    function Factory(name) { this.name = name; }
    Factory.prototype.sayHi = function() { console.log('Hi'); };
    var foo = new Factory('Jack'); // foo.name is 'Jack', foo.sayHi() works
    
    // Case 2: Returns Object
    function Factory(name) {
        this.name = name;
        return { job: 'developer' };
    }
    var foo = new Factory('Jack'); // foo.job is 'developer', foo.name is undefined
    
    // Case 3: Returns Primitive
    function Factory(name) {
        this.name = name;
        return 'hello';
    }
    var foo = new Factory('Jack'); // foo.name is 'Jack' (primitive return ignored)
  4. Understand the purpose of HTML semanticization

    Semantic HTML involves using tags that describe the meaning and role of the content they enclose, rather than just its appearance. This allows machines (browsers, search engines, and assistive technologies) to understand the structure and purpose of the data. Key benefits include:

    1. Structural Integrity: Maintains a clear page structure even if CSS styles fail to load.
    2. Accessibility: Enables screen readers and other assistive devices to render content meaningfully.
    3. Maintainability: Improves code readability for development teams.
    4. SEO: Helps search engine crawlers extract more effective information from the page.
  5. Understand how JavaScript stores primitive and reference types in memory

    JavaScript uses two different memory structures to store data based on the type of value:

    • Stack Memory: Used for primitive values (e.g., numbers, strings, booleans) because they occupy a fixed size of space.
    • Heap Memory: Used for reference types (objects, arrays, functions) because their size is dynamic and not fixed.
  6. Understand the purpose and structure of the HTML <meta> element

    The <meta> element provides metadata about an HTML document. Metadata is information about the document (such as descriptions, keywords, and author) rather than the actual content of the page. It is placed within the <head> section of the document and contains no content (it is a void element). Each <meta> tag defines a name/value pair associated with the document.
  7. Understand Partial Function Application in JavaScript

    Partial application is the process of fixing a number of arguments to a function, producing another function with a smaller arity (fewer parameters).

    Unlike Currying—which transforms an n-ary function into a chain of n unary functions—Partial Application transforms an n-ary function into an (n - x)-ary function by pre-filling x arguments.

  8. Evaluate the trade-offs of Chrome's multi-process model

    While the multi-process architecture increases stability and security, it introduces specific drawbacks:

    • Higher Resource Consumption: Each process requires its own memory overhead.
    • Increased Complexity: The system architecture is more complex to implement and maintain.

    Future Direction: Chrome is moving toward a Service-Oriented Architecture (SOA), where modules are refactored into independent services. These services run in separate processes and communicate via defined interfaces using Inter-Process Communication (IPC) to create a more decoupled and maintainable system.

  9. Understand AJAX core principles

    AJAX (Asynchronous JavaScript and XML) allows a web page to exchange data with a server and update parts of the page dynamically without requiring a full page reload. It works by using the XMLHttpRequest object to send asynchronous requests to a server, receiving data back, and then using JavaScript to manipulate the DOM to update the UI.
  10. Common use cases for viewport detection

    Detecting whether an element is in the visible area is commonly used for the following developer tasks:

    • Implementing infinite scrolling in lists.
    • Image lazy loading to improve page performance.
    • Preloading resources for links that are about to enter the viewport.
    • Calculating ad exposure/impression metrics.
  11. Compare Native, Web, and Hybrid mobile application architectures

    Mobile applications are categorized into three main technical stacks based on their development approach:

    1. Native Applications: Built using platform-specific languages (e.g., Swift for iOS, Kotlin/Java for Android). They offer the best performance and full access to system APIs (GPS, Camera, etc.) but require separate development teams for each platform and must be downloaded/updated via app stores.
    2. Web Applications: Websites accessed via a mobile browser. They require no installation and are easy to deploy, but have limited access to hardware APIs and lower performance compared to native apps.
    3. Hybrid Applications: A combination of both. A native 'container' (shell) hosts a web-based interface. This allows a single development team to target multiple platforms while still accessing native APIs through a bridge.