一、基本流程

         1、用户输入&浏览器处理 URL

         （1）用户在地址栏输入内容

         （2）浏览器进行判断

                   ●是URL（有协议 / 域名 / 路径）

                   ●还是搜索关键词

         （3）如果是URL自动补全协议（默认 http:// 或https://）

         （4）按下回车,浏览器开始进行工作

         2、DNS域名解析

          由于浏览器只认识 IP 地址，不认识域名，所以要进行解析

          查找顺序（缓存优先，逐层向上）：

                （1）浏览器 DNS 缓存

                （2）操作系统缓存（hosts文件，系统DNS缓存）

                （3）本地路由器缓存

                （4）ISP本地 DNS 服务器（运营商DNS）

                （5）如果还未找到，开始递归+迭代查询

           结果：得到服务器IP+端口号（默认80 / 443）

         3、建立TCP连接（三次握手）

           HTTP / HTTPS 基于TCP可靠传输

           TCP三次握手

            （1）客户端 —> 服务器 ：SYN

                     ● 我想和你建立连接，你在线吗?

            （2）服务器 —> 客户端：ACK+SYN

                     ●我在，你收到我的消息了吗？

            （3）客户端 —> 服务器：ACK

                     ●收到，连接建立，可传输数据

                握手完成：通道可靠建立

         4、HTTPS 还会走 TLS  握手（加密）

          如果应用层协议使用 HTTPS（443端口），在TCP之后再做一次加密协商：

             （1）客户端支持的加密套件列表

             （2）服务端选择套件，返回数字证书

             （3）客户端验证证书的合法性（CA、域名、有效期）

             （4）双方协商出会话秘钥

             （5）之后所有通信进行加密传输

         5、浏览器发送 HTTP 请求

           构建并发送完整的 HTTP 请求报文

             （1）请求行：方法（GET / POST /...）+ URL +协议版本

             （2）请求头：

                         cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccHost      ●User-Agent      ●Cookie    ......

            （3）请求正文（可能无）：与报头之间有空行，如下：

            （4）网络层：IP 寻址、路由选择

            （5）数据链路层：封装成帧，经过网关、交换机、路由器发送到服务器

         6、服务器接受并处理请求

          （1）反向代理层（Nginx / Apache）

                      ●接收请求      ●负载均衡      ●静态资源直接返回

          （2）应用服务层（Tomcat / Node / Go）

                      ●路由匹配      ●执行业务逻辑     ● 访问数据库 / 缓存

          （3）构造 HTTP 响应返回

                      ●状态码：200 / 300 / 404 / 500......

                      ● 响应头：Content-Type、Content-Length......

                       ●响应正文

         7、浏览器解析渲染与资源加载流程

            （1）浏览器接收HTML后，先解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树，再合并为只包含可见节点的渲染树；

            （2）接着进行布局（回流）计算元素位置与大小，然后绘制（重绘）像素内容，最后通过图层合成展示页面

            （3）过程中，JS会阻塞HTML和CSS解析，CSS会阻塞JS执行，可通过 async / defer 优化

            （4）图片字体等资源异步加载，依次触发 DOMCotentLoaded 和 Load 事件

二、一句话串联（总结）

           输入URL → 浏览器处理URL → DNS解析域名得到 IP →​ TCP三次握手建立连接 → HTTPS进行 TLS 加密协商 → 浏览器发送HTTP请求 →​ 服务器处理并返回HTML → 浏览器解析HTML生成DOM、解析CSS生成CSSOM → 合并成渲染树 → 布局（回流）计算位置大小 → 绘制像素 → 图层合成 → 页面展示