【前端面试】浏览器：浏览器解析过程

问：浏览器输入一个网站到解析的过程？

1. 查询 IP 地址：用户缓存查找，DNS 服务查找
2. 建立 TCP 连接：一般在 80(http) 或 443(https) 接口建立连接
3. 发送 HTTP 请求：向服务端请求 http 资源并解析
4. 渲染网页：根据 HTML，CSS，JS 文件渲染 DOM 树，CSSOM 树。最终生成渲染树并绘制。执行 JavaScript 代码：遇到 script 标签，通过各种手段下载脚本并执行
5. 后续：用户交互，持续通信

查找 IP 地址

涉及到两步查找操作：

• 本机缓存：优先查找用户电脑的 host 文件配置，其次查询浏览器内部的 DNS 缓存
• DNS 解析：从网络服务商（ISP）提供的就近 DNS 开始一直找到根 DNS，直到获取对应的 IP 地址。如果找不到浏览器会返回错误。

建立 TCP 连接

找到对应的 IP 地址后，网络进程向服务端请求建立 TCP 连接（一般是走 nginx 代理）。浏览器网站对应的端口一般是：

• http 协议：80 端口
• https 协议：443 端口

TCP 协议本身需要通过三次握手建立长连接。

发送 http 请求

建立 http 连接后，客户端向服务端发送网页请求（一般首先请求 index.html），如果使用了 CDN 加速服务，请求会首先在 CDN 中寻找可用的缓存文件，如果找不到再去访问浏览器的对应文件（找到后，这个文件大概率也会被 CDN 缓存）。

• 此时如果是请求的是 SPA（单页面应用）的某个子路由，且使用的是 hash route，那么可能无法命中目标。因为 hash route 子路由会去寻找对应的文件，但实际上是没有这个文件的。此时服务端会尝试返回 404.html 的内容，如果在 404.html 中做了相应的处理，会返回正确的页面。
• http2.0 支持主动推送，因此即使客户端仅请求 index.html 文件，服务端也有可能将相关的文件一次性返回（由于这个特性，可能会导致 DDos 攻击）。

简单拓展一下一种防 DDos 攻击的方案（后两种和前端无关）：

• 浏览器缓存：如果缓存了资源（尤其是强缓存），那么就不会再请求服务端资源
• CDN：直接拿 CDN 缓存的结果，也不会走到服务端。而且大部分 CDN 服务商自己会做防 DDos 攻击
• 懒加载：不重要的资源延迟加载
• 服务器限制（后端）：接口频率限制，比如每分钟仅允许某个相同的来源请求 xxx 次，或者间隔不能小于多少毫秒。
• 代理限制（运维）：负载均衡

渲染网页

拿到 HTML 与 CSS 文件后，会分别构建 DOM 与 CSSOM 树，再将两者接口形成完整的渲染树显示在界面上。

这个过程可能遇到 <script> 标签，根据属性不同，加载逻辑有所不同：

• 默认加载：<script>：
  • 执行时机：下载完成后立即执行
  • 下载时机：遇到立即同步下载
  • 适用于高优先级脚本，但这会阻塞页面渲染。
• 异步加载：<script async>：
  • 执行时机：下载完成后立即执行
  • 下载时机：遇到立即异步下载，不阻塞 HTML 解析
  • 由于下载后会立即执行，因此脚本不应该访问 DOM 结构，且执行顺序不确定，先下好的先执行
• 延迟加载：<script defer>：
  • 执行时机：下载完成且 HTML 解析完成后执行
  • 下载时机：遇到立即异步下载，不阻塞 HTML 解析
  • HTML 解析完成后，会按照原先的顺序依此执行

React 等框架默认编译出的脚本都是 defer 执行

用户交互

页面首屏渲染完成后执行固有逻辑，并等待用户操作，直到用户关闭页面。

整个流程主要逻辑如下：

原文链接：https://juejin.cn/post/7408062004873494563