浏览器生命周期

一、浏览器打开一个网页，整个过程是怎么样的？

DNS解析

• 打开浏览器，输入请求的网址
• 查找DNS服务器，通过DNS服务器解析域名后，返回对应的IP地址

应用层

• 将浏览器发出的请求，遵循HTTP协议，打包成一个HTTP请求数据包

传输层

• 传输层配合应用层的HTTP协议，使用了TCP协议建立可靠连接
• TCP连接需要设置端口，发送方的端口随机选一个，接收方的端口一般默认的80端口
• 对HTTP请求数据包进行封装，加上TCP头部信息，存放端口号信息

网络层

• 通过IP协议，对TCP数据包进行封装，再加上一个IP头，包含本机和目标机器的IP地址

数据链路层

1. 要保证确实能传到接收方，还需要接收方的MAC地址，也就是物理地址
2. iP地址和MAC地址是对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的
3. 通过ARP协议可以将IP地址解析成对应的MAC地址
4. 通过以太网协议，会把IP头和IP数据包封到以太网数据包里去，然后再加一个以太网数据包的头，头里放了本机网卡MAC地址，和网卡的MAC地址。

二、浏览器的生命周期详解

 1、值得注意的是，在浏览器在发送网络请求时，首先会检查web缓存。什么是Web缓存？Web缓存(或HTTP缓存)是用于临时存储或缓存web文档，如html和图像的技术，以减少服务器的延迟，例如：Etag标签或CDN。

2、在根据域名查找IP地址的过程中，四级缓存可用来帮助检查DNS记录，以查找域名对应的IP地址。什么是DNS？它是一种分层的分布式命名系统。用于连接到互联网或专用网络的计算机。服务或者其他资源。先来看一下，浏览器是如何请求一张图片，并检查四级缓存的。

（1） 浏览器缓存：用于检查浏览器，他维护自己的DNS缓存

（2）操作系统缓存：当浏览器缓存不可用时，浏览器会对操作系统维护的DNS缓存信息进行系统调用

（3）路由器缓存：当浏览器和操作系统缓存不可用时，它将查找路由器缓存。

（4）ISP缓存：当上面的三个缓存都不可用时，ISP运营商的DNS服务器启动DNS查找指定域名服务器的IP地址。

3、HTTP请求和响应

从DNS记录中找到IP地址以便进一步处理，接下来是发送请求并接受响应：和Web服务器建立TCP连接、浏览器向Web服务器发送HTTP请求、Web服务器返回一个HTTP响应给浏览器。以下是一系列响应，并且还未传递给浏览器引擎进行处理。

HTML响应头:内容类型为text/html网页

图片响应头:image/png、image/jpg、image/gif等

JavaScript响应头: text/javascript

CSS响应头：text/css

4、渲染引擎 

经过请求，我们从网络层获得了相应的响应，但是还没有将返回的响应传递给浏览器的引擎进行渲染以及处理。渲染引擎它是一种在屏幕上绘制文本和图像的软件引擎，从文档中（通常是HTML）中抽取结构化文本，并根据给定的样式声明（通常在CSS中给出）正确格式化文本。引擎有几个内核：分别为Blink Gecko以及WebKit几种。

 

 （1）关键路径渲染_形成渲染树

渲染引擎解析标记文档，形成DOM树；对于CSS文档，创建CSSOM树。DOM树+CSSOM树被何合并为一颗树，形成“渲染树”。

 （2）布局

渲染数具有DOM和CSSOM节点，这些节点是呈现网页所需要的。布局根据设备的视口

查找每个要绘制网页对象的准确位置和大小。布局过程的输出称为盒子模型，其中添加了填充、边框和边距。

（3）绘制页面

渲染树形成完了之后，浏览器要执行页面的绘制，这是浏览器最后的动作，也叫做绘画/栅格化。在这个过程之中，来自渲染树中的可见的节点将会被转换为浏览器屏幕上的实际像素。

（4）处理JavaScript

返回响应中的javascript是一种特殊的一个响应，是处理页面动作的一种脚本语言。当存在这种类型的响应时，他们将会被传送到浏览器的脚本引擎，这是一个解释器，会执行JS脚本，并且通过它可以访问DOM和CSSOM API并与其交。

如果在执行JS文件之中发现任何的错误，在控制台或页面将会嗯抛出打印出一系列的错误。