前端技术文章
-
用一个带校验状态、禁用状态和兄弟提示的表单例子，拆清 CSS :has() 的相对选择器边界、特异性影响与可维护写法。485 收藏 -
ReadableStream.tee() 的两个消费者速度不一致时，慢分支的未读数据会在内部队列中积累，快分支不会自动等待。本文用最小示例解释背压、内存风险、取消语义与分流方案选择。485 收藏 -
connectedCallback 适合处理依赖 DOM 的初始化，但不能把所有逻辑都塞进去。本文用 Web Component 示例区分 constructor、connectedCallback、attributeChangedCallback 和 disconnectedCallback 的职责，并处理重连、子节点时机与事件清理。484 收藏 -
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · Fetch AbortController ReadableStream TextDecoderStream 大文件分块
前端用 fetch 读取大文件时，不必等 response.text() 或 response.blob() 一次性完成。本文用 ReadableStream 逐块消费响应，讲清 TextDecoderStream、背压、取消请求和兼容处理。483 收藏 -
使用 URLSearchParams.append 逐个生成同名查询参数，用 getAll 读取完整数组，并了解 set 覆盖值、数组初始化和后端解析约定的常见坑。483 收藏 -
通过 view-transition-name 与 startViewTransition，让列表更新只动画目标元素，并为不支持的浏览器保留直接更新降级。483 收藏 -
fetch 遇到 404 不进入 catch，是因为请求已经拿到了 HTTP 响应。本文用 response.ok、status 和 JSON 解析示例说明正确的错误处理方式。481 收藏 -
ResizeObserver 回调修改被观察尺寸会形成布局反馈链。本文从循环成因、requestAnimationFrame 调度、期望尺寸守卫和 CSS 容器查询四个方面给出可落地的排查与修复写法。481 收藏 -
paths 是 tsconfig.json 中的配置选项，用于配置模块路径别名。 它可以让导入路径更简洁，同时保持代码的组织结构清晰。 路径映射 paths 工作原理 原始导入路径 import Button from "../../components/Button" 使用别名导入 import480 收藏 -
用 requestIdleCallback 安排不影响首屏交互的后台任务，结合 IdleDeadline.didTimeout 与 timeRemaining() 分片处理，并给出不支持该 API 时的安全降级方案。480 收藏 -
用一个可运行的 HTML dialog 示例验证 closedby 的 none、closerequest、any 三种关闭边界，并记录 close 事件、returnValue 与旧浏览器降级策略。479 收藏 -
首屏图片明明已经压缩，LCP 仍然偏慢，常见原因是资源发现晚、优先级被误用或懒加载挡住了关键图。本文用 fetchpriority、loading、preload 和 DevTools 网络瀑布建立一套可验收的加载顺序。476 收藏 -
IndexedDB 按 status、updatedAt 等字段查询时，如果 object store 没有二级索引，不要先把全部记录读出再过滤。本文说明如何升级数据库版本，在 onupgradeneeded 中创建 IDBIndex，并用 IDBKeyRange 与游标缩小读取范围。476 收藏 -
CSS 的 height:auto 过去很难直接做平滑过渡。本文从 max-height 和 JavaScript 测量的旧方案切入，演示 interpolate-size: allow-keywords 的最小改造，并核对继承范围、浏览器降级与 prefers-reduced-motion 边界。475 收藏 -
subtle.digest 不支持流式输入。本文说明如何用 Blob.slice 控制单块内存，并通过增量哈希器持续 update，正确计算大文件的 SHA-256。475 收藏