前端技术文章
-
NodeIterator 按文档顺序遍历 DOM 子树。本文用一个文本查找场景说明 SHOW_TEXT、过滤器、referenceNode 和 pointerBeforeReferenceNode 的配合方式，并给出可恢复游标与边界处理代码。270 收藏 -
文章 · 前端 | 1天前 | 前端开发 · 缓存更新 ServiceWorker Service Worker skipWaiting clients.claim controllerchange 前端发布
Service Worker 更新不应直接打断正在运行的页面。本文用版本化缓存、waiting 状态、用户确认、skipWaiting、clients.claim 和 controllerchange 组织一次安全切换，并说明如何避免新旧 HTML 与 JavaScript 混用、重复刷新和多标签页竞态。269 收藏 -
通过 DOMParser 和 iframe 场景理解 Document.importNode() 的跨文档复制、deep 参数、插入时机，以及它与 cloneNode()、adoptNode() 的区别。266 收藏 -
用 contain-intrinsic-size 为 content-visibility 延迟渲染的内容提供估算尺寸，减少长页面滚动时的布局跳动，并说明固定值、auto 值和网格布局的使用边界。265 收藏 -
CSS view-transition-name 用来把指定元素接入 View Transition 的独立快照。本文从状态更新、命名边界、伪元素动画和重复名称处理四个角度，给出一个可渐进增强的页面切换写法。263 收藏 -
用 anchor-name 声明触发元素，再用 position-anchor 与 position-area 建立浮层关系，并通过 anchor-scope 和 @supports 处理重复组件与兼容降级。262 收藏 -
解释JavaScript NodeIterator.detach的兼容空操作语义，通过局部遍历与分批会话示例说明引用清理，区分DOM移除、对象可达性和垃圾回收时机。262 收藏 -
把依赖视口宽度的全局断点迁移到组件宿主宽度：用 container-type 建立查询上下文，用 @container 控制卡片布局，并通过默认样式、命名容器和回归清单避免嵌套与阈值问题。261 收藏 -
用 Vite 的 mode 和 .env 文件管理构建期配置，再用公开的运行期配置入口承载部署差异，理解 import.meta.env 的静态替换边界并避免把敏感信息打进前端产物。260 收藏 -
从用户选择得到 FileSystemFileHandle 后，使用 createWritable 创建可写流，写入文本或 Blob 并正确 close，同时处理安全上下文、权限、取消和兼容性降级。260 收藏 -
CSS :where() 会把自身和括号内选择器的优先级置为 0-0-0，同时保留匹配能力。本文用组件默认样式示例说明如何降低覆盖成本，并比较 :is()、普通伪类与 !important 的边界。260 收藏 -
checkVisibility 返回 true 只说明元素可能可见，不代表它在视口内或没有被遮挡。本文按布局盒、CSS 可见性、视口位置和命中测试四层排查这个前端问题。258 收藏 -
Vue 自定义指令中，对象表达式从 binding.value 读取，冒号参数从 binding.arg 读取，点号修饰符变成布尔对象；updated 还能读取 oldValue。本文用原创示例说明字段映射、更新比较和只读边界。258 收藏 -
Element.getHTML 默认只序列化元素内容；要把可序列化的 Shadow DOM 一起带出，需要在创建 ShadowRoot 时设置 serializable，并在调用时传入 serializableShadowRoots。本文用最小代码说明两者的边界。257 收藏 -
Vite 的环境变量不是天然私密配置：带有 VITE_ 前缀的变量会进入客户端代码，生产构建还会把 import.meta.env 静态替换。本文按资产、暴露路径、风险和防护清单拆开说明，帮助你把 API 地址等公开配置与密钥留在服务端。256 收藏