前端-输入一个URL到网页呈现的过程

Ferries
159 阅读4分钟

1、DNS 域名解析

什么是DNS？

DNS全称Domain Name System,它是一个系统服务，用来将主机名和域名转换为IP地址的工作

image.png

DNS的具体过程

一、查看本地hosts文件有没有能对这个域名解析成IP地址的记录。
二、查看本地DNS服务器有没有能对这个域名解析成IP地址的记录。
三、本地DNS服务器向根域服务器发起DNS轮询。
    1、用户主机上运行DNS的客户端。
    2、浏览器从接受到的URL中抽取域名字段
         http://www.baidu.com/
    3、DNS客户端向DNS服务端发送一份查询报文
    4、收到DNS服务端发回的回答报文，其中包含这域名对应的IP地址
    5、一旦浏览器收到DNS返回的IP地址，就可以向该IP地址定位的HTTP服务器发起TCP连接

image.png

2、建立TCP/IP连接

建立TCP连接需要三次握手，为什么需要三次握手?

  • 我们假设client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。

  • 假设不采用三次握手，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。

  • TCP 三次握手跟现实生活中的人与人打电话是很类似的：

三次握手：  
“喂，你听得到吗？”  
“我听得到呀，你听得到我吗？”  
“我能听到你，今天 balabala……”

TCP 三次握手建立连接

  • 第一次握手：
    客户端将TCP报文标志位SYN置为1，随机产生一个序号值seq=J，保存在TCP首部的序列号(Sequence Number)字段里，指明客户端打算连接的服务器的端口，并将该数据包发送给服务器端，发送完毕后，客户端进入SYN_SENT状态，等待服务器端确认。
  • 第二次握手：
    服务器端收到数据包后由标志位SYN=1知道客户端请求建立连接，服务器端将TCP报文标志位SYN和ACK都置为1，ack=J+1，随机产生一个序号值seq=K，并将该数据包发送给客户端以确认连接请求，服务器端进入SYN_RCVD状态。
  • 第三次握手：
    客户端收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务器端，服务器端检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端和服务器端进入ESTABLISHED状态，完成三次握手，随后客户端与服务器端之间可以开始传输数据了。
image.png

3、浏览器通过TCP/IP连接向web服务器发送HTTP请求

浏览器构建http请求报文，并通过TCP协议传送到服务器指定端口，http请求报文包括三部分

请求行：指定http请求的方法、url、http协议版本等  
请求头：描述浏览器的相关信息，语言、编码等。
请求体：当发送POST, PUT等请求时，通常需要向服务器传递数据。这些数据就储存在请求正文中。

4、服务器处理http请求

远程服务器找到要请求的资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应

5、客户端页面渲染

当浏览器拿到资源数据后，便开始浏览器渲染引擎的基本渲染流程

image.png

不同浏览器的内核不一样，Safari和Chrome使用的是Webkit内核，主要说一下Webkit引擎渲染流程

1、渲染引擎先通过网络请求获得所请求的文档内容
2、解析HTML文件，构建DOM Tree
3、解析CSS文件，构建CSSOM Tree(CSS规则树)
4、将DOM Tree和CSSOM Tree合并，构建Render Tree(渲染树)
5、reflow(重排)：根据Render tree进行节点信息计算（Layout）  
6、repaint(重绘)：根据计算好的信息绘制整个页面（Painting**

image.png 注意: 以上五个步骤并不一定是一次完成，比如DOM或CSSOM被修改时，都需要重新渲染。这个过程是逐步完成的，为了更好的用户体验，渲染引擎尽可能早的将内容呈现到屏幕上，并不会等到将所有HTML都解析完再去构建和布局渲染树。

6、断开TCP连接

TCP连接释放的过程通常称为四次挥手

avatar
文章
阅读
粉丝