charmson

先理解基础概念 前端图形渲染可以理解为：在浏览器里用代码生成高性能视觉内容。 简单的可以是 2D 动画、图片特效。复杂的可以是 3D 产品展示、地图可视化、数字孪生和浏览器...

概念介绍 WebGL 的渲染管线是 GPU 把"数据"变成"屏幕上的画面"的完整流程。理解它是学习 WebGL 的基础，因为你写的每一行代码，都是在管线的某个阶段发挥作用。...

一、整体架构 二、前端采集（web-vitals SDK） 2.1 只采集核心 Web Vitals 指标 含义 类型建议 LCP 最大内容绘制 Histogram（分位数...

一、错误监控与上报 1. 错误类型覆盖 错误类型 捕获方式 JS 运行时错误 window.onerror / window.addEventListener('error...

一、加载性能优化 1. 减少资源体积 代码压缩（Minify） ：压缩 HTML / CSS / JS，移除空白、注释 Tree Shaking：利用 ES Module ...

React Scheduler 为什么使用 MessageChannel 呢？为什么不使用 setTimeout 或 requestAnimationFrame 实现呢？...

一、本质是什么？ Unix Domain Socket（UDS）和 Named Pipe（命名管道）都是操作系统内核提供的 本机 IPC 机制，核心思想是： 与 TCP S...

1. child_process 内置 IPC 通道 使用 fork() 创建子进程时，父子进程之间会建立一条专用 IPC 通道，通过 process.send() / p...

一、核心概念与关系 二、各类型速查 类型 可变？ 直接读写？ 用途 ArrayBuffer 否（需视图） ❌ 原始内存容器 TypedArray ✅ ✅ 数值型数组操作 D...

一、整体架构 qiankun 提供了三种 JS 沙箱，Proxy 相关的有两种： 类型 类名 模式 隔离强度 说明 SandBoxType.Proxy ProxySandb...

1. 浏览器渲染流水线概览 浏览器每帧的渲染遵循以下流水线（Pixel Pipeline）： 阶段 说明 JavaScript 执行 JS，触发视觉变化（DOM 操作、样式...

本文档基于 Google web-vitals 库源码，详细分析 CLS、FCP、INP、LCP、TTFB 五个核心指标的数据采集原理与实现细节。 目录 通用基础架构 CL...

一、整体架构 browserTracingIntegration 本质上是一个插件容器，它在 afterAllSetup 钩子被调用时（即 Sentry Client 完全...

一、缓存的两大类型 HTTP 缓存分为两种：强缓存 和 协商缓存。 类型 是否请求服务器 返回状态码 控制字段 强缓存 ❌ 不请求 200 (from cache) Cac...

1. 宏观进程架构 浏览器（以 Chrome 为例）—— 多进程架构 Browser 进程（主进程）：负责地址栏、书签、前进/后退，以及网络请求、文件访问等特权操作 Ren...

一、全局视角：谁在管理任务？ 先建立整体认知——任务调度涉及两个不同的系统： 核心分工： V8：维护调用栈 + 微任务队列，负责执行 JS 代码 宿主环境：维护宏任务队列 ...

一、V8 引擎的基本架构 V8 是 Google 开发的开源 JavaScript 引擎，用于 Chrome 和 Node.js 中。 二、微任务队列：V8 源码视角 2....

什么是 HMR？ HMR（Hot Module Replacement，热模块替换）是一种在应用运行时替换、添加或删除模块的技术，无需完整刷新页面，从而保留应用状态并极大提...

为什么前端工程师需要理解这个？ 你写的每一行 fetch()、每一个 WebSocket 连接、每一次 Node.js 的文件读取，背后都在依赖同一套机制。 从 V8 / ...

浏览器加载 ESM 分三阶段，import 静态分析依赖，import() 运行时按需加载，导出为内存引用；Webpack 将模块编译为缓存函数，异步加载通过动态 <scr...