首页
学习
活动
专区
工具
TVP
发布

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

欢迎大家与我一起来探索科技!让我们走在科技的最前沿。小编已经把最精彩的内容写在下边,请您耐心的把文章阅读完可以吗?您的阅读就是我坚持创作的动力!此外,满足小编一个小小的请求好吗?帮忙点点关注,阅读完文章别忘了留下您宝贵的意见!好吧,我们现在开始一起探索吧!

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

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

浏览器的结构

浏览器的主要组件是:

用户界面 - 包括前进和后退按钮,书签,地址栏等,以及显示所请求页面的窗口。

浏览器引擎 - 它命令渲染引擎和用户界面之间的操作。

渲染引擎 - 渲染引擎 的主要功能是显示请求的内容。例如,如果请求HTML内容,则引擎会解析CSS和HTML,并且在解析内容时,它会显示在屏幕上。

用户界面后端 - 可用于绘制窗口或组合框等基本图像。后端仅公开通用平台独立接口。在其下方,操作系统使用用户界面方法。

JS解释器 - 内置解释器解析和执行JavaScript和所有其他类型的脚本。

网络 - 执行HTTP请求和响应。

数据存储 - 所有类型的数据(如cookie)都由浏览器在本地保存。浏览器也支持WebSQL,FileSystem和localStorage等存储机制。

流程

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

内容树由呈现引擎创建,其中HTML元素被解析并转换为DOM节点。解析内部和外部CSS中的样式数据,并使用可视化信息和样式来创建渲染树。

具有特定颜色和尺寸的矩形排列在渲染树中。它们的目的是以正确的顺序在屏幕上呈现。

构建渲染树后,它将遵循布局过程,其中每个节点都被赋予精确的坐标,根据这些坐标,它们应显示在屏幕上。

最后阶段是绘画。渲染树中的每个节点将根据UI后端层中编写的代码进行设计。绘画通常按以下顺序进行:

首先分配背景颜色。

紧接着是背景图像。

边界已分配。

孩子们堆积如山。

页面大纲已创建。

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

DOM和CSS对象模型构建

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

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

布局

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

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

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

处理流程后跟布局:

渲染的Parent决定宽度。

它越过儿童并设置他们的水平和垂直坐标。

仅在需要时调用子布局。

父级使用子级的累积高度,边距和填充来计算其自身的高度,从而由层次结构中位于其上方的父级渲染器使用该高度。

脏渲染器的值设置为false。

如果您查看开发人员控制台,您会发现一个包含一系列矩形框的盒状结构,一个放在另一个框内。这是一个CSS框模型,它由容器组成,这些容器代表文档树中的元素,并按照视觉模型的方式布局。

每个框包含一个内容区域,可能包含也可能不包含周围的边框,填充,边距等。

绘画

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

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

分层显示元素

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

具有z-index属性的容器或框形成本地堆栈。

HTML的视口形成外部堆栈。

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

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

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

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

非常感谢各位看官能在百忙之中阅读小编的文章,您们的阅读和评论是小编继续坚持创作的动力。你们的每一个评论,小编都会去非常认真的去阅读,你们提出的宝贵意见我也会虚心接受,争取每天都为大家带来更多的优质文章。让大家不但可以增长见识,还可以有个好的心情。希望您能喜欢小编的文章!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181103A0BCNG00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券