台山手机浏览器如何显示网页源代码(现代浏览器引擎的构建之道)

原文地址: quantum up close : whatisabrowserengine? 原文:本文已经授权给原作者Potch的译文为:掘金翻译计划译者:土吃小二叉校对者: AceLeeWinnie、yzgyyang、薛定谔的猫2016年10月,Mozilla为Quantum项目33um 现在,这个项目走上了轨道。 事实上,上个月刚刚更新的Firefox 53首次包含了Quantum的部分核心代码。

但是,我发现,对于不从事浏览器开发的人来说,以及对于许多人来说,很难理解这些更改对Firefox的重要意义。 毕竟,许多改变对用户来说是看不见的。

注意到这件事之后,我们为了深入解读Quantum项目在做什么,开始写了一系列的博客文章。 这一系列文章希望能帮助大家了解Firefox的工作原理,以及Firefox如何构建新一代的浏览器引擎,更好地利用现代计算机的硬件性能。

作为这一系列文章的第一篇文章,最好说明一下Quantum在改变什么样的核心内容。

什么是浏览器引擎? 它的工作原理是什么?

那么,从一开始就说吧。

Web浏览器是一种首先加载文件,通常从远程服务器检索,在本地显示,并允许用户进行操作的软件。

Quantum是项目的代号,Mozilla启动这个项目是为了对Firefox浏览器的模块进行大幅度的升级,这个模块是浏览器基于远程文件向用户显示网页的方式这个模块的行业术语叫做“浏览器引擎”,如果没有浏览器引擎,用户只能查看网站的源代码,不能浏览网站。 Firefox的浏览器引擎是Gecko。

可以把浏览器引擎简单地想象成黑匣子(就像电视机一样),在流入数据后,黑匣子决定画面上显示的数据形态。 现在的问题是,浏览器引擎如何绘制页面? 用什么样的步骤将数据转换成我们正在看的页面?

359用户金牌- CDN.Xitu.IO/2017/5/17/038792 e 208 d 3747 EB A4 CAF 670973774 e https://用户金牌- CDN.Xitu.IO/2017

提供描述网页结构的代码样式的代码。 编写脚本代码,以控制网页结构的视觉外观,包括计算、交互操作和更改初始化网页的结构和样式。 浏览器引擎结合页面的结构和样式,在屏幕上渲染网页,以确定交互内容。

这一切都要从网页的结构开始。 浏览器根据指定的地址加载网站。 该地址指向另一台计算机,在收到访问请求时,将网页数据返回给浏览器。 这篇文章介绍了这个过程的具体实现。 无论如何,浏览器得到了web数据。 该数据以HTML格式返回,描述了网页的结构。 浏览器怎么读HTML呢?

浏览器引擎包含一个称为解析器的特殊模块,可以将数据从一种格式转换为另一种格式,然后保存在浏览器的内存中。 举个例子,HTML解析器得到了以下HTML的内容:

第二部分

H1等级=' main-title ' hello! /h1

img src=' http://Example.com/image.png '

/section于是,解析器开始解析、理解HTML。 接下来是解析器的独白。

嗯,这里有章。 本章有一级标题。 这个标题包含的文本内容是“Hello! ”。 此外,本章还有一张照片。 从这里获取该图像的数据: http://example.com/image.png

浏览器中网页的结构称为文档对象模型,也称为DOM。 DOM不是长文本格式,而是元素树格式来表示页面结构。 这包括每个元素的属性和元素之间的嵌套关系。

359用户金牌- CDN.Xitu.IO/2017/5/17/EAF 7e 75B 369 f 3038 CB 8C 35453 F6 D7 C0诊断握手协议排除浏览器根据数据类型指定相应的解析器进行处理。 脚本文件可以在分析HTML文件的同时更改页面的结构和样式。 样式规则,CSS在浏览器引擎中发挥以下作用。

关于样式

CSS是一种编程语言,开发人员可以使用CSS描述页面元素的外观。 CSS全名Cascading Style Sheets (译注:分层样式表),之所以这样命名,是因为多个CSS指令作用于同一元素,后面定义的指令能否覆盖前面定义的指令,而权重高的指令能否覆盖权重低的指令? 下面是一些CSS代码。

section {

字体大小: 15px;

颜色: # 333;

订单: 1px固态蓝色;

}

H1

字体大小: 2em;

}

.主-标题{

字体大小:毫米;

}

img {2}

width :百分之百;

}大多数CSS代码被划分为一个称为规则的组,每个规则包含两个部分。 其中一个是选择器,该选择器描述了DOM中必须应用样式的元素(请参见)。 另一组样式声明应用于与选择器匹配的元素。 浏览器引擎包含一个名为样式引擎的子系统,它接收CSS代码并将CSS规则应用于由HTML分析器生成的DOM。

359用户金牌- CDN.Xitu.IO/2017/5/17/CBC 1372 A4E B5 A1 AD 4404 B 541 B 16 EC 4F 33https://用户金牌- CDN.Xitu.IO/2017上这将匹配DOM中的所有section元素。 然后,浏览器引擎对DOM中的每个元素进行样式注释。 在样式最后应用于每个DOM元素之前,这种状态称为元素样式计算完成。 如果多个选择器作用于一个元素,则源代码顺序较低或较高的CSS规则最终将应用于该元素。 样式表是层叠的薄转印纸,可以认为上层复盖了下层,但同时也可以通过上层表示下层。

如果浏览器引擎计算了样式,以后会有用的! 布局引擎将继承DOM和计算出的样式,并考虑要绘制的布局所在的窗口大小。 布局引擎分析应用于该元素的所有样式,并使用各种算法在内容框中绘制每个元素。

