DOCSEARCHbyAlgolia
Submit Docs

npqjz Technical Interview and Study Notes

website·Indexed 30 days ago

https://npqjz.github.io/

A collection of technical interview questions and study notes covering frontend frameworks (React, Vue), computer networking (HTTP, HTTPS, TCP, CORS, WebSocket), and JavaScript fundamentals. Includes hand-written implementations of async/await and instanceof, as well as discussions on React 19, Vue reactivity, and Nginx load balancing.

Tokens
61.1K
Snippets
165
Records
349
Agent score
74%

What's inside npqjz Docs

  1. Overview of common network protocols by layer

    Network protocols are categorized by their layer in the network stack:

    Application Layer:

    • HTTP/HTTPS: Web data transfer (HTTPS adds SSL/TLS encryption).
    • FTP: File upload/download.
    • SMTP/POP3/IMAP: Email sending and retrieval.
    • WebSocket: Full-duplex real-time communication.

    Transport Layer:

    • TCP: Connection-oriented, reliable transmission (e.g., web browsing).
    • UDP: Connectionless, low-latency, unreliable transmission (e.g., video streaming, gaming).

    Network Layer:

    • IP (IPv4/IPv6): Routing and unique device identification.
    • ICMP: Network diagnostics (e.g., Ping).
    • ARP/RARP: Mapping between IP and MAC addresses.

    Data Link Layer:

    • Ethernet: LAN physical connection and frame structure.
    • PPP: Point-to-point link communication.

    Security & Management:

    • SSL/TLS: Encryption for HTTPS.
    • IPSec: Network layer encryption for VPNs.
    • Kerberos: Symmetric key authentication.
    • SNMP: Network device monitoring.
    • SSH: Encrypted remote login (replaces Telnet).

    File Sharing:

    • SMB: Windows file sharing.
    • NFS: Distributed file system access.

  2. Overview of Computer Hardware Evolution

    Computer hardware has evolved through four distinct generations, characterized by the transition from vacuum tubes to ultra-large-scale integrated circuits, resulting in massive increases in processing speed and memory capacity.
    GenerationTimeLogic ComponentSpeedMemoryExternal Storage
    1st1946-1957Vacuum TubesThousands-Tens of ThousandsMercury delay lines, Magnetic drumsPunched tape, Paper tape
    2nd1958-1964TransistorsTens of Thousands-Hundreds of ThousandsMagnetic core memoryMagnetic tape
    3rd1964-1971Small/Medium Scale Integrated CircuitsHundreds of Thousands-MillionsSemiconductor memoryMagnetic tape, Disks
    4th1972-PresentLarge/Ultra-Large Scale Integrated CircuitsTens of Millions-TrillionsSemiconductor memoryDisks, Magnetic tape, Optical discs, Semiconductor memory

  3. Overview of QUIC protocol in HTTP/3

    QUIC is a UDP-based transport layer protocol developed by Google and standardized by IETF to reduce latency and improve performance over TCP.

    Key Features:

    • Connectionless Transport: Uses UDP instead of TCP's connection-oriented approach for more flexible stream management.
    • Multiplexing: Supports concurrent data streams on a single connection to prevent Head-of-Line (HOL) blocking.
    • Built-in Encryption: Integrates TLS directly into the transport process, removing separate handshake steps.
    • 0-RTT Data Transfer: Allows data transmission to begin immediately during connection establishment in certain scenarios, reducing latency.

  4. Overview of the TCP/IP 4-Layer Model

    The TCP/IP protocol suite is organized into four layers:

    1. Application Layer: Handles high-level communication between applications (e.g., SMTP, FTP, Telnet).
    2. Transport Layer: Provides end-to-end data transfer, formatting, acknowledgment, and retransmission (e.g., TCP, UDP).
    3. Network Layer: Responsible for packet routing and delivery to the destination host without verifying receipt (e.g., IP).
    4. Data Link Layer: Manages physical network media and frames, converting IP datagrams into physical signals (e.g., Ethernet, Serial Line).

  5. Understand why certain React lifecycle methods were deprecated

    The lifecycle methods componentWillMount, componentWillReceiveProps, and componentWillUpdate were deprecated because they execute during the render phase. With the introduction of the Fiber architecture, the render phase can be interrupted and restarted, meaning these methods might be called multiple times. If these methods contain side effects (like network requests), it can lead to duplicate executions. React introduced the static method getDerivedStateFromProps as a replacement to force developers to perform only pure, side-effect-free operations before rendering.

  6. Understand Object Storage Service (OSS) core concepts

    Object Storage Service (OSS) is a cloud storage solution providing a RESTful API for storing and accessing arbitrary data types. Key components include:

    • Bucket: The container for objects. It is configured with a region, access permissions, and storage type.
    • Object: The basic unit of data, consisting of a unique Key (filename), metadata, and the actual user data.
    • Region: The physical location of the data center.
    • Endpoint: The access domain name used to reach the OSS service, which varies by region and access method.
    • AccessKey: Consists of an AccessKey ID (for identification) and an AccessKey Secret (for encryption and signature verification).
    • Storage Types: OSS offers four tiers to balance cost and access frequency: Standard, Low-Frequency Access (LIA), Archive, and Cold Archive.

  7. Compare useRef, ref, and forwardRef in React

    React provides different ways to access DOM nodes or component instances:

    1. useRef: A Hook used in functional components to create a mutable ref object. Its .current property persists across renders.
    2. ref: A general concept used in class components (via React.createRef()) or passed to elements to identify a DOM node.
    3. forwardRef: A utility that allows a functional component to take a ref it receives from its parent and 'forward' it to a child DOM element or another component.
    import React, { useRef, useEffect, forwardRef } from 'react';

