前端相关技术文章

php mysql shell go vue css api接口对接支付接口对接

localStorage 没有 5MB 保证：Web Storage 的隔离规则、配额失败与选型

localStorage 没有 5MB 保证：Web Storage 的隔离规则、配额失败与选型
2026-10-08 00:04:05
从前端常见的存储误用切入，讲清 Web Storage 的隔离规则（协议也参与）、配额不是固定 5MB 及各种失败表现，并给出 localStorage / sessionStorage / Cookie 的选型对照与能力探测、跨标签页同步代码。
WebStorage localStorage sessionStorage 浏览器存储前端浏览器端

Vue 3.6 Vapor 默认不再做事件委托：监听器直接绑元素，要委托得写 .delegate

Vue 3.6 Vapor 默认不再做事件委托：监听器直接绑元素，要委托得写 .delegate
2026-10-04 21:02:38
Vue 3.6 从 rc.2 起，Vapor 组件默认把 DOM 监听器直接绑到元素，不再做 document 级事件委托；需要委托得写 Vapor 专用的 .delegate 修饰符。本文讲清这一改动的取舍、对既有代码的影响，以及 Vapor 的 Opt-in 写法、Options API 不支持、createVaporApp 与 vaporInteropPlugin 的边界。
Vue 前端 Vapor 事件成本 3.6

Vue 3.6 RC 的 Vapor Mode：100% opt-in，不支持 Options API 和 Suspense

Vue 3.6 RC 的 Vapor Mode：100% opt-in，不支持 Options API 和 Suspense
2026-10-02 21:01:28
Vue 3.6 进入 RC，Vapor Mode 特性集完成：100% opt-in 的无 VDOM 编译模式，只支持 script setup/template SFC，不支持 Options API，Suspense 在纯 Vapor 下不可用。本文给出 opt-in 写法、createVaporApp 与 vaporInteropPlugin 的取舍，以及 alien-signals 重构带来的响应式收益。
Vue 前端 Vapor Mode 响应式性能优化 3.6

88 列 × 651 行卡死 4 秒：Vue 表格从 57288 个单元格砍到 880 个

88 列 × 651 行卡死 4 秒：Vue 表格从 57288 个单元格砍到 880 个
2026-10-01 21:31:03
一个 Vue 2 数据统计页加载卡死 4 秒、主线程阻塞 5.5 秒。用 Chrome Performance Trace 定位到 510 万次条件判断与 O(n×m) 嵌套遍历，分算法、数据、架构、渲染四层优化：动态属性替换硬编码判断、Web Worker 分离重计算、Object.freeze 跳过响应式、Element UI 树形表格懒加载，首屏从 57288 个单元格降到 880 个，并记录了 Web Worker 三大传输陷阱与 el-table lazy 的三条铁律。
Vue Element UI Web Worker 性能优化前端滚动定时器

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速

Tailwind CSS v4.2/v4.3 迁移：start-*/end-* 弃用改 inset-s-*，webpack 插件提速
2026-09-28 21:02:47
Tailwind CSS v4.2 与 v4.3 的迁移笔记：四套新调色板、官方 @tailwindcss/webpack 插件提速 2 倍、逻辑属性工具与 start-*/end-* 弃用改为 inset-s-*/inset-e-*，以及 v4.3 的 scrollbar、@container-size、zoom-* 等工具，附类名对照与兼容性说明。
Tailwind CSS 前端构建迁移 tail

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退

卡片在主栏和侧栏长得不一样：CSS 容器查询的用法与回退
2026-09-26 00:03:30
同一个卡片组件放进主栏和侧栏表现不一致，是因为媒体查询只看视口。这篇讲 CSS 容器查询（@container）的用法与约束：containment 如何短路无限循环、container-type size/inline-size 的副作用、cq 长度单位、样式查询、以及 94% 覆盖率下用 ResizeObserver + @supports 做回退，附 Vue 组件示例。
container queries CSS 容器查询前端响应式布局 Vue

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s

Vite 8.0 发布：Rolldown 成为唯一打包器，Linear 生产构建 46s 降到 6s
2026-09-25 21:02:18
Vite 8.0 把 esbuild+Rollup 双打包器统一为 Rust 写的 Rolldown，构建快 10-30 倍，Linear 生产构建从 46s 降到 6s。本文整理官方发布要点：插件兼容层、Node 20.19+/22.12+ 要求、安装体积增加约 15MB 的来源、plugin-react v6 去 Babel，以及大项目的两步渐进迁移路径。
Vite Rolldown 前端构建工具 Vue

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上

