浏览器工作原理 + Hosting简述丨学习记录

Conqueror712
77 阅读10分钟

零、前言

本文记录了笔者在完善浏览器的工作原理和Hosting的基础知识的过程，

若笔者有任何疏忽纰漏之处，烦请不吝赐教。

特别说明：由于这部分内容既是前端的基础知识又是后端的基础知识，而笔者主要的方向是后端，故分类于此。

本文会不断的补充、修改和完善，期待您的宝贵意见。

一、浏览器的工作原理简述

0. 概述Overview：

Web性能的两个主要问题：

  1. 与延迟有关的问题
  2. 与大多数情况下浏览器是单线程的事实有关的问题

延迟是影响我们确保快速加载页面的能力的最大威胁。

对于流畅的交互，开发人员的目标是确保高性能的网站交互，从平滑滚动到响应触摸。渲染时间是关键，要确保主线程能够完成我们投入的所有工作，并且仍然始终可用于处理用户交互。通过了解浏览器的单线程性质并在可能和适当的情况下最小化主线程的职责，可以提高 Web 性能，以确保呈现流畅和对交互的即时响应。

avatar

1. 导航Navigation：

导航是加载网页的第一步；

每当用户通过在地址栏中输入 URL、单击链接、提交表单以及其他操作来请求页面时，就是导航。

Web 性能的目标之一是最大程度地减少完成导航所需的时间。

域名解析查找DNS Lookup：

那么怎么进行导航呢？

  1. 浏览器缓存：首先检查浏览器的DNS缓存，看看是否有缓存的域名解析结果。
  2. 系统缓存：如果浏览器缓存没有结果，系统将检查操作系统的DNS缓存。
  3. 路由器缓存：如果系统缓存没有结果，路由器也会检查其DNS缓存。
  4. 本地DNS服务器：如果路由器缓存没有结果，系统将询问本地DNS服务器，看看它是否已经缓存了域名解析结果。
  5. 根DNS服务器：如果本地DNS服务器没有结果，它将询问根DNS服务器，试图获得域名的解析。
  6. 授权DNS服务器：根DNS服务器会向授权DNS服务器查询，以获取更详细的域名解析信息。
  7. 权威DNS服务器：最后，授权DNS服务器将询问权威DNS服务器，以确定该域名的IP地址。
  8. 缓存结果：找到的结果将被缓存，以便在将来不必再次查询。

avatar

TCP三次握手：

一旦知道 IP 地址，浏览器就会通过 TCP 三向握手建立与服务器的连接。

TCP的三向握手技术通常被称为“SYN-SYN-ACK”（或更准确地说是SYN，SYN-ACK，ACK）。

TCP三次握手是一种网络协议中的握手过程，主要用于确保客户端与服务器之间的可靠通信。步骤如下：

  1. 客户端发送一个SYN（Synchronize）请求报文到服务器，请求建立一个连接。
  2. 服务器收到SYN请求后，回应一个SYN-ACK（Synchronize-Acknowledge）报文，表示同意建立连接。
  3. 客户端收到SYN-ACK报文后，再发送一个ACK（Acknowledge）报文，确认连接建立完成。

完成三次握手后，客户端与服务器间的连接就建立成功。这样可以确保两端在建立连接前，已经确认了对方的可用性，避免了网络中的垃圾数据或攻击行为。

TLS协商：

对于通过HTTPS建立的安全连接，需要再次“握手”。

这种握手，或者更确切地说是TLS协商，确定将使用哪种密码来加密通信，验证服务器，并在开始实际数据传输之前建立安全连接。这需要在实际发送内容请求之前再往返服务器三次。

虽然使连接安全会增加页面加载时间，但安全连接值得延迟费用，因为浏览器和 Web 服务器之间传输的数据无法被第三方解密。

TLS协商的过程一般包括以下步骤：

  1. 客户端发送"Client Hello"报文给服务器，其中包含了客户端支持的加密协议、会话ID、随机数等信息。
  2. 服务器收到"Client Hello"报文后，会回复"Server Hello"报文给客户端，其中包含了服务器选择的加密协议、会话ID、随机数等信息。
  3. 客户端和服务器通过协商后确定的加密协议进行密钥交换，以确定本次通信的密钥。
  4. 双方确认协商结果后，通信开始加密传输数据。

