前端
已收录文章：17篇
-
中文输入法候选词还没确认时，AI 聊天框把回车当成发送，会截断用户正在输入的句子。本文用 compositionstart、compositionend 和 InputEvent.isComposing 组合出稳定的回车发送规则，并补上移动端、粘贴和可访问性检查。217 收藏
-
Chrome 在 2026 年展示了 WebMCP 这一面向浏览器智能体的实验性能力。真正接入时，先把网页动作收敛成可授权、可校验、可回退的工具接口，再决定是否进入试验，而不是把现有 API 全部暴露出去。326 收藏
-
小报表可以由浏览器直接生成，大数据量报表则应交给后端异步任务，并通过进度事件和短时下载地址交付。关键不是文件后缀，而是浏览器内存、请求时限、失败重试和权限边界。331 收藏
-
大文件上传到底该让浏览器把数据交给业务服务，还是直接送到对象存储？本文从流量路径、分片重试、权限边界和完成校验四个维度比较两种方案，并给出基于 Blob.slice、预签名 URL 与 uploadId 的可落地实现边界。448 收藏
-
View Transition API 已经不只服务 SPA。本文用两个同源页面演示跨文档过渡，拆开 @view-transition、view-transition-name、pageswap/pagereveal 与不支持浏览器的降级边界。392 收藏
-
前端上传几百 MB 文件时，真正容易卡住的不是单个请求，而是分片队列、并发窗口和失败重试互相放大。本文用浏览器 File.slice、Promise 队列和服务端分片状态，拆解从一次性上传改成可暂停、可续传方案时的架构取舍。127 收藏
-
商品卡片内容长短不一时，底部价格和按钮容易上下漂移。本文从实际错位现象入手，用 CSS Grid 的 subgrid 统一行轨道，并给出不支持 subgrid 浏览器的稳定降级写法。130 收藏
-
科技周边 · 业界新闻 | 2星期前 | 前端 · 流式处理 · sse · Web Streams · TextDecoderStream · 流式解码 SSE ReadableStream TextDecoderStream UTF-8分块SSE 返回的 UTF-8 字节可能把一个汉字拆在两个网络 chunk 中，逐块直接 TextDecoder.decode 容易出现替换字符。本文用浏览器 TextDecoderStream 处理 SSE 文本流，说明 pipeThrough、行缓冲、事件结束标记和兼容边界。186 收藏
-
文章 · 前端 | 2星期前 | 前端 · javascript · 浏览器性能 · 交互优化 · 数据表格 · 前端 性能优化 requestAnimationFrame 布局抖动 表格列拖拽 Pointer Events表格列拖拽时出现指针跟不上、列宽抖动和松手后跳回，通常不是 Pointer Events 本身慢，而是每个 pointermove 都同步读写布局。本文用 120Hz 屏幕的可复现场景，比较直接写入与 requestAnimationFrame 合帧方案，并给出最终验收指标与边界。397 收藏
-
文章 · 前端 | 2星期前 | 前端 · javascript · css · 浏览器API · document.startViewTransition CSS View Transitions 页面切换动画用一个无框架商品列表示例，讲清 CSS View Transitions API 的最小接入、元素命名、同文档切换、降级处理和浏览器兼容边界。375 收藏
-
文章 · 前端 | 2星期前 | 表格 · 前端 · 性能优化 · javascript · ResizeObserver · ResizeObserver ResizeObserver loop completed 表格自适应列宽 前端防抖 ResizeObserverEntry表格列宽跟随容器变化时，ResizeObserver 回调里直接改尺寸，容易让观察回调再次触发，最终出现 ResizeObserver loop completed with undelivered notifications。本文比较同步改宽、requestAnimationFrame 合并和断点缓存三种方案，给出一个可复查的表格列宽实现。301 收藏
-
文章 · 前端 | 3星期前 | 前端 · 性能优化 · javascript · 浏览器性能 · PerformanceObserver · JSON解析 PerformanceObserver 浏览器性能 Long Task 主线程卡顿页面偶发点击无响应，先别急着把锅甩给网络。本文用 PerformanceObserver 记录 50ms 以上长任务，结合 Chrome Performance 面板定位 JSON.parse 和同步渲染造成的主线程阻塞，再用分片处理和 requestIdleCallback 做可验证的修复。421 收藏