|
副问题[/!--empirenews.page--]
当你构建 Web 应用措施时，你不可是编写单独运行的 JavaScript 代码，你编写的 JavaScript 正在与情形举办交互。相识这种情形，它的事变道理以及它的组，这些有助于你够构建更好的应用措施，并为应用措施宣布后也许呈现的隐藏题目做好充实筹备。
赏识器的首要组件包罗：
- 用户界面 (User interface)： 包罗地点栏、退却/提高按钮、书签目次等，也就是你所看到的除了用来表现你所哀求页面的主窗口之外的其他部门
- 赏识器引擎 (Browser engine)： 用来查询及操纵渲染引擎的接口
- 渲染引擎 (Rendering engine)： 用来表现哀求的内容，譬喻，假如哀求内容为 html，它认真理会 html 及 css，并将理会后的功效表现出来
- 收集 (Networking)： 用来完成收集挪用，譬喻http哀求，它具有平台无关的接口，可以在差异平台上事变
- UI 后端 (UI backend)： 用来绘制相同组合选择框及对话框等根基组件，具有不特定于某个平台的通用接口，底层行使操纵体系的用户接口
- JS 表明器 (JavaScript engine)： 用来表明执行JS代码
- 数据存储 (Data persistence)： 属于耐久层，赏识器必要在硬盘中生涯相同 cookie 的各类数据，HTML5界说了 Web Database 技能，这是一种轻量级完备的客户端存储技能，支持的存储机制范例包罗 localStorage 、 indexDB 、 WebSQL 和 FileSystem 。
在这篇文章中，将重点接头渲染引擎，由于它处理赏罚 HTML 和 CSS 的理会和可视化，这是大大都 JavaScript 应用措施常常与之交互的对象。
渲染引擎概述
渲染引擎的职责就是渲染，即在赏识器窗口中表现所哀求的内容。
渲染引擎可以表现 HTML 和 XML 文档和图像。假如行使其他插件，渲染引擎还可以表现差异范例的文档，如 PDF。
渲染引擎 (Rendering engines)
与 JavaScript 引擎相同，差异的赏识器也行使差异的渲染引擎。以下是一些最受接待的:
- Gecko — Firefox
- WebKit — Safari
- Blink — Chrome，Opera (版本 15 之后)
Firefox、Chrome 和 Safari 是基于两种渲染引擎构建的，Firefox 行使 Geoko——Mozilla 自主研发的渲染引擎，Safari 和 Chrome 都行使 Webkit。Blink 是 Chrome 基于 WebKit的自主渲染引擎。
渲染的进程
渲染引擎从收集层吸取所哀求文档的内容。
理会 HTML 以构建 Dom 树 -> 构建 Render 树 -> 机关 Render 树 -> 绘制 Render 树
构建 Dom 树
渲染现引擎的第一步是理会 HTML文档，并将理会后的元素转换为 DOM 树 中的现实 DOM 节点。
若是有如下 Html 布局
- <html>
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" type="text/css" href="theme.css">
- </head>
- <body>
- <p> Hello, <span> friend! </span> </p>
- <div>
- <img src="smiley.gif" alt="Smiley face" height="42" width="42">
- </div>
- </body>
- </html>
对应的 DOM树如下：
根基上，每个元素都暗示为全部元素的父节点，这些元素直接包括在元素中。
构建 CSSOM
CSSOM 指的是 CSS 工具模子 。 当赏识器构建页面的 DOM 时，它在 head 标签下如碰着了一个 link 标志且引用了外部 theme.css CSS 样式表。 赏识器估量也许必要该资源来泛起页面，它会当即发送哀求。 假设 theme.css 文件内容如下：
- body {
- font-size: 16px;
- }
-
- p {
- font-weight: bold;
- }
-
- span {
- color: red;
- }
-
- p span {
- display: none;
- }
-
- img {
- float: right;
- }
（编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
