全部文章
共 1306 篇文章
SVGA动画格式详解
一、什么是 SVGA？ SVGA（Scalable Vector Graphics Animation） 是一种专为移动端设计的 轻量级动画文件格式 ，由中国的 YY 语音团队（现欢聚集团） 在早期移动端直播应用中开发。 它的目标是： 在移动设备上实现接近 AE（After Effects） 动画的效果，同时具备极小的文件体积与极高的渲染性能。 与常见的 GIF、Lottie（JSON） 相比，SVGA 主要用于 直播、互动类动画特效...
理解浏览器事件系统,从用户点击到事件对象的完整旅程
深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象 作为前端开发者，我们每天都在写这样的代码： 这段代码如此熟悉，以至于我们很少停下来思考： 这个 对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？ 更神奇的是，当我们手动创建事件时：...
LocalStorage、Cookie、IndexedDB 同步与异步机制对比
一、LocalStorage —— 同步 特性 LocalStorage 的 API 是同步的。调用 、 、 、 会立即执行并阻塞主线程。 示例 备注 少量读写通常很快；在大量循环写入场景中可能导致 UI 卡顿。 二、Cookie —— 同步 特性 通过 读写是同步的，操作会立即生效。 示例 备注 Cookie 的读写是同步的；但它随 HTTP 请求发送到服务器的过程属于网络传输，不阻塞当前 JS 执行。 三、IndexedDB ——...
frp-内网穿透详解
1\. 简介与工作原理 frp（Fast Reverse Proxy）是一个高性能的反向代理 / 内网穿透工具。典型部署模式： 在 公网 VPS 上运行 （服务端），监听来自 的 出站持久连接 （控制端口，通常 7000）。 在 内网机器 上运行 （客户端），与 frps 建立长连接并注册若干映射（如 tcp/http）。 当外部请求到达 frps（公网），frps 根据路由规则把流量转发回对应的 frpc 连接，再由 frpc 转发到...
Nuxt 中 process.client 与 import.meta.client 的区别
一、来源与定义 | 对比项 | process.client | import.meta.client | | | | | | 来源 | Nuxt 内置的运行时变量（兼容 Node 风格） | Vite 原生 ESM 构建标志 | | 定义位置 | Nuxt 在构建阶段自动注入到全局 | Vite 在编译阶段静态替换 | | 作用机制 | 运行时判断变量 | 构建时编译宏（静态替换） | | 语法类型 | CommonJS 风格 | E...
Nuxt SSR 与 Next.js SSR
🧭 引言 在现代前端生态中， Nuxt（Vue） 与 Next.js（React） 是最成熟的两大全栈框架。 它们都具备 SSR（Server Side Rendering） 能力，但实现原理与运行机制差异巨大。 如果你在使用 Nuxt 构建 SSR 项目，却发现“路由跳转后不再 SSR”， 而在 Next.js 中同样操作却会重新发起服务端渲染——这不是 bug，而是 理念差异 。 本文将详细对比这两种框架的 SSR 行为，帮助你彻...
shallowRef 与 ref 的区别、场景与坑位
结论先行： 会 深度 地把你放进去的对象转成响应式（递归代理），因此"对象内部的改动"也会触发视图更新。 只在 顶层 做依赖追踪： 更换 才触发更新 ；若你只是"在原对象上改属性"，不会触发，除非手动 。 1\. 快速对比 维度 追踪粒度 深度（递归） 仅顶层 对象内部属性变更 会触发更新 不会 触发（除非 或重新赋值） 性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例（图表...
Hook 的设计意义与实践
🧩 一、Hook 的本质是什么？ Hook 是一种可复用逻辑的抽象方式。 它的核心思想是： 把「逻辑」从「组件渲染结构」中抽离出来，使逻辑能被复用、独立测试、灵活组合。 示例 组件中使用： ✅ 组件不再关心逻辑的实现，只关心如何展示。 ⚙️ 二、为什么要设计 Hook？ 1️⃣ 逻辑复用 传统做法（如 mixin）的问题： 数据来源不清晰（变量名可能冲突） 生命周期混乱（难以追踪依赖） 不利于类型推导 Hook 则通过 函数闭包 +...
Vue 3 中的 setup执行时机与异步逻辑详解
Vue 3 中的 执行时机与异步逻辑详解 本文详细介绍 Vue 3 组合式 API 的核心函数 ：它在组件生命周期中的执行时机、异步行为（ 的影响）、常见用法和最佳实践。 一、 的执行时机 是 Vue 3 组件实例创建后、渲染前执行的函数。 它相当于 Vue 2 中的 和 的合体。 执行流程： 也就是说： 所有响应式数据（ 、 、 ）都在这里定义； 所有生命周期钩子（ 、 等）都在这里注册； 模板渲染会等待 执行完成（或异步返回的 Pr...