浏览器相关知识

前端很多“玄学问题”，本质上都能回到浏览器运行机制上解释。页面为什么卡、样式为什么抖、请求为什么失败、同样的代码为什么不同环境表现不同，背后其实都有路径可循。

这篇文章先把最常用的几个基础视角拎出来，帮助建立一套更可靠的排查思路。

浏览器渲染流程

从 HTML 到页面最终显示，大致会经历这些阶段：

1. 解析 HTML，构建 DOM
2. 解析 CSS，构建 CSSOM
3. 合并生成渲染树
4. 布局计算
5. 绘制
6. 合成与显示

这个流程最重要的意义，不是背顺序，而是帮助你理解一件事：页面的每一次更新都不是“直接显示出来”，而是可能触发一整套重新计算。

重排与重绘

这是性能问题里最常见的一组概念。

重排

当元素几何信息变化时，例如：

• 宽高变化
• 位置变化
• 节点增删导致布局受影响

浏览器需要重新计算布局，这就是重排。

重绘

当布局不变，只是外观变化时，例如：

• 颜色变化
• 背景变化
• 阴影变化

浏览器不一定重算布局，但要重新绘制，这就是重绘。

为什么要关心

因为重排通常比重绘更贵，而频繁触发两者都会让页面变卡。

常见优化原则：

• 批量修改 DOM
• 避免一边读布局，一边立即写布局
• 动画优先使用 transform 和 opacity

事件循环

JavaScript 是单线程的，但浏览器环境不是单一流程。异步任务之所以能运转，是因为事件循环在调度。

常见任务分类

• 宏任务：setTimeout、I/O、UI 事件
• 微任务：Promise.then、queueMicrotask

常见执行顺序大致是：

1. 执行当前宏任务
2. 清空微任务队列
3. 进入下一轮宏任务

这和业务有什么关系

很多“为什么先打印这个、后打印那个”的问题，本质都和事件循环有关。框架里的异步更新、Promise 链执行顺序、某些 UI 刷新时机，也都离不开它。

存储方式

浏览器里的数据存储方式并不只有一种。

cookie

• 体积较小
• 会随着请求发送给服务端
• 更适合轻量标识类信息

localStorage

• 持久化存储
• API 简单
• 更适合轻量本地配置或缓存

sessionStorage

• 生命周期通常跟随当前会话
• 更适合临时页面状态

IndexedDB

• 更适合结构化数据
• 能处理更复杂的本地离线场景

选择思路

不要只看“能不能存”，还要看：

• 数据体积
• 生命周期
• 是否需要参与请求
• 是否涉及敏感信息

网络基础

前端虽然不直接控制底层网络，但很多调试都离不开下面这些概念。

HTTP 缓存

缓存决定了资源是不是每次都要重新请求，直接影响：

• 首屏速度
• 更新策略
• 静态资源命中率

状态码

状态码不是单纯“成功还是失败”，而是帮助你判断失败属于：

• 请求格式问题
• 权限问题
• 资源不存在
• 服务端异常

跨域

很多接口问题并不是“后端没返回”，而是浏览器出于安全策略拦截了前端访问。理解跨域的本质，比背几个解决方案更重要。

HTTPS

HTTPS 不只是“更安全”，还影响：

• 浏览器是否允许某些能力
• 混合内容是否被拦截
• 站点可信度与部署要求

从输入 URL 到页面展示

这是一个经典问题，也是把前端知识串起来的很好方式。一个简化流程通常包括：

1. URL 解析
2. DNS 查询
3. 建立连接
4. 发起 HTTP 请求
5. 服务端返回资源
6. 浏览器解析与渲染
7. 执行 JavaScript

这能帮助你理解为什么一个页面问题，可能出在网络、缓存、脚本执行、样式渲染中的任何一个环节。

常见排查思路

面对浏览器问题时，优先按层拆分：

1. 是网络问题，还是页面运行问题
2. 是 DOM / CSS 问题，还是 JavaScript 逻辑问题
3. 是渲染时机问题，还是数据本身问题
4. 是浏览器策略限制，还是业务代码错误

这比“哪里不对就到处试”更有效。

小结

浏览器知识的价值不在于理论感，而在于它能帮你把很多看似随机的问题拆开看清：

• 渲染流程解释页面为什么会卡
• 重排重绘解释样式更新成本
• 事件循环解释异步顺序
• 存储与网络基础解释很多线上行为差异

延伸阅读

• 从 URL 输入到页面展示
• 浏览器缓存策略
• 跨标签页通信
• Service Worker