浏览器如何工作:引擎盖下的窥视

  • 时间:2018-11-03 23:13 作者:爱码农 来源:爱码农 阅读:1056
  • 扫一扫,手机访问
摘要:假如您正在为浏览器开发应用程序,那么理解浏览器的实际工作方式非常重要。请继续阅读以取得精彩的概述!在过去几年中,当Internet Explorer以90%的使用份额占据市场主导地位时,开发人员过去常常将IE视为一个黑盒子,除了查看呈现的代码外无其余操作。然而,现在是开源浏览器的时代。随着Firef

假如您正在为浏览器开发应用程序,那么理解浏览器的实际工作方式非常重要。请继续阅读以取得精彩的概述!

浏览器如何工作:引擎盖下的窥视

在过去几年中,当Internet Explorer以90%的使用份额占据市场主导地位时,开发人员过去常常将IE视为一个黑盒子,除了查看呈现的代码外无其余操作。然而,现在是开源浏览器的时代。随着Firefox和Chrome等浏览器覆盖超过50%的使用份额,开发人员很容易看到幕后发生的事情。简而言之,有数千行C ++代码。让我们简要理解浏览器的工作原理。

浏览器的结构

浏览器的主要组件是:

  1. 客户界面 - 包括前进和后退按钮,书签,地址栏等,以及显示所请求页面的窗口。
  2. 浏览器引擎 - 它命令渲染引擎和客户界面之间的操作。
  3. 渲染引擎 - 渲染引擎 的主要功能是显示请求的内容。例如,假如请求HTML内容,则引擎会解析CSS和HTML,并且在解析内容时,它会显示在屏幕上。
  4. 客户界面后台 - 可用于绘制窗口或者组合框等基本图像。后台仅公开通用平台独立接口。在其下方,操作系统使用客户界面方法。
  5. JS解释器 - 内置解释器解析和执行JavaScript和所有其余类型的脚本。
  6. 网络 - 执行HTTP请求和响应。
  7. 数据存储 - 所有类型的数据(如cookie)都由浏览器在本地保存。浏览器也支持WebSQL,FileSystem和localStorage等存储机制。
浏览器如何工作:引擎盖下的窥视

流程

网络层为呈现引擎提供所请求文档的内容。内容通常以每块大小约8kb的块传输。一旦发生这种情况,就会发生以下流程:

  • 内容树由呈现引擎创立,其中HTML元素被解析并转换为DOM节点。解析内部和外部CSS中的样式数据,并使用可视化信息和样式来创立渲染树。
  • 具备特定颜色和尺寸的矩形排列在渲染树中。它们的目的是以正确的顺序在屏幕上呈现。
  • 构建渲染树后,它将遵循布局过程,其中每个节点都被赋予准确的坐标,根据这些坐标,它们应显示在屏幕上。
  • 最后阶段是绘画。渲染树中的每个节点将根据UI后台层中编写的代码进行设计。绘画通常按以下顺序进行:
  • 首先分配背景颜色。
  • 紧接着是背景图像。
  • 边界已分配。
  • 孩子们堆积如山。
  • 页面大纲已创立。

渲染行业内发生的所有过程都是逐步发生的。然而,渲染引擎的工作是尽快在屏幕上显示内容以提供更好的客户体验。这就是为什么,它不是一次解析HTML并构建渲染树的内容,而是开始构建树的少量部分,而其余部分则在后台进行解析和构建。让我们详细理解布局,这是页面生命周期的复杂部分。

DOM和CSS对象模型构建

在渲染引擎的第一步中,解析HTML文档,并将解析后的元素转换为DOM树中的节点。树中的每个元素都表示为父节点,子节点包含在父节点中。

当浏览器正在解析HTML时,它面向“link”标记,该标记引用链接到页面的外部CSS。它估计需要链接来呈现整个页面。立即发送请求以解析CSS页面。

布局

在创立后将渲染器增加到树中时,它没有任何大小或者位置。布局是计算这些值的手段。

HTML使用基于流的布局模型。这意味着,在大多数情况下,布局只要一次完成。稍后放置在布局树中的元素不会影响先前放置的元素的几何。因而,布局可以以全向方式进行。尽管可能存在少量例外情况。表中需要屡次传递。

所有渲染器都包含一个布局方法,该方法通过帧层次结构中的子元素递归发生。在默认的HTML页面中,根渲染器放置在(0,0)坐标处,其尺寸用作可见的浏览器窗口的一部分,称为 视口

解决流程后跟布局:

  1. 渲染的Parent决定宽度。
  2. 它越过儿童并设置他们的水平和垂直坐标。
  3. 仅在需要时调用子布局。
  4. 父级使用子级的累积高度,边距和填充来计算其自身的高度,从而由层次结构中位于其上方的父级渲染器使用该高度。
  5. 脏渲染器的值设置为false。
  6. 假如您查看开发人员控制台,您会发现一个包含一系列矩形框的盒状结构,一个放在另一个框内。这是一个CSS框模型,它由容器组成,这些容器代表文档树中的元素,并按照视觉模型的方式布局。
  7. 每个框包含一个内容区域,可能包含也可能不包含附近的边框,填充,边距等。
浏览器如何工作:引擎盖下的窥视

绘画

在绘制中,paint() 调用该 方法以在组件上呈现UI基础结构,自己设置样式等。绘画可以全局发生,一次绘制整个渲染树,也可以按增量顺序进行,其中元素按上下文顺序堆叠。

当更改网页的任何自己设置样式时,浏览器将执行所需的最少操作数,由于任何小的更改都将导致重新绘制整个元素,并且布局将更改其位置并重新呈现整个树。

分层显示元素

元素的z-index属性会扣除元素放置在堆栈中的位置。在堆栈中,在后面对齐的元素首先被绘制,而具备更高z-index值的元素被排列在前面并且最后被绘制。这些堆栈通常有两种类型:

  • 具备z-index属性的容器或者框形成本地堆栈。
  • HTML的视口形成外部堆栈。

如今使用的浏览器大多是免费软件,功能齐全,不仅可以呈现和显示网页,还可以呈现Web应用程序。其中少量提供插件,允许客户获取多媒体相关信息。在使用开发人员控制台和构建交互式Web应用程序之前,清楚地理解浏览器的工作原理对Web开发人员非常有利,由于每个浏览器的开发方式都不同,因而呈现的方式不同。

这是网站在不同浏览器上看起来不同的主要起因。因而,有必要在所有浏览器上测试任何网站。

所以,理解浏览器,开发和测试!

快乐的开发和快乐的测试!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部