|
每当我们在浏览器的地址栏中输入网址（简称URL，统一资源定位器的英文缩写）时，我们都会对网页的外观着迷。 网站开发者需要知道里面发生了什么，数据如何成为对用户有吸引力的网页。 地址栏 假设您想要访问21CTO网站并在地址栏中输入“https://www./”，该地址栏是UI的一部分，它会在TCP/IP网络层进行通信。 UI（地址栏）连接到网络层 网络层检查缓存中的DNS记录以查找域名是“”中对应的IP地址。 什么是缓存？ 缓存是重复存储在计算机本地磁盘中某个位置的数据集合，使用它会更容易访问。 当我们在这里说的缓存，本质指的就是网页缓存。 什么是Web缓存？ Web缓存（或HTTP缓存）是用于临时存储（缓存）Web文档（如HTML和图像）的技术，以减少服务器返回延迟。例如，ETag标签或CDN。 四级缓存 四级缓存可用来帮助检查DNS记录以查找域名对应的IP地址。 什么是DNS？ 域名系统（DNS）是一种分层的分布式命名系统，用于连接到互联网或专用网络的计算机，服务或其它资源。 我们来看下图是浏览器如何请求一张图片并检查四级缓存的： 1.浏览器缓存 - 检查浏览器维护其自己的DNS缓存。 2.操作系统缓存 - 当浏览器缓存不可用时，浏览器会对操作系统维护的DNS缓存信息进行系统调用。 3.路由器缓存 - 当浏览器和操作系统缓存不可用时，它将查找路由器缓存。 4.ISP缓存 - 当上述三个缓存都不可用时，ISP运营商的DNS服务器启动DNS查询以查找指向的服务器的IP地址。 假设网络层与DNS记录搜索密切合作，找到相应的域名（）对应之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文件中发现任何错误，它会在控制台或在页面抛出一系列错误。
是不是很酷？愉快地浏览吧！
|
|
|