TLS协商的过程确保了客户端和服务器之间的通信是安全的，防止了数据在传输过程中的泄露和篡改。

avatar

2. 响应Response：

现在，导航已经结束了，来到了响应的阶段。

一旦我们与 Web 服务器建立了连接，浏览器就会代表用户发送初始 HTTP-GET 请求，

对于网站来说，该请求通常是 HTML 文件。一旦服务器收到请求，它将回复相关的响应标头和HTML的内容。

例如：

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>My simple page</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="myscript.js"></script>
  </head>
  <body>
    <h1 class="heading">My Page</h1>
    <p>A paragraph with a <a href="https://example.com/about">link</a></p>
    <div>
      <img src="myimage.jpg" alt="image description" />
    </div>
    <script src="anotherscript.js"></script>
  </body>
</html>

HTTP请求方法：

  • GET 该方法请求指定资源的表示形式。使用的请求应仅检索数据。
  • HEAD 该方法请求与请求相同的响应，但没有响应正文。
  • POST 该方法将实体提交到指定的资源，这通常会导致服务器的状态更改或副作用。
  • PUT 该方法将目标资源的所有当前表示形式替换为请求有效负载。
  • DELETE 该方法删除指定的资源。
  • CONNECT 该方法建立到目标资源标识的服务器的隧道。
  • OPTIONS 该方法描述目标资源的通信选项。
  • TRACE 该方法沿目标资源的路径执行消息环回测试。
  • PATCH 该方法对资源应用部分修改。

TCP慢启动 / 14KB规则：

TCP 慢启动有助于提高网络能力的传输速度。

TCP 慢启动是一种算法，用于检测数据包传输的可用带宽，并平衡网络连接的速度。

它可以防止出现最初功能未知的网络拥塞，并缓慢增加扩散的信息量，直到找到网络的最大容量。

第一个响应数据包将为 14KB。这是TCP慢启动的一部分，这是一种平衡网络连接速度的算法。

慢启动会逐渐增加传输的数据量，直到确定网络的最大带宽。

在TCP慢启动中，在收到初始数据包后，服务器将下一个数据包的大小加倍至28KB左右。后续数据包的大小会增加，直到达到预定阈值或遇到拥塞。

大概可以理解为逐步试探的倍增过程。

拥塞控制：

当服务器以 TCP 数据包的形式发送数据时，用户的客户端通过返回确认或 ACK 来确认传递。

连接的容量有限，具体取决于硬件和网络条件。如果服务器发送太多数据包太快，它们将被丢弃。

服务器将其注册为缺少的 ACK。拥塞控制算法使用已发送数据包和 ACK 的此流来确定发送速率。

解析Parsing：

一旦浏览器收到第一个数据块，它就可以开始解析收到的信息。

解析意味着分析程序并将其转换为运行时环境可以实际运行的内部格式，例如浏览器中的 JavaScript 引擎。

解析是浏览器将它通过网络接收的数据转换为 DOM 和 CSSOM 的步骤，渲染器使用它来将页面绘制到屏幕上。

具体来说：

浏览器将 HTML 解析为 DOM 树。HTML 解析涉及标记化和树构造。HTML 标记包括开始和结束标记，以及属性名称和值。如果文档格式正确，则解析它既简单又快速。解析器将标记化的输入解析到文档中，从而构建文档树。

当 HTML 解析器找到非阻塞资源（如图像）时，浏览器将请求这些资源并继续解析。遇到 CSS 文件时，解析可以继续，但标记（尤其是那些没有异步或属性的标记）会阻止呈现，并暂停 HTML 解析。<script>defer

当浏览器遇到 CSS 样式时，它会将文本解析为 CSS 对象模型（或 CSSOM），这是一种数据结构，然后用于样式布局和绘画。然后，浏览器从这两种结构创建一个呈现树，以便能够将内容绘制到屏幕上。JavaScript 也会被下载、解析，然后执行。

构建DOM树：

DOM 树描述文档的内容。 元素是文档树的第一个标记和根节点。

