输入url到页面加载全过程

onebeautifulman

已于 2023-12-05 11:24:15 修改

阅读量1k

点赞数 1

分类专栏：网络编程文章标签：网络 java

于 2022-05-07 13:58:03 首次发布

本文链接：https://blog.csdn.net/onebeautifulman/article/details/124627214

版权

网络编程专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、DNS解析

DNS解析一般指域名解析，计算机在整个互联网中的唯一标识是ip地址，DNS解析就是从输入url到寻找注册的域名对应的ip地址的过程。在对域名进行解析的时候，能够首先用静态域名解析的办法，一旦静态域名解析失败，可以用动态域名解析的方式。

1.先在本地解析：浏览器缓存-->系统缓存-->查找本地host文件-->本地DNS服务器缓存

2.如果本地不存在，则去互联网域名服务器解析：根域名服务器-->顶级域名服务器-->权威域名服务器

2、TCP三次握手(浏览器根据 IP 地址向服务器发起 TCP 连接)，打开TCP连接

建立tcp连接就是三次握手，三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号

第一次：客户端=>服务端客户端向服务器端发送SYN=1,代表请求建立连接；还发送seq=n是客户端的序列号。

第二次：服务端=>客户端，服务端表名收到请求，发给客户端SYN=1,代表同意建立连接，ack=n+1，返回客户端序列号加1，代表确认收到信息，同时发送一个自己的序列号，seq=x代表服务端序列号。

第三次：客户端=>服务端客户端发送SYN=0表明开始发送信息，并返回ack = x+1确认收到服务端序列号，并发送seq = n+1

3、浏览器开始发送HTTP请求

当服务器与客户端建立了连接之后，下面客户端便与服务器进行通信。网页请求是一个单向请求的过程，即是一个客户端浏览器向服务器请求数据，服务器返回相应的数据的过程。浏览器根据 URL 内容生成 HTTP 请求，HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文；

4、服务器处理请求并返回HTTP报文

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

服务器状态码：

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。

具体状态码：

200 OK表示从客户端发来的请求在服务器端被正确处理。
301 Permanently Moved，永久重定向，被请求的资源已永久移动到新位置,新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found，临时重定向，请求的资源现在临时从不同的URL响应请求。
304 Not Modified 304状态码是告诉浏览器可以从缓存中获取所请求的资源。
400 bad request请求报文存在语法错误
403 forbidden表示对请求资源的访问被服务器拒绝
404 not found表示在服务器上没有找到请求的资源
500 internal sever error表示服务器端在执行请求时发生了错误
503 service unavailable表明服务器暂时处于超负载或正在停机维护，无法处理请求

响应报头： 常见的响应报头字段有: Server, Connection…

响应报文： 服务器返回给浏览器的文本信息，通常HTML, CSS, JS, 图片等文件就放在这一部分

5、浏览器解析渲染页面

渲染过程：

根据 HTML 结构生成 DOM 树
根据 CSS 生成 CSSOM
将 DOM 和 CSSOM 整合形成 RenderTree
根据 RenderTree 开始渲染和展示
遇到＜script＞时，会执行并阻塞渲染

详细过程：

浏览器已经拿到了 server 端返回的 HTML 内容，开始解析并渲染。最初拿到的内容就是一堆字符串，必须先结构化成计算机擅长处理的基本数据结构，这个内部结构就是 DOM，DOM 提供了对 HTML 文档的结构化表述。渲染进程通过分词器将html字节流成功成一个个 token，包括 Tag token 和文本 token。HTML 解析器维护了一个 token 栈结构，token 会按照对应顺序入栈出栈，然后将 token 解析成 DOM 节点，并将 DOM 节点添加进 DOM 树中。
解析过程中，如果遇到< link href =＂..＂＞和< script src =＂..＂＞这种外链加载 CSS 和 JS 的标签，浏览器会异步下载，下载过程和上文中下载 HTML 的流程一样。只不过，这里下载下来的字符串是 CSS 或者 JS 格式的。
渲染引擎在接受到 CSS 文本时，会将 CSS 生成 CSS对象模型CSSOM(即CSS Object Model) ，通过document.styleSheets可获取所有CSS样式表，然后将 styleSheet 中的属性值进行标准化操作。最后将 DOM 和 CSSOM 整合成 RenderTree ，然后针对 RenderTree 进行渲染。
最后，渲染过程中，如果遇到＜ script ＞就停止渲染，执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。待＜ script ＞内容执行完之后，浏览器继续渲染。

—— 为何要将 CSS 放在 HTML 头部？ —— 这样会让浏览器尽早拿到 CSS 尽早生成 CSSOM ，然后在解析 HTML 之后可一次性生成最终的RenderTree ，渲染一次即可。如果 CSS 放在 HTML 底部，会出现渲染卡顿的情况，影响性能和体验。

—— 为何要将 JS 放在 HTML 底部？—— JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外， JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行， JS 放在底部执行时， HTML 肯定都解析成了 DOM 结构。 JS 如果放在 HTML 顶部， JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。

6、TCP四次挥手，关闭TCP连接

前 2 次挥手用于关闭一个方向的数据通道，后两次挥手用于关闭另外一个方向的数据通道。

四次挥手原因:

TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。建立一个连接需要三次握手，而终止一个连接要经过四次挥手，这是由TCP的半关闭（half-close）造成的。所谓的半关闭，其实就是TCP提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力。

TCP是全双工模式，这就意味着，当客户端发出FIN报文段时，只是表示客户端已经没有数据要发送了，客户端告诉服务器，它的数据已经全部发送完毕了；但是，这个时候客户端还是可以接受来自服务端的数据；当服务端返回ACK报文段时，表示它已经知道客户端没有数据发送了，但是服务端还是可以发送数据到客户端的；当服务端也发送了FIN报文段时，这个时候就表示服务端也没有数据要发送了，就会告诉客户端，我也没有数据要发送了，之后彼此就会愉快的中断这次TCP连接。