前端
已收录文章：13篇
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。491 收藏
-
科技周边 · 人工智能 | 3星期前 | 前端 · 人工智能 · 用户体验 · 可访问性 · 流式输出 · AI对话 AbortController AbortSignal 流式输出 aria-live 停止生成AI 对话的停止按钮不只是调用 abort()。要让用户、键盘操作和辅助技术都获得一致反馈，需要为每次请求新建 AbortController，正确收尾读取循环，并把生成、停止、失败状态放进合适的实时状态区域。425 收藏
-
文章 · 前端 | 2星期前 | 前端 · 性能优化 · javascript · 浏览器性能 · PerformanceObserver · JSON解析 PerformanceObserver 浏览器性能 Long Task 主线程卡顿页面偶发点击无响应，先别急着把锅甩给网络。本文用 PerformanceObserver 记录 50ms 以上长任务，结合 Chrome Performance 面板定位 JSON.parse 和同步渲染造成的主线程阻塞，再用分片处理和 requestIdleCallback 做可验证的修复。421 收藏
-
文章 · 前端 | 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 收藏
-
CSS 容器查询让卡片组件根据自身可用宽度改变布局，而不是只看浏览器宽度。本文用商品卡片示例讲清 container-type、@container、断点选择和回归检查。339 收藏
-
文章 · 前端 | 2星期前 | 表格 · 前端 · 性能优化 · javascript · ResizeObserver · ResizeObserver ResizeObserver loop completed 表格自适应列宽 前端防抖 ResizeObserverEntry表格列宽跟随容器变化时，ResizeObserver 回调里直接改尺寸，容易让观察回调再次触发，最终出现 ResizeObserver loop completed with undelivered notifications。本文比较同步改宽、requestAnimationFrame 合并和断点缓存三种方案，给出一个可复查的表格列宽实现。301 收藏
-
文章 · 前端 | 2星期前 | 前端 · Cookie · cors · 自动化测试 · playwright · 前端 cookie cors Playwright SameSite 登录态 跨域测试登录接口返回成功不等于登录态可用。本文用 Playwright 把 Cookie 保存、跨域请求凭证、CORS 响应头和 SameSite 边界写进一组可重复运行的浏览器回归测试，并给出失败定位与上线检查方法。285 收藏
-
大文件上传卡顿，通常不是把请求并发数调大就能解决。前端需要先把 File 切成固定大小的分片，用 SHA-256 或服务端校验确认每片，再用有限并发窗口上传，失败时只重试缺失分片。本文用浏览器原生 API 拆出一套可回查、可暂停、可恢复的实现边界。211 收藏
-
文章 · 前端 | 3星期前 | 前端 · javascript · css · View Transition API · JavaScript 浏览器兼容 View Transition API document.startViewTransition 前端筛选列表 SPA过渡从商品筛选列表切换时的突兀重绘切入，使用 document.startViewTransition 包住 DOM 更新，给出筛选状态、动效样式、浏览器回退和可访问性检查，避免为了动效破坏点击与焦点。196 收藏
-
科技周边 · 业界新闻 | 2星期前 | 前端 · 流式处理 · sse · Web Streams · TextDecoderStream · 流式解码 SSE ReadableStream TextDecoderStream UTF-8分块SSE 返回的 UTF-8 字节可能把一个汉字拆在两个网络 chunk 中，逐块直接 TextDecoder.decode 容易出现替换字符。本文用浏览器 TextDecoderStream 处理 SSE 文本流，说明 pipeThrough、行缓冲、事件结束标记和兼容边界。186 收藏
-
商品卡片内容长短不一时，底部价格和按钮容易上下漂移。本文从实际错位现象入手，用 CSS Grid 的 subgrid 统一行轨道，并给出不支持 subgrid 浏览器的稳定降级写法。130 收藏