树反映了不同标签之间的关系和层次结构。嵌套在其他标签中的标签是子节点。

DOM 节点的数量越多，构建 DOM 树所需的时间就越长。

avatar

预加载扫描仪Preload Scanner：

当浏览器构建 DOM 树时，此过程占用主线程。

发生这种情况时，预加载扫描程序将解析可用内容并请求高优先级资源，如 CSS、JavaScript 和 Web 字体。

多亏了预加载扫描程序，我们不必等到解析器找到对外部资源的引用来请求它。

它将在后台检索资源，以便在主 HTML 解析器到达请求的资产时，它们可能已经在运行中，或者已被下载。预加载扫查器提供的优化可减少阻塞。

例如：

<link rel="stylesheet" href="styles.css" />
<script src="myscript.js" async></script>
<img src="myimage.jpg" alt="image description" />
<script src="anotherscript.js" async></script>

在此示例中，当主线程解析 HTML 和 CSS 时，预加载扫描程序将找到脚本和图像，并开始下载它们。若要确保脚本不会阻止进程，请添加属性，或者如果 JavaScript 解析和执行顺序很重要，请添加属性。

构建CSSOM树：

关键呈现路径中的第二步是处理 CSS 并构建 CSSOM 树。

CSS 对象模型类似于 DOM。DOM 和 CSSOM 都是树。它们是独立的数据结构。

浏览器将 CSS 规则转换为它可以理解和使用的样式映射。浏览器遍历 CSS 中的每个规则集，根据 CSS 选择器创建具有父、子和同级关系的节点树。

avatar

除此之外，还有一些内容例如JavaScript编译和构建辅助功能树等等，这里不展开叙述。

渲染Render

接下来是渲染部分，以下是四个比较重要的内容：

Style

关键渲染路径中的第三步是将 DOM 和 CSSOM 组合到渲染树中。计算样式树或渲染树的构造从 DOM 树的根开始，遍历每个可见节点。

Layout

关键渲染路径中的第四步是在渲染树上运行布局，以计算每个节点的几何体。布局是确定呈现树中所有节点的宽度、高度和位置的过程，也是确定页面上每个对象的大小和位置的过程。重排是页面任何部分或整个文档的任何后续大小和位置确定。

Paint

关键渲染路径的最后一步是将各个节点绘制到屏幕上，第一次出现称为第一次有意义的绘制。在绘画或光栅化阶段，浏览器将布局阶段计算的每个框转换为屏幕上的实际像素。绘画涉及将元素的每个视觉部分绘制到屏幕上，包括文本、颜色、边框、阴影以及按钮和图像等替换元素。浏览器需要非常快速地完成此操作。

Compositing

一旦主线程完成页面绘制，你会认为我们会“一切就绪”。事实未必如此。如果加载包含 JavaScript，该 JavaScript 已正确延迟，并且仅在 onload 事件触发后执行，则主线程可能繁忙，并且不可用于滚动、触摸和其他交互。

到这一步，浏览器的工作基本上就算是完成了。

二、Hosting

0. 概述Overview：

Hosting是指将网站存储在服务器上，以便全球用户通过互联网访问该网站的服务。它包括：

  1. 服务器租赁：为网站提供存储空间和带宽
  2. 网络架构：确保网站可以连接到互联网
  3. 技术支持：协助解决网站运行问题
  4. 网站维护：保证服务器性能和安全性

有多种不同的Hosting服务，如共享Hosting，虚拟专用服务器（VPS）和独立专用服务器（Dedicated Server）。

根据网站的需求，个人或企业可以选择合适的Hosting服务。

1. Hosting细节：

  1. 备份：一些Hosting提供商提供定期备份功能，以确保数据安全
  2. 安全：保护网站免受黑客攻击，提供SSL证书等安全功能是一项重要的任务
  3. 可扩展性：随着网站的发展，需要更多的存储空间和带宽，因此要选择可扩展的Hosting服务
  4. 性能：网站速度和可用性对用户体验有很大影响，因此要选择高性能的Hosting服务
  5. 技术支持：良好的技术支持是网站运行的重要保证，选择提供全天候技术支持的Hosting提供商是一个好选择。
avatar
文章
阅读
粉丝