前端技术文章
-
content-visibility:auto 可以跳过屏幕外内容的绘制，但尺寸估计不准时会让滚动条和滚动位置抖动。本文用 contain-intrinsic-size、auto 记忆尺寸和渐进校验拆开性能收益与布局稳定性的取舍。366 收藏 -
用 CSS @scope 给卡片组件划定样式边界，讲清嵌套 scope、to() 限制、scoping proximity 与不支持浏览器的降级检查。366 收藏 -
WebSocket 断线后，如果每个页面都立即重连，网络抖动会迅速变成重连风暴。本文从连接状态、指数退避、随机抖动和页面可见性恢复入手，给出一套可观察、可停止、能回滚的前端重连方案。366 收藏 -
用 CSSStyleSheet 构造共享样式，通过 adoptedStyleSheets 挂载到多个 ShadowRoot，并验证 replaceSync 更新、文档归属与兼容边界。365 收藏 -
Web Worker 通过 postMessage 传输 ArrayBuffer 时，加入 transfer list 会转移底层内存所有权，使发送端 buffer 进入 detached 状态。本文对比复制与转移，说明消息体、transfer list 和 Uint8Array 视图的正确边界。364 收藏 -
HTMLDialogElement 的 requestClose() 用于发起可拦截的关闭请求，close() 用于直接关闭。本文用事件顺序、returnValue 和兼容性代码说明两者的选择边界。363 收藏 -
前端显示业务时间时，应保留后端时间点并显式传入用户IANA时区。本文给出Intl.DateTimeFormat复用写法、resolvedOptions检查和无偏移字符串处理边界。363 收藏 -
TransformStream 会把下游的消费压力沿管道传回上游。本文用 pipeThrough、desiredSize 和 writer.ready 说明如何配置、判断并验证 Web Streams 背压。361 收藏 -
用列表底部哨兵讲清 IntersectionObserver 的 root、rootMargin 和 threshold 如何协同，补上请求锁、hasMore 标记以及自定义滚动容器的边界处理。360 收藏 -
通过 Fetch API 消费 Response.body 的 ReadableStream，按字节累计下载量并同步更新界面；同时处理 Content-Length 缺失、取消请求、网络异常和 Blob URL 释放，避免进度条失真或资源泄漏。359 收藏 -
前端表单用 blur 做逐字段校验时容易出现提示抖动。用 focusout 事件委托、relatedTarget 判断焦点是否仍在字段组内，再配合 requestId 丢弃过期结果，可以让校验状态稳定下来。356 收藏 -
TypeScript 为 React 开发提供完整的类型支持，提高代码可靠性。 使用 TypeScript 可以让 React 组件、Props、State 等都有完整的类型检查，减少运行时错误。 React 教程查看：https://www.runoob.com/vue3/react-tutori354 收藏 -
FormData 上传文件时不要手动设置 multipart/form-data 的 Content-Type，浏览器需要根据请求体自动生成 boundary。本文用 fetch 示例说明正确写法，并给出从请求头、字段名和文件对象排查上传失败的方法。353 收藏 -
用 CSS text-wrap: balance 处理中文卡片标题和文章标题的断行，配合 max-width、@supports 和可访问性检查，避免标题一行孤零零或切换时跳动。353 收藏 -
Vue computed getter 不应修改自己读取的响应式依赖，否则会把派生值和源状态连成循环。本文用最小示例解释回写原因，并给出事件处理器、纯 computed、watch 和 writable computed 的分工边界。352 收藏