// Example of forwardRef
const MyInput = forwardRef((props, ref) => <input ref={ref} {...props} />);

function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return <MyInput ref={inputRef} />;
}

  8. Understand Vue 3 Reactivity Design

    Vue 3 implements its reactivity system using the Proxy and Reflect APIs to automatically track and update data changes. The core components include:

    • Proxy: Intercepts object read (get) and write (set) operations to track dependencies.
    • Reflect: Used within Proxy traps to perform the original object operations flexibly.
    • activeEffect: A global variable that tracks the currently executing effect function for dependency collection.
    • ref: A utility that converts primitive values into reactive objects accessible via the .value property.

  9. Distinguish between $route and $router in Vue Router

    In Vue Router, $route and $router serve two distinct purposes:

    1. $route: An object containing information about the current route, such as the path, parameters, query strings, and route name. Use this to access the state of the current page.
    2. $router: The router instance that provides navigation methods to control the routing behavior, such as moving to a different URL or replacing the current history entry.
    // Using $route to access current route info
console.log(this.$route.path);    // Current path
console.log(this.$route.params);  // Route parameters
console.log(this.$route.query);   // Query string

// Using $router for programmatic navigation
this.$router.push('/new-path');     // Navigate to new path
this.$router.replace('/another-path'); // Replace current path

  10. Understand the difference between Forward Proxy and Reverse Proxy

    Proxies act as intermediaries between clients and servers but operate in different directions:

    Forward Proxy: Sits between the client and the original server. The client sends requests to the proxy, which forwards them to the target server.

    • The client knows the target server.
    • The target server only sees the proxy's IP, not the client's.
    • Use cases: Bypassing restricted resources, caching, hiding user identity, and monitoring user behavior.

    Reverse Proxy: Sits in front of a server cluster, hiding the backend details from the client.

    • The client is unaware that a proxy exists.
    • Use cases: Load balancing across multiple backend servers and protecting internal network security by acting as the public gateway.

  11. Understand the benefits of React Fiber architecture

    The Fiber architecture was introduced to replace the old Reconciler to solve performance bottlenecks in large applications. Key improvements include:

    • Incremental Rendering: Breaks rendering work into small units that can be executed in batches, preventing the UI from freezing.
    • Interruptibility and Priority: Allows React to pause low-priority rendering tasks to handle high-priority user interactions (e.g., typing, animations) and resume them later.
    • Task Scheduling: Uses a Scheduler to manage updates based on priority.
    • Error Handling: Enables localized error handling during the rendering process to ensure partial UI recovery.
    • Transaction Management: Decomposes rendering into independent transactions for better control over complex operations.

  12. Access form status with useFormStatus in React 19

    The useFormStatus hook (from react-dom) allows child components within a <form> to access information about the form's submission status (such as pending) without needing to pass props down manually.
    import { useFormStatus } from 'react-dom'

function DesignButton() {
  const { pending } = useFormStatus()
  return <button type="submit" disabled={pending} />
}