高性能Javascript

很多 JavaScript 开发者第一次接触 setTimeout(fn, 0) 时，都会产生这样的疑问： 更让人困惑的是，把它放在某些异步场景中，它执行得“似乎又慢了一拍”。如果你曾尝试用 setT

在日常开发中，我们经常需要让元素的宽度根据内容变化而产生动画效果，例如按钮文字变长、提示框内容更新等。你可能第一反应是加个 transition: width 0.3s，看起来的确能动。但细节打脸的时

现代 Web UI 越来越强调流畅、连贯的用户体验。然而传统的 DOM 操作导致内容切换生硬，缺乏过渡动画。为此，Chrome 团队提出了一项划时代的标准草案 —— View Transitions

这篇文章深入讲解浏览器内部在预加载（Preload Scanner）阶段是如何通过一个轻量级的词法分析器（Lexer） ，以超快速度提取 <link>、<script>、<img> 等关键资源标签，从

在构建现代 Web 应用时，WebAssembly（Wasm）已成为性能关键路径上的“加速器”。但与此同时，Wasm 模块往往体积不小，如果直接随页面加载，很容易拖慢首屏速度，破坏用户体验。 于是一个

在浏览器中做高性能图像处理，很多开发者的第一反应是：“这不是前端能干的事。”然而，随着 WebAssembly（Wasm）+ 多线程的支持逐步成熟，我们终于有了打破传统 JS 单线程天花板的钥匙。 本

WebAssembly（Wasm）带来了前端性能的一次跃迁，允许我们在浏览器中运行接近原生速度的 C/C++/Rust 代码。但如果你是一位 Vue、React、或者 Vite 用户，真正将 Wasm

在学习 WebAssembly（简称 Wasm）的过程中，有一个绕不开的核心概念就是 线性内存（Linear Memory） 。它是 Wasm 与 JavaScript 交互数据的桥梁，也是模块间通信

WeakRef 与 FinalizationRegistry 是 JavaScript 中用于与垃圾回收器（GC）协同工作的两个高级 API，它们不干预 GC 行为，但允许我们在 GC 发生之后获取“

引言 如果你曾在浏览器中使用 Web Worker 或 Node.js 的 Worker Thread 编写多线程代码，那么你一定遇到过这两个概念： ArrayBuffer SharedArrayBu

CSS Houdini Paint API 的位图合成原理，乍看之下像是前端领域的黑科技，其实背后是一套高度工程化的绘图接口与浏览器渲染系统的深度融合。它不是另起炉灶，而是嵌入浏览器的图形渲染流水线之

跨窗口通信的九重天劫：从postMessage到BroadcastChannel 第一重：postMessage 基础劫 —— 安全与效率的平衡术 安全守则： 始终验证origin属性 敏感数据使用J

在现代前端开发中，脚本加载和执行的顺序对于页面性能和用户体验至关重要。为了优化网页加载速度，前端开发者通常会使用各种属性来控制 JavaScript 脚本的加载时机和执行顺序。两个常见的属性是 def

CSS Paint API 是 CSS Houdini 系列的重要组成部分，它让开发者可以通过 JavaScript 动态生成图像，并将其作为 CSS 样式属性的一部分应用到网页中。这一功能为前端开发

JavaScript 中的 try-catch-finally 是处理异常和确保资源释放的重要机制。然而，finally 块的一个特殊行为可能让许多开发者感到意外——它可以覆盖 try 和 catch

在 JavaScript 的模块化开发中，export default 和 export { XXX as default } 是两种常见的导出方式，但它们之间的区别常常让开发者感到疑惑。本文将从语法

WebAssembly：将浏览器带入高性能时代 想象一下，你能在浏览器中直接运行类似于C、C++这类传统需要本地环境支持的高性能代码，而不需要担心兼容性和性能问题。这听起来很不可思议，但WebAsse

手写 Proxy API：从基础到实战 JavaScript 中的 Proxy 是一个强大的特性，允许我们定义对象的行为，通过拦截和自定义对象的基本操作，如读取属性、赋值、调用函数等。它是 ES6 引