|
副标题[/!--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;
- }
（编辑：老爷爷站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
