分类 #基础原理共 6 篇文章

• 浏览器线程模型：深入理解 Web Worker 的设计与实践

  从浏览器线程模型到并发架构：深入理解 Web Worker 的设计与实践 本文从浏览器运行模型出发，逐步分析 Web Worker 的设计背景与工程实践，重点放在“并发能力”这一维度，而非简单的性能优化手段。 --- 一、浏览器线程模型：对“单线程”的再认识 在前端语境中，“JavaScript 是单线程的”是一种常见描述，但这一表述只覆盖了部分事实。 下面是便于理解的浏览器线程结构示意，实际实现...

  #基础原理#项目经验#多线程#Web Worker

  2026/4/14 15:17:58

• 走进Canvas世界：实现优化

  Canvas 最近被问到一些 Canvas 相关问题，于是重新梳理了这部分内容。 概念 Canvas ≠ DOM，它是“像素画布”，Canvas 本质是：一块内存中的 Bitmap（位图缓冲区） 我们每次调用 不是在“创建一个矩形对象”，而是直接修改这一块像素数据。 对比浏览器渲染模型 关键区别： DOM / SVG：保留模型（Retained Mode） Canvas：立即模式（Immediat...

  #基础原理#项目经验#canvas

  2026/4/14 06:28:49

• 温故知新：再次走进浏览器 | 渲染 性能优化 动画 缓存 跨域 代理...

  渲染 浏览器渲染本质上是一个多线程协作 + 渲染管线优化 + 性能权衡的问题，不是简单的流程问题。 解析阶段（Parse） HTML → DOM（主线程） CSS → CSSOM（主线程） JS 会阻塞解析 浏览器为了提升性能，会做预加载扫描（preload scanner），提前下载资源。 构建 Render Tree DOM + CSSOM → Render Tree 不包含 display:...

  #基础原理#性能与优化#性能优化#浏览器#渲染

  2025/10/25 10:55:00

• 温故知新：Event Loop: 宏任务/微任务解释 setTimeout/Promise/async/await执行顺序

  Event Loop 三条核心规则 1️⃣ JS 先执行当前宏任务中的所有同步代码（Call Stack 清空） Call Stack:「当前正在执行的函数」的一块栈结构, 执行入栈，执行完出栈。 2️⃣ 当前宏任务执行结束后，立刻清空微任务队列（包括微任务中新增的微任务） 宏任务执行结束 ≠ 宏任务里产生的微任务执行完 常见情况下，当前任务结束后会执行微任务检查点；浏览器规范还规定了其他检查点，...

  #基础原理#Js#ts#宏任务#微任务#事件循环

  2025/9/29 23:56:00

• 温故知新：闭包与作用域（应用场景 ，内存泄漏规避）、以let/const 的块级作用域与“提升”差异

  闭包与作用域 作用域是什么 作用域就是变量可被访问的范围。 JS 主要有： 全局作用域 函数作用域（function） 块级作用域（{}：由 let/const 引入） JS 查找变量遵循词法作用域（lexical scope）： 在哪里写的代码，就决定它能访问哪些外层变量（与怎么调用无关）。 闭包是什么 闭包可以理解为函数与其创建时的词法环境之间的关联： 函数 + 它创建时所在的词法环境（外层变...

  #基础原理#性能与优化#Js#闭包#作用域#内存泄漏

  2025/9/1 01:57:00

• 温故知新：网络世界

  基本 网络可以理解为是从浏览器到服务端的一整条请求链路，包括 DNS、连接建立、数据传输、网关转发以及服务内部调用。 整个过程可以分为几个阶段： DNS 解析，把域名解析为 IP 建立连接（例如 HTTPS over TCP 的 TCP 与 TLS 握手；HTTP/3 使用 QUIC） 发送 HTTP 请求 请求经过 CDN / Nginx / 网关转发 后端服务处理（可能涉及微服务调用、数据库、...

  #基础原理#网络#HTTP#TCP/IP#CDN#WebSocket

  2025/8/30 01:35:00