每当我们在浏览器的地址栏中输入网址(简称URL,统一资源定位器的英文缩写)时,我们都会对网页的外观着迷。
网站开发者需要知道里面发生了什么,数据如何成为对用户有吸引力的网页。
地址栏
假设您想要访问21CTO网站并在地址栏中输入“https://www.21cto.com/”,该地址栏是UI的一部分,它会在TCP/IP网络层进行通信。
UI(地址栏)连接到网络层
网络层检查缓存中的DNS记录以查找域名是“21cto.com”中对应的IP地址。
什么是缓存?
缓存是重复存储在计算机本地磁盘中某个位置的数据集合,使用它会更容易访问。
当我们在这里说的缓存,本质指的就是网页缓存。
什么是Web缓存?
Web缓存(或HTTP缓存)是用于临时存储(缓存)Web文档(如HTML和图像)的技术,以减少服务器返回延迟。例如,ETag标签或CDN。
四级缓存
四级缓存可用来帮助检查DNS记录以查找域名对应的IP地址。
什么是DNS?
域名系统(DNS)是一种分层的分布式命名系统,用于连接到互联网或专用网络的计算机,服务或其它资源。
我们来看下图是浏览器如何请求一张图片并检查四级缓存的:
1.浏览器缓存 - 检查浏览器维护其自己的DNS缓存。
2.操作系统缓存 - 当浏览器缓存不可用时,浏览器会对操作系统维护的DNS缓存信息进行系统调用。
3.路由器缓存 - 当浏览器和操作系统缓存不可用时,它将查找路由器缓存。
4.ISP缓存 - 当上述三个缓存都不可用时,ISP运营商的DNS服务器启动DNS查询以查找指向21cto.com的服务器的IP地址。
假设网络层与DNS记录搜索密切合作,找到相应的域名(21cto.com)对应之IP地址。
我们从DNS记录中找到IP地址以便进一步处理。接下来是发送请求并接收响应。
HTTP请求和响应
浏览器的网络层管理HTTP请求和响应。下图有助于我们了解如何发送和接收HTTP请求和响应。
浏览器通过IP地址向Web服务器发起TCP连接
1.TCP连接用于建立数据传输;
2.浏览器向Web服务器发送HTTP请求;
3.21CTO.COM的Web服务器返回一个HTTP响应给浏览器。
嘘~安静,还没完事。
我们刚刚获取到一个HTTP响应。现在可以看到下面的网络信息,我可以看到IP地址(120.76.52.180),这会有助于创建HTTP请求。
使用21CTO.COM网站的HTTPS端口(443)
响应内容类型是HTML,CSS和JavaScript。发送请求和接收响应的生命周期始终与所有各种响应相同,但是我们获得的每个响应都具有不同的内容类型。
上图中,可以看到21CTO的HTTPS重定向回了http。
以下是一系列各种响应,想象我们从网络层获得响应的阶段,并且尚未传递给浏览器引擎进行处理。
HTML的响应头
下面是每个网页的响应头,它实际上的内容类型是“text/html”网页。
用于HTML的浏览器响应头
图片响应头
以下是一个PNG图像的响应头,其内容类型为“image/png”。我闪可以使用不同的图像,如JPEG,它是“image/jpg”,GIF是“image/gif”,SVG是“image/svg+xml”,webp是image/webp等。
PNG图片的响应头
JavaScript响应头
以下是内容类型为“text/javascript”的JavaScript文件的Response Header。
JavaScript的响应头
CSS响应头
以下是样式表文件的响应标题,其内容类型为“text/css”。
CSS的响应头。
渲染引擎
浏览器用户代理接收到响应并将其传递给渲染引擎,渲染引擎也称为布局引擎。
什么是渲染引擎?
渲染引擎是一种在屏幕上绘制文本和图像的软件。引擎从文档(通常是HTML)中抽取结构化文本,并根据给定的样式声明(通常在CSS中给出)正确格式化文本。渲染引擎有几个内核,分别有Blink,Gecko,Edge以及WebKit几种。
关键渲染路径
我们来看一个HTML源文件的例子,它本质上其实就是一个纯文本文档。
渲染引擎解析标记文档,创建Well Formed文档,并构造名为DOM的对象;对于CSS文件,它创建CSSOM。
CSSOM与DOM树被合并为一棵树,被称之为“渲染树”。请看下图:
渲染DOM和CSSOM树 - 图片来源 https://developers.google.com。
渲染树具有DOM和CSSOM节点,这些节点是呈现网页所需的。布局根据设备的视口(称为“布局”阶段,也称为“重排”)查找每个要绘制网页对象的准确位置和大小。
形成渲染树
绘制页面
这是浏览器最后的动作,称为绘画/栅格化,其中来自渲染树的可见节点被转换为浏览器屏幕上的实际像素。
布局过程的输出称为盒子模型,其中添加了填充、边框和边距。
处理JavaScript
此处有一个特殊的响应,这是我们的超级英雄JavaScript,可以动态地做事,无论它是HTML还是CSS,或者两者兼而有之。这位兄弟都能很好地处理页面动作的脚本语言。
当存在JavaScript内容类型的响应时,它将被传送到浏览器的脚本引擎(这是一个解释器,以及在运行时执行任务的JIT编译器),它们会执行JavaScript代码,并且通过它,您可以访问DOM和CSSOM API并与其交互。
如果在特定的JavaScript文件中发现任何错误,它会在控制台或在页面抛出一系列错误。