html edge浏览器 图片,浏览器时序图及 Microsoft Edge 构架

本文又是我的作业,完成思路借鉴了 版权说明。

作业要求针对一款典型浏览器,绘制浏览器处理时序图对用户界面进行操作(如拖拽窗口)

带有 JavaScript 脚本 HTML 文档

查阅资料,绘制 Edge 浏览器的参考架构

浏览器时序图

对用户界面进行操作(如拖拽窗口)

在这里我使用 Chrome 浏览器访问我个人博客,我的博客使用了响应式布局,在这我已经加载好了我的网页,然后使用 Chrome 的性能工具录制了我拖拽窗口的过程,并对此进行分析。

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

可以到在这个过程中 Chrome 并没有向网络栈请求资源,涉及到的只有内核部分的渲染,具体过程是 Recaculate Style – Layout – Update Layer Tree – Paint – Update Layer Tree – Paint – Composite Layers。所以该操作时序图如下:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

带有 JavaScript 脚本 HTML 文档

其时序图如下:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

浏览器基本结构

首先我们复习下上课说的浏览器的基本结构,由于课件版权问题,我就自己画一个:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

大致来说,浏览器分为八个部分:用户界面:与用户交互、接受用户操作、 展现浏览器当前状态。

浏览器引擎:一个可嵌入的组件,提供查询和操作渲染引擎的高层接口(加载、刷新、后退、 错误信息等),其使渲染引擎平台无关,提高可移植性。

渲染引擎:浏览器的核心部分

解析 HTML 文档和 CSS 描述

依据 CSS,完成 HTML 布局

网络:提供网络相关的功能,如协议解析、网络 I/O 等。

JavaScript 解释器:解析并执行 JavaScript 代码,结果返回给渲染引擎。

渲染

XML 解析器:解析XML文档。

用户界面后端:提供绘制、窗口原语和字体等。

数据存储:存储书签、Cookie、缓存等各种数据到硬盘上。

Edge 浏览器的参考架构

首先我们来完成这一部分,参考 Chrome 的架构,基本上我们把每个部分所使用的模块找出来即可。

于是我们很容易可以查找 Microsoft Edge 的渲染引擎是

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

接下来我们从网上可以搜到 Edge 的 JavaScript 解释器是和 ie 同名的 于是默念一遍 M$ 大法好。

接下来,我就找不到任何信息了,为了完成作业,我找遍了各种英文资料、微软官方文档,可一无所获,但最后发现了

首先我们还是从 Process Explorer 中入手,查看 MicrosoftEdgecp.exe 调用的 .dll,我将整个列表截图如下:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

在这里我们可以发现一个叫 EdgeContent.dll 的库,猜测这应该就是 Edge 的浏览器引擎。

于是我们绘制 Edge 浏览器的结构图如下:

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=

参考

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261008.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

您需要了解的跨阻放大器——第1部分