359用户金牌- CDN.Xitu.IO/2017/5/17/0044636 AAC 9e 933 ECADC 53 B 5219 C6 EE 5https://用户金牌- CDN.Xitu.IO/2017此处布局中定义的每个内容框都是用来自DOM的内容和来自CSS的样式绘制的。 最终,用户看到的是从代码一步步重组的页面。

以上是以前的浏览器引擎进行的事情。

当用户滚动页面时,浏览器将重新绘制以显示所显示窗口之外的页面的内容。 但是,很明显用户喜欢滚动页面! 浏览器引擎清楚地意识到,自己一定会被要求展示初始窗口以外的内容(也称为视口)。 基于这一事实,现代浏览器在初始化页面时呈现的页面内容比视口中的要多。 用户滚动页面时,这部分用户想看的内容早就画出来了。 这样的好处是页面滚动更快更平滑。 该技术是网页合成的基础,合成是减少必要描绘量的技术术语。

此外,可能需要重新绘制某些页面的内容。 例如,用户可能正在观看每秒60帧的视频。 页面上可能有图像的轮播和滚动列表。 浏览器将检测页面上的哪些内容将移动或更新,并创建更新内容的新图层,而不是重新渲染整个页面。 一个页面可以由相互重叠的多个层组成。 可以更改每个图层的位置、滚动位置和透明度,也可以在不触发重绘的情况下控制图层的上下位置。 相当方便。

根据脚本和动画的不同,元素的样式可能会发生变化。 此时,样式引擎必须重新计算该元素的样式(也许还会重新计算页面上的许多其他元素),重新计算布局(生成一次回流),然后重新绘制整个页面。 虽然随着计算量的增加,这些操作需要更多的时间,但是只要发生频率较低,就不会对用户体验产生负面影响。

在现代web APP中,文档结构经常被脚本更改。 即使是一点点的更改,整个渲染过程也会触发HTML到DOM的分析、样式计算、回流和重新绘制。

359用户金牌- CDN.Xitu.IO/2017/5/17/9C 358 ED 0921 DE 2A 34F9 CD 5B AB 19EE2FC https://用户金牌- CDN.Xitu.IO/2017此处小的视觉差异很大,以致于用户无法在某些浏览器中正常浏览网站。 近年来,在现代互联网上,许多网站似乎在不同的浏览器中运行得很好。 我们也不关注用户具体使用的是哪个浏览器。 那么,如何通过浏览器获得这种程度的一致性体验呢?

网站代码的格式、代码解释规则和页面渲染规则由许多人公认的文件“Web标准”定义。 这些标准文档由浏览器制造商、Web开发人员和设计师等行业成员的代表组成的委员会创建。 他们一起确定了浏览器引擎应该针对给定的代码片段显示的明确行为。 Web标准包括HTML、CSS和JavaScript标准,以及图像、视频和音频等数据格式的标准。

为什么Web标准很重要? 因为如果符合Web标准,我们就可以开发新的浏览器引擎,处理互联网上数以亿计的网页,并呈现出与其他浏览器相同的结果。 这意味着只能在某些浏览器中使用的“秘密食谱”不再是秘密(译者注:例如,不需要CSS的专用前缀)。 另外,正因为有了Web标准,用户才能根据自己的喜好选择浏览器。

Web 标准

以前,人们只有台式电脑。 有一个比较保守的假设。 电脑只会变得更快更强大。 这个想法基于摩尔定律。 集成电路中能够容纳的部件数量约每两年增加一倍。 因此,半导体芯片的性能也将增加两倍,体积也将增加两倍。 难以置信的是,这种趋势一直持续到21世纪,有些人认为这个定律也适用于目前最先进的研究。 那么,为什么在过去的十年里计算机的平均运算速度似乎很稳定呢?

因为客户买电脑的时候,不是只考虑工作速度,而是速度快的电脑非常耗电,非常容易发热,非常昂贵。 人们有时想要续航时间好的笔记本电脑。 有时候,人们还想要小触摸屏的电脑。 有摄像头,小得可以放进口袋,电量是一天的量。计算能力的进步使这成为了可能(但是,其代价是运行速度的下降。 为了在赛车比赛中不能有效(或安全)控制行驶路线,也不能让计算机在进行过载计算的同时处理大量的任务。 目前的所有解决方案都使用单CPU多核。 因此,现在智能手机有四个小而弱的计算核心。

遗憾的是,过去的浏览器设计基于摩尔定律(性能提高)继续有效的假设。 另外,编写能够利用多核CPU的代码也极其复杂。 那么,在这个到处都有小型计算机的时代,我们该如何开发高速高效的浏览器呢?

我们已经想好了!

未来几个月,我们将关注Firefox的变化,以及这些变化如何更好地利用现代硬件,实现更快、更稳定的浏览器,使网站更加丰富。

皮虾,走吧!

掘金计划是一个翻译优秀的互联网技术文章以分享掘金英语文章的社区。 内容涵盖安卓、iOS、React、前端、后端、产品、设计等领域,如果想看到更多优质翻译,请持续关注掘金翻译计划。

Focus on the strength of the pithy专注极简的力量

PITHY CONTACT

一家没有销售的台州网站建设公司
我们特立独行

img/mail.png联系我们

PITHY CALL

如果您对我们的服务有什么疑问
欢迎来电咨询

电话
18868949445
img/top.svg
网站声明 | 隐私政策 | 网站地图 © 2018 MFweb. All rights reserved. Designed by台州网站制作台州网站设计公司台州网站建设公司