shallowRef、markRaw 与 Suspense：Vue 3 里哪些 API 只该用在边界上
2026-09-24 21:30:49
Vue 3 的浅层响应式与逃生舱 API 不是性能开关。本文按边界逐个说明 shallowRef、shallowReactive、readonly、toRaw、markRaw、customRef 的适用位置与坑，并给出 Teleport、异步组件、KeepAlive、Suspense 的取舍：Suspense 至今仍是实验性，性能和可维护性该以测量为准而非猜测。
Vue Vue3 响应式 Composition API 前端 RAW

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了

Vue 3.6 RC 里的 Vapor Mode：在现有 VDOM 应用里局部启用，哪些 API 用不了
2026-09-24 21:13:14
Vue 3.6 RC 的 Vapor Mode 编译期去掉 Virtual DOM，per-component 可选。讲清 <script setup vapor> 启用方式、createVaporApp 与 vaporInteropPlugin、VDOM 互操作的边界，以及 getCurrentInstance/v-memo/元素生命周期/全局属性等尚不支持的 API，附 3.6 的 alien-signals 响应式重构。
Vue 前端编译响应式 3.6

Vue3 响应式失效复盘：reactive 解构、数组整体替换与 watch/computed 的坑

Vue3 响应式失效复盘：reactive 解构、数组整体替换与 watch/computed 的坑
2026-09-23 21:02:57
响应式不更新多半不是 Vue 失效，而是撞上 Proxy 边界。文中梳理 reactive 解构丢响应、整体替换数组必须用 ref，computed 的惰性求值与禁止副作用（异步、改其他状态、访问 DOM），以及 watch 监听 reactive 时 oldValue===newValue、flush:'post' 取 DOM 等坑。
Vue 前端响应式排障惰性求值

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件

Vue Vapor 事件机制实测：@click.stop 在混用传统组件时拦不住事件
2026-09-23 20:01:47
基于 vue@3.6.0-alpha.2 实测 Vapor 模式的事件机制：可冒泡事件进入 document 级委托，非冒泡事件与组件事件仍按传统方式。重点记录 @click.stop 的陷阱——混用传统 Vue 组件或直接 addEventListener 时，stop 无法阻止事件，传统组件的 stop 甚至会破坏委托链。
Vue Vapor 事件委托前端 D3

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%

TypeScript 5.9：import defer 延迟模块求值，大项目编译快约 11%
2026-09-20 21:02:41
TypeScript 5.9 带来 import defer 延迟模块求值（只能整模块命名空间导入）、稳定的 --module node20、精简的 tsc --init 默认；编译器缓存 mapper 实例化、优化文件检查，大项目约提速 11%。另有 ArrayBuffer 不再是 TypedArray 超类型的行为变更。
TypeScript 前端 JavaScript 编译优化

Vue 3.6.0-rc.1 进入 RC：Vapor Mode 功能集完成，编译期不再生成 VNode

Vue 3.6.0-rc.1 进入 RC：Vapor Mode 功能集完成，编译期不再生成 VNode
2026-09-19 21:02:11
Vue 3.6.0-rc.1 进入 RC，Vapor Mode 功能集完成：编译器直接输出命令式 DOM 操作，不再生成 VNode。整理开启方式（script setup vapor / createVaporApp / vaporInteropPlugin）、不支持哪些 API，以及第三方基准的挂载与内存数据。
Vue Vapor Mode 前端 3.6 6.0

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装

Pinia 4.0 只做「技术上破坏性」变更：纯 ESM、删 CJS，devtools-api 要单独装
2026-09-18 21:06:57
Pinia 4.0.0（2026-07-14）只做技术性破坏变更：包改为纯 ESM、删除 CJS 入口、提高最低 TypeScript 版本，@vue/devtools-api 升级到 v8 并需与 pinia 一起安装；同时用 Nostics 重构错误与开发警告。本文列出版本支持状态与升级检查清单。
Vue Pinia 前端 ESM 升级 Pin

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals

Vue 3.6 进入 RC：Vapor Mode 特性完备，@vue/reactivity 换用 alien-signals
2026-09-13 21:03:37
Vue 3.6 进入 RC：Vapor Mode 特性完备、100% opt-in，用 script setup vapor 开启，不支持 Options API、Suspense 只能在 VDOM 侧包裹；@vue/reactivity 底层改为 alien-signals 重构，性能与内存占用提升。含适用场景与当前 rc 状态说明。
Vue Vapor Mode 前端响应式构建

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面

Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面
2026-09-12 09:55:55
Oil Motion 是 Agent 通用交互动画 Skill：先生成关键画面确认主体不漂移，再用 AI 视频填充中间过程，最后把视频转成帧序列映射到滚动、鼠标、拖动、触摸或设备方向；用户操作即时响应零延迟且每次结果一致，按场景自动选 WebP 图集/MP4/分片等资源格式，把 AI 创造力与程序确定性结合成主动响应的交互元素。
Oil Motion 交互动画 AI视频前端滚动动画

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件

