从浏览器地址栏输入URL到页面显示

总体可以分为以下几个步骤:

正题开始...

现在你在地址栏中输入:http://www.baidu.com

网络请求

浏览器会构建请求行:

1 2	//get请求路径是根路径 HTTP协议版本是1.0 GET / HTTP/ 1.0

如果命中强缓存,则直接使用,否则进入DNS解析
关于浏览器缓存相关参考《强缓存和协商缓存》

DNS解析的过程就是在寻找哪台机器上有你需要的资源的全过程当你在浏览器中输入一个网址时,将网址转换为IP地址的过程就叫DNS 解析
因为我们在浏览上输入的是一个域名,而数据包是要通过IP地址传送的给对方的,因此我们需要得到域名相应的IP地址,这个过程需要依赖于一个服务系统,这个系统将域名和IP一一映射,我们将这个系统叫 DNS(域名解析系统)
另外,浏览器提供了DNS数据缓存功能,即如果一个域名解析过了,那么会把解析结果缓存下来,下次直接走缓存,不需要经过DNS解析

TCP: 传输控制协议, 是一种面向连接的,可靠的,基于字节流的传输层通信协议

建立连接经历了下面三个阶段

通过三次握手(即通过发送3个数据包建立连接)建立客户端和服务端的连接
进行数据传输,通过数据包校验进行传输数据; 数据包校验: 发送方将数据发送给接收方,当接收方收到数据包后必须要向发送方发送一确认消息;如果发送方没有接收到这个确认消息,它就会认为丢包了,会再次发送这个数据包;在发送过程还有一个优化机制,即一个大的数据包,可以分段发送,分成一个个小包进行传输; 接收方接收到了之后按照发送顺序将这个包组成一个完整的数据包
断开连接阶段,数据完成传输,就要断开连接,通过4次挥手断开连接

所以,TCP通过三次握手确认连接,数据包的校验,保证数据到达接收方,四次挥手断开连接;以此来保证数据的可靠传输

现在 TCP连接 建立完毕,浏览器可以和服务器开始通信, 即开始发送 HTTP 请求, 浏览器发 HTTP 请求要携带三样东西: 请求行 , 请求头 和 请求体

首先浏览器会想服务器发送请求行,关于请求行,在第一步就已经构建完了,结构由:请求方式 ,请求路径 ,HTTP 版本组成
1
2
//get请求路径是根路径 HTTP协议版本是1.0
GET / HTTP/ 1.0
请求头, 请求头中包含了一些缓存标识,前端携带的token等等一些属性,如图(浏览器的一些请求头信息):
最后是请求体，请求体只有在POST方法下存在，常见的场景是表单提交。

HTTP 请求到达服务器,服务器进行对应的处理; 最后要把数据传给浏览器,即返回网络响应
跟请求部分类似,网络响应具有三个部分: 响应行 / 响应头 /响应体

值得注意的是:响应完成了,TCP不一定会断开连接,这时候要判断请求头或响应头中的 ``Connection` 字段,如果Connection:keep-alive 表示建立持久连接,这样TCP连接会一直保持,否则断开TCP连接,请求-响应流程结束

浏览器是个边渲染边解析的过程

首先浏览器会解析HTML文件构建DOM树,然后解析css文件构建渲染树,这两颗树建立完成后开始布局渲染树,并将其绘制到屏幕上,这个过程中,涉及到两个概念:reflow(回流) 和 repain(重绘)

DOM节点中各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其大小,位置等,当DOM树中,因为元素的尺寸,规模,布局时需要重新构建时,便称为回流,一个DOM树中,至少经历一次回流,就是页面初始化渲染时

当DOM树中一些元素需要更新属性,而这些属性只是影响元素的外观,风格,不影响元素的布局时,称为重绘,比如:修改background-color,这就叫重绘

页面在首次加载时,必然会经历回流和重绘,回流和重绘的过程是非常消耗性能的,它会造成页面的卡顿,所以,我们应该尽可能得减少回流和重绘