📌  相关文章
📜  当我们加载页面时 CSS 会发生什么?

📅  最后修改于: 2021-08-31 07:57:13             🧑  作者: Mango

尽管我们知道如何编写 HTML 和 CSS 的代码,但许多开发人员并不知道浏览器将如何处理 HTML 和 CSS。如果您不知道如何处理 HTML 和 CSS,请不要担心,我会在这里为您提供帮助。本文将帮助有抱负的开发人员和使用 Web 基础知识的开发人员巩固他们心中有信息的概念。阅读全文以获取知识。

什么是 HTML 和 CSS?

html 表示超文本标记语言,CSS 表示层叠样式表。简单来说,HTML 用于给出整个网页的结构,顺便说一下,网页的结构是指您现在在页面中看到的文字,而图像、CSS 包括样式是指 HTML 元素如何应该在页面上查看。


Css(级联样式表)在浏览器中加载时会发生什么[/caption]

什么是解析?:

解析只不过是将开发人员编写的代码处理为可视化格式。解析htmlCss意味着浏览器将如何处理它们以及如何在浏览器屏幕上以可视格式排列我们的代码。

现在我们将学习浏览器对html和css的处理和解析阶段。

  • 当用户请求网站时,浏览器将从服务器请求 HTML 文档,浏览器将加载 HTML 文档中的代码。

  • 在第二步中,浏览器将在处理代码的同时处理代码,它只会下载用于网页样式的图像和其他 CSS 文件,并且 CSS 代码也会加载到浏览器中。解析 HTML 文件时将下载 CSS 文件。

    DOM(文档对象模型)将由浏览器创建。 DOM 表示 HTML 文件中所有元素的引用。

  • CSS 的解析将分两步进行。

      这两个步骤是:

    • 在此步骤中,浏览器将从上到下扫描 css 文件,此处解决来自 CSS 级联规则的冲突。此处浏览器将创建应应用于 html 元素的最终属性的虚拟列表。

    • 在这一步中,浏览器将只为应用于 HTML 元素的属性分配最终计算值。这里最终的计算值将根据视口计算(意味着屏幕上浏览器的大小)。这里的最终值所有相对值都将转换为绝对值。

  • After Solving CSS 解析阶段的两大工作。之后浏览器将创建CSSOM 。 CSSOM 表示层叠样式表,对象模型。简单来说,CSSOM 就是最终在浏览器中呈现在用户面前的 HTML 元素应该应用的样式。

  • 在这一步中,浏览器将同时使用 DOM 和 CSSOM 并创建最终的渲染树。渲染树将包含所有 HTML 元素和样式。浏览器将采用该渲染树并将其提供给可视化格式工具。

    视觉格式化工具将创建页面的最终布局,该布局将创建我们的 HTML 和 CSS 代码的最终视觉版本。

  • 网站呈现。我们将看到我们在代码编辑器上编写的代码的最终呈现的网站视觉效果。