Ariel's Blog

简单是可靠的前提

发表于 分类于 本文字数： 897 阅读时长 ≈ 3 分钟

组件拆分原则（原子设计思想进阶）

原子级组件

  • 基础 UI 元素：按钮、输入框、图标等
  • 特点：无状态或简单状态，零业务逻辑
  • 示例：<Button>、<Input>

分子级组件

  • 原子组件的组合：搜索框 = 输入框 + 按钮
  • 特点：封装简单交互逻辑，可复用
  • 示例：<SearchBar onSearch={callback}>
阅读全文 »

发表于 分类于 本文字数： 1.1k 阅读时长 ≈ 4 分钟

模块模式

  • 核心：封装私有变量和方法，仅暴露公共接口。
  • 实现：利用闭包（IIFE）或 ES6 模块化。
  • 场景：
    • 封装工具库（如 utils.js）。
    • 避免全局命名污染。
// ES6 模块
export const publicMethod = () => {
  const privateVar = "私有数据";
  return privateVar;
};
阅读全文 »

发表于 更新于 分类于 ， 本文字数： 23k 阅读时长 ≈ 1:24

第一部分：基础知识与核心概念（查漏补缺）

Vue 核心概念

问题： 请简述 Vue.js 的核心特点是什么？（例如：响应式数据绑定、组件系统、虚拟 DOM、模板语法等）

阅读全文 »

发表于 更新于 分类于 本文字数： 849 阅读时长 ≈ 3 分钟

@hz/layout + @hz/node-server技术架构

微前端架构图及核心流程解析

graph TD
    subgraph 配置管理系统
        M[菜单配置系统] -->|存储| MenuData
        P[代理配置系统] -->|存储| ProxyRules
    end

    subgraph 基础服务层
        Layout{{"@hz/layout"}}
        NodeServer{{"@hz/node-server"}}
    end

    subgraph 微应用A
        A1[子应用A - 端口11127]
        A2[React Router配置]
        A3[业务模块a/b/c]
    end

    subgraph 微应用B
        B1[子应用B - 端口9090]
        B2[React Router配置]
        B3[业务模块d/e]
    end

    User[用户浏览器] -->|请求| NodeServer
    NodeServer -->|读取| ProxyRules
    Layout -->|读取| MenuData

    %% 独立运行流程
    A1 -->|运行时加载| Layout
    B1 -->|运行时加载| Layout
    Layout -->|过滤菜单| A2
    Layout -->|过滤菜单| B2

    %% 代理转发流程
    NodeServer -->|路由匹配| ProxyRules
    ProxyRules -->|/deviceManage → 9090| B1
    ProxyRules -->|/appAPath → 11127| A1

    %% 菜单处理流程
    MenuData -->|全量菜单数据| Layout
    A2 -->|仅保留a/b/c| A3
    B2 -->|仅保留d/e| B3

    %% 集成部署
    Gateway[统一网关] --> NodeServer
    CDN[静态资源CDN] --> User
阅读全文 »

发表于 更新于 分类于 本文字数： 22k 阅读时长 ≈ 1:22

第一题：架构设计（结合@hz/node-server项目）

Q：您将单实例QPS从1200提升至6500的核心手段是「流式代理+cluster集群」，流式代理如何解决高并发下的内存瓶颈？请对比描述传统缓冲模式（buffer）与流式处理（stream）的内存差异

A：

流式代理 vs 传统缓冲模式的内存差异：

  • 内存占用高：高并发场景下，传统缓冲模式（Buffer）会先将完整请求/响应体加载到内存再处理，当并发量高或传输大文件时，内存消耗迅速攀升，可能触发频繁的垃圾回收（GC），增加延迟，还易导致内存溢出（OOM）。我们的服务单实例曾出现内存增长400MB+的问题。
  • 阻塞事件循环：传统缓冲模式的大内存分配和复制操作（如拼接Buffer）会阻塞事件循环，降低整体吞吐量。
  • 内存占用低：流式处理将数据分割成小块（chunks），每收到一块就立即处理并释放内存。内存中同一时间只保留一小部分数据（例如几KB到几十KB），因此：内存占用量基本恒定，与并发量、数据大小无关，可以避免大内存分配，减轻GC压力
  • 低延迟处理：流式处理方案中数据接收和处理并行化
  • 背压（Backpressure）控制：流式处理通过管道（pipe）自动管理数据流速（默认 16kb 缓冲区）。当处理速度跟不上接收速度时，会自动通知上游暂停发送数据，避免内存爆增
  • 即使同样使用堆外内存，Stream 通过 分块处理 + 背压控制 + 零复制机制 实现常数级内存占用（O(1)），而 Buffer 模式是线性增长（O(n)），这才是高并发性能差异的本质原因。

解决思路：

  • 采用流式处理（Stream）将数据分割为数据块（chunk） 逐段处理，配合背压机制控制处理速度。
阅读全文 »
0%