【前端芝士树】从浏览器搜索框输入网址到网页呈现发生了什么？

【前端芝士树】从浏览器搜索框输入网址到网页呈现发生了什么？

这个也是在前端面试中问得比较多的一个问题了，文章篇幅有限尽可能关注一些前端开发中不太会遇到的知识点，如果想扩展的话请点击引用文章吧，也欢迎评论，后续会继续补充。

0. 大致流程

clipboard.png

看图的话更容易记一些， 下面将会基于这几个过程进行描述。

1. 浏览器输入Url

首先需要搞明白的是，域名和ip地址是不同的，域名是为了更方便记忆ip所产生的，ip才是服务器在网络上的真实地址。

IP地址是用来唯一标识互联网上计算机的逻辑地址，让电脑之间可以相互通信，每台连网计算机都依靠IP地址来互相区分，相互联系。IP地址通常指的是网络中的主机，而域名则通常表示一个网站，一个域名可以绑定到多个ip上，多个域名也可以绑定到一个ip上。

为了让域名和地址能够相互转换，就需要对其进行映射，有两种方式：

1. 静态映射 在浏览器端存储一份域名到ip地址的映射表，只供本设备使用。
2. 动态映射 利用DNS来进行域名解析，在专门的DNS服务器上配置主机到IP地址的映射。

DNS（Domain Name System，域名系统），万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。DNS协议运行在UDP协议之上，使用端口号53。DNS可供所有网络上的节点使用。

1.1 域名解析 && 浏览器查询ip的过程

1. 浏览器从缓存的映射表中寻找域名对应的记录，如果存在则直接返回IP
2. 缓存中如果没有记录命中，则进行系统调用查询hosts，查找用户定义的IP映射。
3. 前两者都无效的情况下， 向路由器发送DNS查询的请求，或者直接向用户定义的DNS服务地址发送域名解析的请求。

DNS服务器会从根域名服务器开始递归搜索，从.com顶级域名服务器，到baidu的域名服务器。

2. 建立TCP连接

TCP/IP协议 / 四层模型 / 三次握手

在 TCP/IP协议组 中包含一系列用于处理数据通信的协议：

• TCP (传输控制协议) - 应用程序之间通信
• UDP (用户数据包协议) - 应用程序之间的简单通信
• IP (网际协议) - 计算机之间的通信
• ICMP (因特网消息控制协议) - 针对错误和状态
• DHCP (动态主机配置协议) - 针对动态寻址
• ...

如图所示

clipboard.png

TCP / IP 协议组

• TCP/IP 意味着 TCP 和 IP 在一起协同工作。
• TCP 负责应用软件（比如你的浏览器）和网络软件之间的通信。
• IP 负责计算机之间的通信。
• TCP 负责将数据分割并装入 IP 包，然后在它们到达的时候重新组合它们。
• IP 负责将包发送至接受者。

在这其中需要着重了解一下的就是数据是如何进行处理的、TCP、IP以及TCP和UDP的区别。

数据处理流程

clipboard.png

TCP三次握手

clipboard.png

TCP与UDP的区别

• TCP 是面向连接的、可靠的流协议。流就是指不间断的数据结构，当应用程序采用 TCP 发送消息时，虽然可以保证发送的顺序，但还是犹如没有任何间隔的数据流发送给接收端。TCP 为提供可靠性传输，实行“顺序控制”或“重发控制”机制。此外还具备“流控制（流量控制）”、“拥塞控制”、提高网络利用率等众多功能。
• UDP 是不具有可靠性的数据报协议。细微的处理它会交给上层的应用去完成。在 UDP 的情况下，虽然可以确保发送消息的大小，却不能保证消息一定会到达。因此，应用有时会根据自己的需要进行重发处理。
• TCP 和 UDP 的优缺点无法简单地、绝对地去做比较：TCP 用于在传输层有必要实现可靠传输的情况；而在一方面，UDP 主要用于那些对高速传输和实时性有较高要求的通信或广播通信。TCP 和 UDP 应该根据应用的目的按需使用。

浏览器利用IP直接与网站主机通信。浏览器发出TCP（SYN标志位为1）连接请求，主机返回TCP（SYN，ACK标志位均为1）应答报文，浏览器收到应答报文发现ACK标志位为1，表示连接请求确认。浏览器返回TCP（）确认报文，主机收到确认报文，三次握手，TCP连接建立完成。

3. 服务器响应请求

在TCP连接建立完成后，浏览器向主机发起一个HTTP-GET方法报文请求。请求中包含访问的URL，也就是http://www.baidu.com/ ，还有User-Agent用户浏览器操作系统信息，编码等。

3.1 常见的服务器状态码

1** 请求状态

• 100 Continue 继续，一般在发送post请求时，已发送了http、header之后服务端将返回此信息，表示确认，之后发送具体参数信息

2** 响应状态

• 200 OK 正常返回信息
• 201 Created 请求成功并且服务器创建了新的资源

3** 资源状态

• 301 Moved Permanently 永久重定向，请求的网页已永久移动到新位置。

4** 网页状态

• 400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
• 404 Not Found 找不到如何与 URI 相匹配的资源。

5** 服务器状态

• 500 Internal Server Error 最常见的服务器端错误。

3.2 重定向的作用

重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力；重定向也可将多个域名的访问，集中到一个站点；由于baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每个的链接数都会减少从而降低排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提高排名。

4. 浏览器渲染呈现

浏览器拿到响应的页面代码，将其解析呈现在用户面前。 中间会涉及到浏览器的渲染步骤、JS引擎、渲染引擎、事件响应等知识点。

后续会继续补充，欢迎收藏和点赞。

参考文章 W3School - TCP/IP 简介 一篇文章带你熟悉 TCP/IP 协议（网络协议篇二）