前端技术文章
-
scheduler.postTask 可以把前端任务按 user-blocking、user-visible 和 background 分层，并通过 AbortController 取消尚未执行的工作。本文从交互卡顿场景出发，给出最小用法、任务取消、兼容降级和验收边界。151 收藏 -
文章 · 前端 | 1天前 | javascript · 前端性能 · 浏览器API · AbortSignal 前端性能 scheduler.postTask Prioritized Task Scheduling
用一个小型任务调度器示例说明 scheduler.postTask 的优先级、AbortSignal 取消和 scheduler.yield 让出主线程边界，并给出浏览器能力检测与降级写法。138 收藏 -
用 CSS @container style() 读取组件祖先的自定义属性，让同一组件在浅色、深色和高对比主题下保持局部样式一致，并补上浏览器降级与可访问性检查。136 收藏 -
文章 · 前端 | 4天前 | html · 前端 · javascript · css · web components · 表单校验 Web Components ElementInternals form-associated custom elements setValidity
把日期选择器、验证码框等自定义元素接入原生 form，不必再在提交事件里重复拼装校验。本文用 ElementInternals、setFormValue 和 setValidity 做一个可提交、可校验的 custom element，并说明浏览器能力不足时如何降级。134 收藏 -
用一个可运行的曝光实验说明 IntersectionObserver 的 threshold 数组如何触发可见比例回调，并用 Set 做首屏曝光去重，避开重复上报和阈值误判。133 收藏 -
文章 · 前端 | 3天前 | 前端 · javascript · 安全开发 · Web Crypto · 浏览器 API · ArrayBuffer 前端加密 AES-GCM Web Crypto API crypto.subtle
用浏览器原生 Web Crypto API 完成 AES-GCM 密钥的导入、导出、加密和解密，重点核对 Base64 编码、CryptoKey 可提取性、每次加密唯一 IV 以及 ArrayBuffer 类型边界。129 收藏 -
文章 · 前端 | 5天前 | 前端 · javascript · Web API · 页面过渡 · 前端动画 document.startViewTransition View Transitions API startViewTransition SPA页面切换
单页应用切换列表与详情时，可以用 document.startViewTransition 包住 DOM 更新，让浏览器接管新旧视图的过渡；同时保留 prefers-reduced-motion 和 API 能力检测，确保不支持时仍能正常切换。128 收藏 -
原生 HTML dialog 关闭后，焦点恢复、Esc 取消和按钮结果经常被混在一起。本文用一个可复现的确认框拆开 showModal、returnValue、cancel/close 事件和焦点恢复的边界。128 收藏 -
网页里同时存在 dialog、抽屉和自定义浮层时，可用 CloseWatcher 统一接收 ESC 或系统返回关闭请求，再把焦点恢复、脏数据确认和旧浏览器回退放进同一条关闭链路。126 收藏 -
文章 · 前端 | 3天前 | 前端 · css · 动画 · Web API · CSS scroll-driven animations animation-timeline scroll-timeline view-timeline animation-range
用 CSS scroll-driven animations 把动画绑定到滚动位置或元素进入视口的进度，拆清 scroll timeline、view timeline、animation-range 的关系，并给出 prefers-reduced-motion 与 @supports 降级方案。119 收藏 -
中文搜索框不能靠空格切词。本文用 JavaScript Intl.Segmenter 的 word 粒度保留 segment、index 与 isWordLike，再把字符位置映射到高亮范围，处理中文、英文和表情符号的边界。111 收藏 -
长列表加载更多时，IntersectionObserver 可能因哨兵节点持续可见而重复触发。本文用 sentinel、entry.isIntersecting、loading 和 loadMore 收口一次请求，处理快速滚动与末页边界。106 收藏 -
文章 · 前端 | 5小时前 | 前端 · javascript · web components · 组件化 · 自定义元素 Web Components Custom Elements customElements.define connectedCallback
自定义元素已经出现在 HTML 中时，脚本晚到仍可通过 customElements.define 完成升级；真正容易出问题的是重复注册、connectedCallback 多次触发和元素尚未连接时的初始化。本文用 price-badge 示例拆开升级时机、生命周期和可回退的注册写法。104 收藏 -
HTML inert 是一个全局布尔属性，可以让元素及其后代暂时不能获得焦点、点击或进入辅助技术的可访问性树。本文用一个可关闭弹窗说明如何切换 inert、保留弹窗内焦点、处理 Escape 和旧浏览器降级，并列出容易把 aria-hidden、pointer-events 与 inert 混用的边界。103 收藏 -
URLPattern 适合把前端路由匹配从手写字符串切分收敛到可校验规则，但命名参数、相对 URL 和浏览器缺失都要单独处理。本文用一个商品详情路由拆解匹配判断、参数读取、baseURL 与降级边界。102 收藏