garden-skills 开源：25 种风格配方告别 AI 味界面，给编程助手装上审美插件
2026-09-12 09:52:29
garden-skills 是 ConardLi 开源的四合一 Agent 技能集合：web-design-engineer 内置 Linear、Aesop、Bloomberg、Stripe Press 等 25 种风格配方与六步设计流程，web-video-presentation 一键把文章变 16:9 网页演示支持 TTS 配音，另有 gpt-image-2 图像提示词引擎与 kb-retriever 本地知识库检索；每个技能都是含文档、脚本、素材的工程化单元，支持六大平台安装。
garden-skills AI设计技能集合 Claude Code 前端动效同质化

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美

awesome-design-md：50+ 顶级品牌设计系统写成 Markdown，AI 写 UI 直接照抄大厂审美
2026-09-12 09:50:28
awesome-design-md 由 VoltAgent 团队开源：基于 Google Stitch 提出的 DESIGN.md 概念，把 Claude、Apple、Spotify、Linear、Stripe 等 50+ 顶级品牌的视觉 DNA 反向工程成现成 Markdown 设计系统文档，丢进项目根目录即可让 AI 编码代理生成一致、高级的 UI，零安装复制即用。
awesome-design-md DESIGN.md AI UI 设计系统前端

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑

Vue 3.6 Vapor Mode 进入 RC：给 script setup 加个 vapor 属性，哪些代码会踩坑
2026-09-10 21:02:41
Vue 3.6 的 Vapor Mode 进入 RC，给 script setup 加 vapor 属性即可开启。本文讲清 createVaporApp 与 vaporInteropPlugin 两条路线的包体差异、哪些依赖 VNode 与公共实例代理的代码会不可用，并给出现阶段的适用场景与迁移注意点。
Vue 前端性能 VaporMode

React 19.3.0 版本解读：ViewTransition 动画、Fragment Refs 与 browser() 新 API

React 19.3.0 版本解读：ViewTransition 动画、Fragment Refs 与 browser() 新 API
2026-09-10 12:17:35
React 19.3.0（2026-09-09）发布：新增 ViewTransition 组件与 addTransitionType API 支持视图过渡动画、Fragment Refs、服务端友好的 browser() 与 onBrowserBailout，Transitions 独立渲染互不阻塞，并默认集成 Trusted Types。
React 前端 ViewTransition Fragment Refs browser()

JS 只做增强层：让 AI 爬虫看懂页面必备内容

JS 只做增强层：让 AI 爬虫看懂页面必备内容
2026-09-08 05:08:51
AI 爬虫不一定执行 JS：必备内容只活在脚本之后，页面可能难以匹配用户问题、署名也难发生；把必要内容与交互增强分开处理。
AI SEO 前端教程定价

全站每个 URL 都返回同样的 3,780 字节，Google 信了

全站每个 URL 都返回同样的 3,780 字节，Google 信了
2026-09-08 05:08:47
CSR 站点所有 URL 渲染前字节相同被 Google 当重复内容：渲染是有预算的队列；post-build 注入真 head，小心 react-helmet-async 的 data-rh 陷阱。
SEO React 前端实践

React 站点提速：先把图片修好

React 站点提速：先把图片修好
2026-09-08 04:10:36
图片常吃掉页面大半重量：按断点裁剪、WebP/AVIF 格式、懒加载一个属性，但 LCP 主视觉要预加载；四条规则立竿见影。
React 性能前端教程缩略图

Vue 3.6 升级笔记：Vapor 按需启用，事件委托默认直挂元素

Vue 3.6 升级笔记：Vapor 按需启用，事件委托默认直挂元素
2026-09-07 21:07:42
Vue 3.6（2026-07-18 正式发布）前端升级笔记：Vapor Mode 100% opt-in、跳过 VDOM 直操作真实 DOM，依赖 VNode/公共实例 proxy 的功能不可用；rc.2 起 Vapor 事件委托默认直挂元素而非委托 document（.delegate 修饰符 opt-in、compilerOptions.eventDelegation 已移除）；@vue/reactivity 迁移到 alien-signals，建议回归 computed/watch；附 Vite 8/Rolldown 相关链接。
Vue 前端 Vapor Vite

大家都在搜索什么？

devops 易支付一个官网+多少钱统一接受回调统一回调 python sub node 宝塔日志 mysql shell ElasticSearch css vue api接口对接 2025 支付接口对接 go php php回调