CATEGORY / 17

前端与浏览器

组件、状态、CSS、无障碍和浏览器 API。 这里的文章按实际问题组织,可以从任意一篇开始。

前端与浏览器9 分钟

从 HTML 到像素:浏览器渲染流水线怎么工作

浏览器不会直接把 HTML 画到屏幕上。本文拆解主线程上的解析、样式计算、布局和绘制,以及合成线程如何复用图层。

RenderingDOMCSSOMPerformance
前端与浏览器8 分钟

事件循环不只分宏任务和微任务

解释浏览器如何从任务队列取出工作、清空微任务、决定是否渲染,并说明微任务链为什么也会阻塞页面。

Event LoopPromiserequestAnimationFrameTasks
前端与浏览器10 分钟

HTTP 缓存策略:强缓存、协商缓存与版本化资源

从 Cache-Control 的语义出发,为带哈希静态资源、HTML、接口数据和用户私有数据设计可预测的缓存策略。

HTTP CacheCache-ControlETagCDN
前端与浏览器11 分钟

Service Worker 离线缓存:先设计更新,再设计命中

介绍 Service Worker 生命周期、预缓存与运行时缓存策略,并处理版本升级、缓存清理和失败回退。

Service WorkerCache APIOfflinePWA
前端与浏览器8 分钟

CORS 与预检请求:浏览器到底在保护谁

从同源策略解释简单请求、OPTIONS 预检、凭据模式和常见响应头配置错误。

CORSPreflightSame OriginFetch
前端与浏览器9 分钟

Cookie 安全边界:SameSite、HttpOnly 与 CSRF

解释 Cookie 的发送规则、安全属性、跨站与跨源差异,并给出会话 Cookie 和 CSRF 防护建议。

CookieSameSiteCSRFSession
前端与浏览器11 分钟

用 CSP 把 XSS 从一次失误变成多层防线

从 Report-Only 开始部署内容安全策略,使用 nonce、strict-dynamic 和 Trusted Types 降低脚本注入风险。

CSPXSSNonceTrusted Types
前端与浏览器10 分钟

Core Web Vitals 优化:从指标回到用户路径

介绍三项核心体验指标的组成、现场数据与实验室数据差异,以及每类问题的优先优化路径。

LCPINPCLSWeb Vitals
前端与浏览器8 分钟

资源加载优先级:preload、preconnect 与懒加载怎么选

区分 preload、prefetch、preconnect、modulepreload 和 fetchpriority 的用途,并避免带宽竞争。

PreloadPreconnectLazy LoadingPriority Hints
前端与浏览器10 分钟

主线程长任务排查:不要只看一条红色火焰图

建立可复现的性能录制流程,识别长任务中的脚本执行、强制布局、垃圾回收和第三方代码。

Long TasksDevToolsINPProfiling
前端与浏览器9 分钟

Web Worker 实战:把计算移出主线程之前要算清成本

说明 Worker 的适用边界、消息协议、可转移对象、错误处理和生命周期管理。

Web WorkerStructured CloneTransferableConcurrency
前端与浏览器11 分钟

IndexedDB 数据层:事务、索引与版本迁移

介绍对象仓库、索引、事务生命周期、版本升级和多标签页协调,构建可靠的本地数据层。

IndexedDBTransactionOfflineStorage
前端与浏览器8 分钟

多标签页通信:BroadcastChannel、storage 与锁

比较多标签页通信方案,设计登出通知、状态同步和单实例后台任务。

BroadcastChannelWeb LocksStorage EventTabs
前端与浏览器9 分钟

页面生命周期:visibilitychange、pagehide 与 bfcache

解释页面可见性、冻结、销毁和往返缓存,可靠保存草稿与发送末尾统计。

Page LifecyclebfcachevisibilitychangeBeacon
前端与浏览器7 分钟

容器查询:让组件响应自己的空间

使用尺寸与样式容器查询构建可复用卡片,并解释容器单位、命名和渐进增强。

Container QueriesCSSResponsive Designcq Units
前端与浏览器7 分钟

CSS 层叠层:用 @layer 管理覆盖关系

解释层叠来源、层顺序和选择器权重的关系,为重置、第三方样式、组件和工具类规划稳定覆盖规则。

Cascade LayersCSSSpecificityArchitecture
前端与浏览器12 分钟

可访问组件:从键盘、焦点和语义开始

以按钮、对话框和异步状态为例,建立语义、键盘操作、焦点管理和辅助技术测试的组件基线。

AccessibilityARIAKeyboardFocus