全部文章
共 1299 篇文章
📌 Vue Skeletor 要点
用途 ：提供自适应的骨架屏加载组件，自动匹配现有组件的排版和样式，无需手动绘制方块或圆形。 安装 ： 使用方式 ： 局部注册 ：在组件中 并注册。 全局注册 ：在 中 。 插件模式 ：可通过 全局配置，关闭闪烁动画。 提供 组合式 API，可在运行时修改全局配置。 属性支持 ： / ：支持数值或 CSS 字符串。设置 时骨架变为矩形。 ：同时设置宽高，方便生成方形或圆形。 ：布尔值，生成圆形骨架。 ：布尔值，生成圆角矩形，适合按钮或芯片...
keyframes 关键帧机制
一、什么是 @keyframes？ 用于定义动画在不同时间点（关键帧）的样式变化；配合 属性应用到元素上。 定义动画 ：使用 声明关键帧序列； 应用动画 ：在选择器中通过 / 相关长属性控制表现。 二、基本语法 等价写法（ / ）： 三、与 属性配合使用 /相关长属性 | 属性名 | 含义 | 示例值 | | : | : | : | | | 动画名称 | | | | 持续时长 | 、 | | | 速度曲线 | / / / | | | 延...
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\. 快速对比 维度 追踪粒度 深度（递归） 仅顶层 对象内部属性变更 会触发更新 不会 触发（除非 或重新赋值） 性能 有递归 & 依赖跟踪开销 更轻量，适合大对象/第三方实例 适用对象 普通标量、普通对象、数组 第三方实例（图表...