作为一个人，当你在纸上写一个文档，或者让我们说打印一份报纸时，你会看到标题和它下面故事的某些部分，以及指向另一页上剩余故事的链接。一些头条新闻下面会有完整的故事。您会看到段落中断到一条新线，它们之间有空间。您可以在页面的不同位置看到不同的颜色、图像。您会看到不同的图像大小、不同的字体和字体大小。但是，当你阅读时，你知道哪个是头线，这是不同的子导航页面，如体育页面，电影页面，分类页面。你是人，你能够认出什么是什么。

那么，我们如何帮助计算机也这样做呢？

所有的网页主要是文本或图像。您的 Web 浏览器是软件应用程序，可以显示/读取文本并识别什么是什么，**只有当您的文本正确。Mark

那么，如何标记文本，以便浏览器可以区分哪个文本是什么？

这里来了HTML-超文本标记语言，这是由不同的元素组成。当您将这些元素应用到文本中时，该文本将在文档中获得意义。这些元素在应用于某些文本时，可以给出不同的含义，如标题、段落、断线、表、列表、导航栏、文章、标题、脚、链接等。

但是盲人呢？这些不同能力的人将使用大多数设备支持的屏幕读取器或辅助功能。您的网络浏览器也支持。即使是您的 iOS/Android 设备，请检查您的设置以了解此辅助功能。

本地化也是如此，因为每个读者都不会阅读您的语言，也不限于语言转换。

这些 HTML 元素将为这些屏幕读取器提供其他信息。

“HTML 是构建文本文件的标记语言。这是为网络。

XML 是另一种标记语言，它是一种数据描述语言。XML 允许用户定义自己的标签。此功能使其更强大，可用于更多其他应用程序，如

  • SVG基于XML
  • 网络服务
  • 数学

如果您想通过添加颜色、样式或动画在视觉上向用户展示您的标记文本，则需要声明性语言帮助，这是一种基于规则的语言。CSS (Cascading Style Sheets)

  • CSS 规则是与选择器关联的一组属性。
  • “级联"是指管理选择器如何优先更改页面外观的规则。

声明性语言 - 做什么

  • 你告诉你的司机，只是你想去哪里的房子地址
  • 前：HTML、XML、CSS、杰森、平方米。
  • 前： 项目经理 - 告诉 - 该怎么做

势在必行的语言 - 如何做

  • 你告诉你的车司机，街道方向，直到你想去哪里的房子地址
  • 前： C， C++， C #， 爪哇， 爪哇脚本， 斯卡拉， Python 。
  • 前： 开发人员 - 弄清楚 - 如何做

因此，一个声明程序将执行势在必行的程序。

就像定义 Web 标准的 W3C 一样，CSS 标准由 W3C 内的CSS 工作组完成。

好的，所以CSS可以用来设计HTML。你猜怎么着？ 你甚至可以风格其他标记语言，如XML，SVG， 数学与CSS。

Web 标准是一个正在进行的工作文档，不断更新。您最喜爱的浏览器将继续实施这些标准，并不断发布新版本的更新。下图仅用于插图。

Screenshot 2020-12-18 at 18.45.46.png 所有浏览器都可能处于相同的实现状态。因此，如果您正在使用元素/属性，则有可能在一个浏览器中工作，并且可能无法在不同的浏览器中工作。

您的浏览器具有不同的功能，它能够做到这一点，但主要是与 Web 服务器通信，并在浏览器窗口上显示（或渲染）。

那么，浏览器引擎内会发生什么情况？

Screenshot 2020-12-19 at 17.40.38.png

浏览器引擎是浏览器的核心。它与渲染发动机和 JavaScript 发动机紧密集成。因此，浏览器引擎共同负责实施 Web 标准、DOM/CSS 对对象模型的解析、计算样式、布局、绘制图形、从网络堆栈中请求资源等。

一些流行的浏览器引擎 - 网络基特，闪烁，壁虎

一些流行的爪哇脚本引擎 - 爪哇脚本核心， V8， 蜘蛛猴子

谷歌铬使用闪烁， V8 。

当我们谈到对象时，它到底是什么？如果您听说过面向对象的编程，或者您来自 Java/C++背景，则可以轻松地进行关联。

因此，在这里，我们有这些HTML元素和CSS选择器。

一旦这些元素/选择器加载到内存（解析为令牌，节点），浏览器提供使用该信息和关联样式元素创建渲染树，然后创建布局，告诉哪个对象占据坐标及其属性，然后相应地绘制（渲染）屏幕供您查看。

浏览器允许我们创建这些元素/选择器引用（称为对象）的副本，我们可以使用这些副本以编程方式与它们交互，如读取或写入段落或标题，以及更多内容。

HTML 转换为树。CSS 转换为"树”。DOM``````CSSOM

DOM - 用于HTML的文档对象模型。（你知道网页是一个文档，右）-是一组API，允许从JavaScript操纵HTML

CSSOM - CSS 对象模型 CSS - 是一组允许从 JavaScript 操作 CSS 的 ABI。

WebAPI-DOM，CSSOM是浏览器提供的许多其他API中的2个。

渲染引擎

Screenshot 2020-12-19 at 19.12.04.png

渲染引擎将解析 HTML 和 CSS 文档。解析是根据语言词汇和代币创建完成的。创建适用于代币和节点的语法规则。

转换为对象的代币在树数据结构中链接，每个数据结构分别用于 DOM 和 CSSOM。浏览器将使用此对象模型进行所有进一步处理。

Screenshot 2020-12-19 at 17.15.11.png

Screenshot 2020-12-19 at 17.15.24.png

浏览器块渲染，直到它同时具有DOM和CSSOM。CSS 媒体类型和媒体查询允许我们在构建 CSSOM 作为页面下载时取消阻止渲染。

<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">``` 

浏览器将 DOM、CSSOM 合并为渲染树，它捕获页面的所有可见内容，每个节点的所有样式信息。

[![Screenshot 2020-12-19 at 17.20.00.png](https://res.cloudinary.com/practicaldev/image/fetch/s--w0idKXRX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1608378624052/JFSvQmJ5p.png)](https://zshipu.com/t?url=https://res.cloudinary.com/practicaldev/image/fetch/s--w0idKXRX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1608378624052/JFSvQmJ5p.png)

从渲染树，浏览器进入布局创建阶段，其中它计算浏览器窗口中每个对象的确切位置和大小（像素）。

<font _mstmutation="1" _msthash="292071" _msttexthash="195103441">布局完成后，浏览器问题和事件将渲染树转换为屏幕上的像素。</font>```Paint Setup``````Paint```

JavaScript 写在身体的末尾主要是因为， JavaScript 执行是解析器阻止。浏览器必须暂停 DOM 构建并将控制移交给 JavaScript 运行时间，并让脚本执行，然后再进行 DOM 构建。

有关详细信息，Google 中有很多素材。

希望这篇文章能像对我一样帮助你获得一些知识。