前端技术文章
-
- 浏览器 Cookie Store API 怎么监听登录态变化：change 事件、页面刷新与降级处理
- 页面登录态变化后，多个组件经常要各自轮询 Cookie 或等待下一次刷新。Cookie Store API 提供异步读取和 change 事件，可以把登录失效、退出登录与界面刷新串成一条可复查的链路；本文同时说明 HTTPS、替换同名 Cookie 和旧浏览器降级边界。
- 文章 · 前端 | 3天前 | 前端 · javascript · 登录态 · 浏览器API · Cookie Store API cookieStore 登录态变化 CookieChangeEvent 前端降级 346浏览 收藏
-
- CSS container query 如何配合 ResizeObserver：避免响应式组件重复计算
- 用一个可复用的卡片组件说明 CSS container query 与 ResizeObserver 的分工：样式交给 CSS，数据计算交给观察器，并通过 requestAnimationFrame 合并重复通知。
- 文章 · 前端 | 3天前 | javascript · css · 前端性能 · ResizeObserver CSS容器查询 响应式组件 488浏览 收藏
-
- IntersectionObserver 怎么避免首屏图片抖动：懒加载、占位尺寸与可见性回收
- 图片懒加载并不等于把 src 延后设置。若没有提前占住尺寸，图片加载完成时会推动正文，造成首屏抖动。本文用 IntersectionObserver、aspect-ratio 和 loading 状态组合出一套可复查的懒加载写法，并说明可见性回收与取消观察的边界。
- 文章 · 前端 | 4天前 | 前端 · 性能优化 · javascript · 图片加载 · 图片懒加载 aspect-ratio IntersectionObserver 浏览器性能 首屏抖动 281浏览 收藏
-
- 前端 URLPattern 怎么匹配带参数的路由：命名捕获、校验失败与降级处理
- URLPattern 适合把前端路由匹配从手写字符串切分收敛到可校验规则，但命名参数、相对 URL 和浏览器缺失都要单独处理。本文用一个商品详情路由拆解匹配判断、参数读取、baseURL 与降级边界。
- 文章 · 前端 | 4天前 | 前端 · 路由 · javascript · 浏览器API · 兼容性 · JavaScript 前端路由 浏览器兼容 URLPattern 命名捕获 102浏览 收藏
-
- 前端页面为什么回退后表单还在：bfcache 缓存命中、pageshow 与状态清理
- 浏览器回退后表单内容仍然保留，通常不是 localStorage 写错，而是页面命中了 bfcache。本文用 pageshow、pagehide 和 persisted 判断真实生命周期，再给出需要清空状态时的可靠处理方式。
- 文章 · 前端 | 4天前 | 170浏览 收藏
-
- URLPattern 怎么做前端路由匹配：命名参数、URL 校验与兼容降级
- 用 URLPattern 把前端路由规则、命名参数和 URL 校验放在同一处，并为暂不支持该 API 的浏览器准备可靠降级。
- 文章 · 前端 | 4天前 | javascript · 前端开发 · 浏览器API · 命名参数 前端路由 URLPattern URL校验 185浏览 收藏
-
- JavaScript structuredClone 怎么复制表单状态：可克隆类型与 transfer 陷阱
- 用 structuredClone 复制前端表单草稿时，先分清深拷贝、不可克隆值和 transfer 转移语义，避免原缓冲区被置空或提交时丢失字段。
- 文章 · 前端 | 4天前 | javascript · 前端开发 · 浏览器API · JavaScript 深拷贝 表单状态 structuredClone 449浏览 收藏
-
- 前端表单提交为什么会重复触发：按钮禁用、请求幂等与恢复时机
- 前端表单重复提交不能只靠按钮 disabled 解决：浏览器事件、网络重试和用户回退会分别制造重复请求。本文用原生 JavaScript 拆开提交锁、请求幂等键、失败恢复和服务端去重的配合边界。
- 文章 · 前端 | 4天前 | 前端 · HTTP · javascript · 表单 · 用户体验 · 重复提交 AbortController 幂等键 前端表单 submit事件 按钮禁用 491浏览 收藏
-
- 前端 import.meta.dirname 怎么替代路径拼接：Node.js ESM 文件定位、兼容边界与构建发布
- 从 Node.js ESM 的 import.meta.dirname、import.meta.filename 与 import.meta.url 出发，说明本地文件定位、旧版本兼容、URL 路径和构建发布中的稳妥写法。
- 文章 · 前端 | 4天前 | Node.js · javascript · esm · 前端工程化 · JavaScript Node.js ESM 前端构建 import.meta.dirname 384浏览 收藏
-
- Web Animations API 如何中途反向播放：currentTime、playbackRate 与取消边界
- Web Animations API 适合控制可暂停、可反向和可取消的交互动画。本文用一个可复用的面板动画说明 currentTime、playbackRate、reverse() 与 cancel() 的边界，并给出状态核对和降级写法。
- 文章 · 前端 | 4天前 | javascript · 前端开发 · Web Animations API · 浏览器动画 · reverse currentTime playbackRate Web Animations API cancel 290浏览 收藏
-
- CSS Masonry 瀑布流布局怎么控制列高差：网格策略、图片加载与无障碍顺序
- CSS Masonry 仍处于早期开发阶段，实际项目应先用稳定的 CSS Grid 或多列方案兜底，再逐步验证列数、图片尺寸、阅读顺序和浏览器支持。本文用一组可回退的卡片布局说明列高差、图片加载和无障碍顺序的处理边界。
- 文章 · 前端 | 4天前 | 布局 · 前端 · 性能 · css · 无障碍 · 图片布局 瀑布流布局 grid-template-columns CSS Masonry reading-flow 424浏览 收藏
-
- JavaScript Promise.withResolvers 怎么管理外部 resolve：一次性完成、重复调用与资源清理
- Promise.withResolvers 把 Promise 的 resolve 和 reject 暴露出来，适合事件桥接、超时控制和一次性完成的异步流程。本文用最小示例拆解重复完成、异常传播、取消与资源清理边界。
- 文章 · 前端 | 4天前 | javascript · 异步编程 · 浏览器API · Promise · 异步资源清理 Promise.withResolvers JavaScript Promise 外部resolve 433浏览 收藏
-
- JavaScript scheduler.postTask 怎么安排前台与后台任务：优先级、取消和降级处理
- scheduler.postTask 可以把前端任务按 user-blocking、user-visible 和 background 分层，并通过 AbortController 取消尚未执行的工作。本文从交互卡顿场景出发，给出最小用法、任务取消、兼容降级和验收边界。
- 文章 · 前端 | 4天前 | 前端 · 性能 · javascript · Web API · JavaScript 任务调度 浏览器API scheduler.postTask 151浏览 收藏
-
- JavaScript AbortController.abort(reason) 实战：取消请求后区分用户操作与超时
- fetch 请求被取消时，AbortController.abort(reason) 可以把用户主动切换、超时和页面离开区分开。本文用一个可运行的请求封装说明 reason 的传递、catch 判断和兼容边界。
- 文章 · 前端 | 4天前 | 前端 · javascript · Fetch API · 异步请求 · Fetch AbortController 请求取消 abort(reason) AbortSignal.reason 246浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。
- 485次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析，希望您看完这套视频有所收获；包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 5464次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！
- 4943次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。
- 4851次使用
-
- 剧云
- 剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。
- 5114次使用
-
- 万象有声
- 万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！
- 5070次使用
