前端与浏览器
组件、状态、CSS、无障碍和浏览器 API。 这里的文章按实际问题组织,可以从任意一篇开始。
从 HTML 到像素:浏览器渲染流水线怎么工作
浏览器不会直接把 HTML 画到屏幕上。本文拆解主线程上的解析、样式计算、布局和绘制,以及合成线程如何复用图层。
事件循环不只分宏任务和微任务
解释浏览器如何从任务队列取出工作、清空微任务、决定是否渲染,并说明微任务链为什么也会阻塞页面。
HTTP 缓存策略:强缓存、协商缓存与版本化资源
从 Cache-Control 的语义出发,为带哈希静态资源、HTML、接口数据和用户私有数据设计可预测的缓存策略。
Service Worker 离线缓存:先设计更新,再设计命中
介绍 Service Worker 生命周期、预缓存与运行时缓存策略,并处理版本升级、缓存清理和失败回退。
CORS 与预检请求:浏览器到底在保护谁
从同源策略解释简单请求、OPTIONS 预检、凭据模式和常见响应头配置错误。
Cookie 安全边界:SameSite、HttpOnly 与 CSRF
解释 Cookie 的发送规则、安全属性、跨站与跨源差异,并给出会话 Cookie 和 CSRF 防护建议。
用 CSP 把 XSS 从一次失误变成多层防线
从 Report-Only 开始部署内容安全策略,使用 nonce、strict-dynamic 和 Trusted Types 降低脚本注入风险。
Core Web Vitals 优化:从指标回到用户路径
介绍三项核心体验指标的组成、现场数据与实验室数据差异,以及每类问题的优先优化路径。
资源加载优先级:preload、preconnect 与懒加载怎么选
区分 preload、prefetch、preconnect、modulepreload 和 fetchpriority 的用途,并避免带宽竞争。
主线程长任务排查:不要只看一条红色火焰图
建立可复现的性能录制流程,识别长任务中的脚本执行、强制布局、垃圾回收和第三方代码。
Web Worker 实战:把计算移出主线程之前要算清成本
说明 Worker 的适用边界、消息协议、可转移对象、错误处理和生命周期管理。
IndexedDB 数据层:事务、索引与版本迁移
介绍对象仓库、索引、事务生命周期、版本升级和多标签页协调,构建可靠的本地数据层。
多标签页通信:BroadcastChannel、storage 与锁
比较多标签页通信方案,设计登出通知、状态同步和单实例后台任务。
页面生命周期:visibilitychange、pagehide 与 bfcache
解释页面可见性、冻结、销毁和往返缓存,可靠保存草稿与发送末尾统计。
容器查询:让组件响应自己的空间
使用尺寸与样式容器查询构建可复用卡片,并解释容器单位、命名和渐进增强。
CSS 层叠层:用 @layer 管理覆盖关系
解释层叠来源、层顺序和选择器权重的关系,为重置、第三方样式、组件和工具类规划稳定覆盖规则。
可访问组件:从键盘、焦点和语义开始
以按钮、对话框和异步状态为例,建立语义、键盘操作、焦点管理和辅助技术测试的组件基线。