Web 系统生命周期和分层故障排查思路
Web 系统和浏览器起源：
早期科研人员的文档数据分散在不同计算机上，不方便共享和引用。Tim Berners-Lee 基于这个问题提出并实现了 HTML、HTTP 和 URL 三项核心技术，这三项核心技术共同构成了万维网（World Wide Web，简称 WWW 或 Web ）体系，所以万维网不是一种网络，而是一种分布式信息系统。
Tim Berners-Lee 还为这种 Web 系统开发了一个名为 浏览器 的客户端工具，浏览器通过 HTTP 协议来访问指定 URL 对应的资源。浏览器的核心职责就是通过 HTTP 获取资源，并解析 HTML、CSS 和 JavaScript，从而完成Web页面渲染。
现代 Web 系统通常采用 前后端分离的开发模式，即以 API 接口做为前端 和 后端的桥梁，前端专注于页面渲染，后端仅提供 API 接口，在 Web 页面（浏览器端看到的界面）的三大核心技术（HTML、CSS、JS）中，通过 JS 脚本来发起 HTTP 请求。
现代 Web 生命周期三阶段
- 浏览器获取资源阶段：浏览器通过 HTTP 向服务端请求指定资源，然后讲服务端响应的数据下载到浏览器缓存或内存临时存储。
- 浏览器解析执行阶段：浏览器对获取到的资源数据进行解析处理，然后完成 Web 页面的渲染。
- 运行时数据交互阶段：在进行动态交互时，通常是执行对应的 JS 脚本向服务端发起请求，根据服务端响应的数据来构建实时页面。
一次 HTTP 请求的具体流程：
- 浏览器构建HTTP请求：例如：当用户点击 Web 页面中的某个按钮时，会触发Web系统中前端对应的 JS 代码。JS 通过调用浏览器提供的网络接口（如 fetch 或 xhr）请求指定资源。浏览器随后构建对应的 HTTP 请求报文。
- 等待浏览器调度请求：因为在 HTTP/1.1 下，浏览器通常对同一域名的并发连接数有限制（一般为 6 个左右），若存在多个并发请求，可能会进入排队状态。如：请求构建完成后，等待了6s才被浏览器调度，说明前6s浏览器都去处理其他请求了。
- 和服务端建立连接：浏览器首先会将 URL 中的域名解析为具体的IP地址，然后三次握手建立TCP连接，连接建立后将请求发送给服务端。
- 服务端处理对应请求：服务端接收到请求后对请求进行处理，处理完成后返回响应数据。
- 浏览器下载响应数据：浏览器将服务端响应的数据下载到本地缓存或内存中。
- 浏览器进行解析处理：浏览器对获取到的资源数据进行解析处理，最终完成Web 页面的渲染。
Web 系统故障分层排查流程：
- 浏览器执行问题本质：资源已成功从服务器获取，但浏览器在解析、执行 JS 脚本、构建渲染 Web 页面过程中出现问题。
- 浏览器调度问题本质：请求已构建，但尚未被浏览器发送。
- 网络传输的问题本质：浏览器和服务器建立连接问题，以及数据在浏览器与服务器之间传输过程中出现延迟。
- 服务端处理问题本质：请求已成功到达服务器，但服务器在处理请求时耗时较长或数据处理错误。
Web 系统故障责任边界判断：
- 客户端/前端问题：在浏览器执行、浏览器调度时出现的问题属客户端（浏览器）的问题。
- 网络环境问题：TCP 连接建立满、DNS 解析慢、请求发送或 响应数据下载慢属网络传输问题。
- 后端系统我呢提：服务器成功接收请求，但是请求处理时间长或服务器内部数据处理错误属后端问题。
Web 系统的故障判断方法：
首先需要确定问题发生在哪里，是浏览器执行导致的问题，还是服务端处理导致的问题，一般通过 DevTools 可以确定问题发生位置。
- 判断是否是浏览器执行的问题：在 Network 面板查看请求是否完成，在 Console 面板查看是否存在阻断性 JS 报错
- 判断是否是浏览器调度的问题：DevTools → Network → Timing → Resource Scheduling → Queueing，若 Queueing 很大 则为浏览器的调度问题
- 判断是否是网络传输的问题：DevTools → Network → Timing 下查看 Connection Start 相关选项，以及 Request/Response 下的 Content Download 来确定网络带宽、Request sent 确定请求发送时间。
- 判断是否是服务端处理的问题：DevTools → Network → Timing 下查看Waiting for server response（也叫做TTFB（Time To First Byte）），表示从请求发出去开始，到收到服务器返回的第一个字节为止的时间 。
例如：打开 Web 系统的首页发现卡顿，资源加载很慢 的排查流程
问题现象：
第一步：打开 DevTools → Network → 刷新页面，确定是前端问题还是后端接口请求的问题。
此时发现大量接口处于挂起（Pending）状态，说明请求尚未完成（浏览器还没有拿到最终响应并关闭该请求）
第二步：确认响应慢到底是慢在哪里，是网络连接慢还是服务端响应慢。
发现网络连接建立很慢，所以非网络问题。等待浏览器调度时间很长，浏览器响应数据的时间也很长，一共花了20多秒。这里等待调度时间长是因为前面的接口请求阻塞了，导致该请求排队。
这里服务端响应数据时间慢就说明了耗时点发生在服务端的数据处理上。所以就可以确定这是服务端的问题，非网络和客户端浏览器问题。