跨阻放大器(TIA)是光学传感器(如光电二极管)的前端放大器,用于将传感器的输出电流转换为电压。跨阻放大器的概念很简单,即运算放大器(op amp)两端的反馈电阻(RF&#xff…

Objective-C组合模式(Composite)

什么是组合模式? 官方:将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使用户使用单独对象和组合对象具有一致性。 个人理解:组合模式就相当于一个大家族,每个人都是家族中的一部分,整个家族就…

WP7应用开发笔记(3) 界面设计

界面设计 回顾一下按钮清单: 播放控制播放/暂停Space 停止F4 快进Right 快退Left 快进X2ControlRight 快退X2ControlLeft 快进X3AltRight 快退X3AltLeft音量放大Up 缩小Down 静音M节目下一个PageDown 上一个PageUp基本上就是把这些按钮布置到480*800的屏幕上。 快进…

html手机显示评论列表页面,请问如何完美显示评论列表头像

目前具体思路是通过轮询构建头像,条件是通过判断评论区条目length。问题是有时依然无法显示评论区头像。以下是目前的代码:function showAvatar() {$(.feedbackItem).each(function() {let avatar $(this).children(.feedbackCon).children(span:last).…

几何画板中可以这样选择对象

在使用几何画板过程中,一些用户朋友发现几何画板虽然是在Windows平台上运行的软件,但它选择对象的选择方式常常与一般的Windows绘图软件是有一些差别的,下面将通过详细的讲解,让大家对几何画板选择对象方法有比较系统全面的了解。…

菜鸟做HTML5小游戏 - 刮刮乐

继上篇翻翻乐之后,又来刮刮乐。还是先上效果图: 开始demo的世界: 1.css去绘制界面效果。(源码提供) 2.原理:要实现刮刮卡内容的出现,我用div做了背景层去显示刮出的内容结果【重点】。中间Canva…

1 计算机主机里面都有些什么东西,计算机主机和外设分别包括那些东西?

___耐撕Nice___的回答:1、主机是指计算机除去输入输出设备以外的主要机体部分。也是用于放置主板及其他主要部件的控制箱体(容器Mainframe)。通常包括 CPU、内存、主板、光驱、电源、以及其他输入输出控制器和接口。在网络技术中是关于发送与接收信息的终端设备。2、…

AppDynamics赵宇辰:硅谷APM独角兽,打造DevOps领域的智能大脑

近来,关于机器学习的报道很多,国内外的大型互联网企业都在着手对机器学习的研究。对应用性能的高效管理,首先要了解应用的一手数据,通过传统的数据获取方式已经不能满足企业的发展和市场环境,这就需要借助机器学习的技…

江苏有保障的计算机应用技术,2022年江苏单招计算机应用技术专业公办学校名单...

2021年高职单招升学一对一咨询蒲善婷:18983252108(微信)很多考生都存在一个疑问,到底该选择什么样的单招学校和专业?其实啊,我们在选择时首先要了解学校的办学情况和招生专业,看看有没有是不是符合自己的选择条件,是否…

Android环境搭建遭遇Unsupported major.minor version 52.0

为什么80%的码农都做不了架构师?>>> 首先,个人在windows 10下配置Android的开发环境。由于之前在开发Java web,所以安装了eclipse,MyEclipse,jdk 1.7 等。由于希望开发 android 5.1,早在之前也有开发过Android&#x…

标准用户如何打开计算机管理,WIN7标准账户怎样开启Administrator账户

Win7 标准用户安装软件时需要管理员权限,那么WIN7标准账户怎样开启Administrator账户呢?下文学习啦小编就分享了WIN7标准账户开启Administrator账户的方法,希望对大家有所帮助。WIN7标准账户开启Administrator账户方法一、将标准用户升级为管理员账户。…

linux删除、读取文件原理

linux删除文件原理 LINUX的文件名是存在父目录的block里面,并指向这个文件额inode节点,这个文件的inode节点再标记指向存放这个文件的block的数据块。我们删除一个文件,实际上并不是清楚inode节点和block的数据。只是在这个文件的父目录里面的…

eclipse 3.7安装扩展心得

最近因为突然对android发生兴趣了,所以就安装了eclipse来进行android开发学习。在安装过程中,突然想顺便把php的扩展也安装好,以方便以后使用,百度了很多下,很失败,网络上的文章要不是千篇一律的错误&#…

计算机网络课程思政教学设计,信息与网络工程学院成功举办第一届课程思政教学设计大赛...

为有效贯彻全国高校思想政治工作会议精神,强化课程思政建设,全面提高人才培养质量,根据《教务处关于举办第一届课程思政教学设计大赛的通知》要求,结合学院工作安排,7月18日,信息与网络工程学院在龙湖校区西…

Java 中参数传递是传值还是引用?

2019独角兽企业重金招聘Python工程师标准>>> 明确概念 值传递:指的是将变量的一个备份传过去,当该备份被修改后,不会影响原来变量的值; 引用传递:指的是将该变量的地址传过去,当值修改后&#x…

IIS8托管WCF服务

WCF服务程序本身不能运行,需要通过其他的宿主程序进行托管才能调用WCF服务功能,常见的宿主程序有IIS,WAS,Windows服务,当然在学习WCF技术的时候一般使用控制台应用程序或WinForm程序进行托管。本文将详细介绍如何使用I…

Cesium应用篇:3控件(3)SelectionIndicator InfoBox

假设这样一个场景,用户在Cesium球上加载了一个GeoJson文件(DataSource),里面是全美国所有州的Geometry信息(Entity),叠加到球面后,你自然会有一种冲动,点击某一个州&…

字符串入门

暴力 字典树总结:字典树的功能就是map字符串得到编码或者查询前缀关系套模板的时候注意t,s,-‘a’,[26],sz0的初始化还有一个问题,到底字典树开多少内存比较合适,反正至少是要开字符总长度*2hdu1251 http://acm.hdu.edu.cn/showpr…

C++ 的基础概念(3)——多态详解。

最近两次面试都问到了多态,我也不得不重视起来了,最近最大的收获就是:基础知识很重要,就算你很会写代码,但是面试官问你基础知识答不上来的话,也很难被人赏识和录用,所以还是要多补补基础概念&a…

.NET Forms身份验证

.NET表单身份验证 ASP.NET Forms 身份验证的简单实现&#xff1a;1&#xff09;在Web.config文件中配置应用程序使用 Forms 身份验证&#xff1b;2&#xff09;创建登陆页面&#xff0c;将用户身份验证票证添加到Cookie集合。1.配置文件中设置为Forms验证<authentication mo…