一个列表

菜单
插图一个人钓鱼的码头

插图的Dougal麦克弗森

DOM标记

在我们的前一段,“服务器客户端,“我们看到了一个URL请求从服务器和学会了很多条件和缓存,帮助优化相关资源的交付一旦浏览器引擎终于获得资源,它需要开始把它变成一个呈现web页面在这部分中,我们主要关注HTML资源,如何转化成HTML的标签的构建块最终会呈现在屏幕上。

继续下面的条

To use a construction metaphor, we’ve drafted the blueprints, acquired all the permits, and collected all the raw materials at the construction site; it’s time to start building!

解析

一旦内容从服务器到客户端通过网络系统,它的第一站是HTML解析器,它是由几个系统一起工作:编码,预先解析,标记,和树结构The parser is the part of the construction project metaphor where we walk through all the raw materials: unpacking boxes; unbinding pallets, pipes, wiring, etc.; and pouring the foundation before handing off everything to the experts working on the framing, plumbing, electrical, etc.

编码

HTTP响应负载的身体可以从HTML文本图像数据解析器的第一份工作是找出如何解释刚刚收到从服务器假设我们处理HTML文档,译码器必须找出文本文档被翻译成位为了扭转的过程。

Binary-to-text表示
字符 D O
ASCII值 68年 79年 77年
二进制值 01000100 01001111 01001101
8 8 8

(记住,最终甚至文本必须转换成二进制的电脑Encoding—in this case ASCII encoding—defines that a binary value such as “01000100” means the letter “D,” as shown in the figure above.) Many possible encodings exist for text—it’s the browser’s job to figure out how to properly decode the text通过服务器应该提供提示内容类型头,可以分析和主要部分(a字节顺序标记或物料清单)如果编码仍然不能确定,浏览器可以应用其基于启发式的最佳猜测有时唯一明确的答案来自于(编码)内容本身的形式< meta >html标签最差的情况,浏览器就可以推测,然后发现一个矛盾< meta >解析后的标签已全面展开在罕见的情况下,解析器必须重启,扔掉先前解码内容浏览器有时要处理旧web内容(使用遗留编码),和这些系统来支持。

今天在保存网页的HTML文档,选择是明确的:使用utf - 8编码Why? It nicely supports the full Unicode range of characters, has good compatibility with ASCII for single-byte characters common to languages like CSS, HTML, and JavaScript, and is likely to be the browser’s fallback default你可以告诉当编码出错,因为文本不会正确显示(你会得到垃圾字符或盒子,清晰的文本通常是可见的)。

预先解析/扫描

一旦编码是已知的,解析器开始最初的预先解析步骤扫描的内容与目标最小化往返延迟的额外资源The pre-parser is not a full parser; for example, it doesn’t understand nesting levels or parent/child relationships in HTML然而,pre-parser识别特定的HTML标签名称和属性,以及url例如,如果你有一个<img src="https://somewhere.example.com/​images/​dog.png" alt="">在你的HTML内容,pre-parser会注意到src属性,和队列资源请求的狗图片通过网络系统狗形象要求尽快,尽量减少你需要等待它到达的时间从网络pre-parser也许还会注意到某些明确的请求的HTML等预加载预取指令,这些为队列处理。

标记

标记是上半年解析HTML它涉及将标记为单独的标记,如“开始标记,”“结束标记,”“文本运行,”“评论,”等等,被送入下一个状态的解析器记号赋予器是一个状态机的不同状态之间的转换HTML语言,如“在标签打开状态”(< > |视频控制在属性名称),“国家”(<视频诈骗|控制>)和“属性名称后状态”(<视频控制| >),这样反复读取HTML标记文本文档中的每个字符。

标签(在每一个例子中,垂直管说明了编译器的位置。)

图显示HTML标记运行通过一个记号赋予器创建令牌

HTML规范(参见“12.2.5标记”)目前定义八十个独立的国家的编译器记号赋予器和解析器很适应性强:可以处理和任何文本内容转换成一个HTML就如果没有有效的HTML代码的文本这样的弹性的特点之一,就是让web开发人员如此平易近人的所有技能水平However, the drawback of the tokenizer and parser’s resilience is that you may not always get the results you expect, which can lead to some subtle programming bugs(检查您的代码的HTML验证器这样可以帮助你避免错误)。

对于那些更喜欢黑白的方法标记语言正确性,浏览器有另一种解析机制建在对待任何作为一个灾难性的失败(即任何失败都将导致内容不显示)这个解析模式使用XML处理HTML规则,可以通过将文档发送到浏览器的“application / xhtml + xml”MIME类型(或任何基于xml的MIME类型,使用元素HTML名称空间)。

浏览器可能将pre-parser和标记步骤结合在一起作为一个优化。

解析/树结构

浏览器需要一个内部的(内存)表示一个网页,,DOM标准web标准定义形状,表示应该是什么解析器的责任是把令牌由记号赋予器在前面的步骤中,并创建和插入对象到文档对象模型(DOM)以适当的方式(特别是使用23个独立国家of its state machine; see “12.2.6.4 The rules for parsing tokens in HTML content”)DOM被组织成一个树的数据结构,所以这个过程有时被称为树结构(说句题外话,Internet Explorer没有使用一个树结构的历史吗)。

图显示标记转换成DOM

HTML解析是由各种各样的错误处理复杂的情况下,确保遗产HTML内容在网络上继续在今天的现代浏览器兼容的结构例如,许多HTML标记隐含结束标记,这意味着如果你不提供,浏览器自动关闭为你匹配的标记例如,HTML:

作者真诚< p > < p > < / p >

解析器有一个规则,将创建一个隐含结束标记的段落,如下所示:

真诚< p > < / p > < p > < / p >作者

这样可以确保两段对象生成树中的兄弟姐妹,而不是一段对象通过忽略第二个开放标签HTML表可能是最复杂的解析器的规则试图确保表有适当的结构。

尽管复杂的解析规则,一旦创建DOM树,所有的解析规则,尝试创建一个“正确”的HTML结构不再执行Using JavaScript, a web page can rearrange the DOM tree in almost any way it likes, even if it doesn’t make sense! (For example, adding a table cell as the child of a<视频>标签)渲染系统成为负责如何处理任何奇怪的矛盾。

HTML解析的另一个复杂因素是,JavaScript可以添加更多内容解析,解析器中发挥它的作用。<脚本>标签包含文本解析器必须收集,然后发送到一个脚本引擎进行评估而脚本引擎解析和计算脚本文本,解析器等如果脚本评价包括调用document . writeAPI,第二个实例的HTML解析器必须开始运行(可重入)快速重新审视我们的建筑隐喻,<脚本>document . write需要停止所有正在进行的工作回到商店得到一些额外的材料,我们没有意识到我们需要的当我们在商店,所有施工进展停滞不前。

所有这些并发症使编写兼容HTML解析器不平凡的事业。

必威官网网址多少

当解析器完成,它宣布完成通过一个事件DOMContentLoaded必威官网网址多少 are the broadcast system built into the browser that JavaScript can listen and respond toIn our construction metaphor, 必威官网网址多少 are the reports that various workers bring to the foreman when they encounter a problem or finish a task就像DOMContentLoaded, there are a variety of 必威官网网址多少 that signal significant state changes in the web page such as负载(意义解析完成,所有的资源要求的解析器,如图像、CSS,视频,等等,已经下载)卸载(即web页面即将关闭)Many 必威官网网址多少 are specific to user input, such as the user touching the screen (pointerdown,pointerup等),使用鼠标(鼠标移至,mousemove和其他人),或输入键盘上的(keydown,按键弹起,键盘按键)。

浏览器DOM创建一个事件对象,包满有用的状态信息(如触摸在屏幕上的位置,按下键盘上的键,等等),和“大火”事件任何JavaScript代码是监听事件然后运行和提供的事件对象。

The tree structure of the DOM makes it convenient to “filter” how frequently code responds to an event by allowing 必威官网网址多少 to be listened for at any level in the tree (i.e.., at the root of the tree, in the leaves of the tree, or anywhere in between)浏览器首先决定了火灾事件树中(DOM对象的意义,如一个特定的<输入>控制),然后计算的路由事件从树的根,然后下来每个分支,直到达到目标的<输入>例如),然后返回到根沿着相同的路径Each object along the route then has its event listeners triggered, so that listeners at the root of the tree will “see” more 必威官网网址多少 than specific listeners at the leaves of the tree.

图显示路线被计算为一个事件,然后事件侦听器被称为

Some 必威官网网址多少 can also be canceled, which provides, for example, the ability to stop a form submission if the form isn’t filled out properly(一个提交事件触发的<形式>元素,和一个JavaScript侦听器可以检查表单和可选取消事件如果字段是空的或无效。)

DOM

HTML语言提供了一组丰富的功能远远超出了解析器标记过程解析器构建的结构元素包含其他元素,这些元素哪个州有最初(它们的属性)结构和状态的组合足以提供一个基本的渲染和一些互动(如通过内置的控制textarea > <,<视频>,<按钮>等)。但是没有添加CSS和JavaScript,网络会很无聊(静态)DOM提供了额外的一层功能元素的HTML和其他对象不相关的HTML。

在建筑隐喻中,解析器已经组建了最后的建设上墙,门,地板,天花板安装,管道,电气、气体等,都准备好了你可以打开门窗,打开和关闭灯光,但结构很简单CSS提供室内墙上details-color和地脚线,例如(We’ll get to CSS in the next installment.) JavaScript enables access to the DOM—all the furniture and appliances inside, as well as the services outside the building, such as the mailbox, storage shed and tools, solar panels, water well, etc我们描述外面的“家具”和“服务”。

元素的接口

解析器是构建对象放入树,它查找元素的名称(名称空间)和找到一个匹配的HTML界面环绕对象。

接口特性添加到基本的HTML元素特定于它们类型的元素一些通用的功能包括:

  • 访问HTML集合代表所有或元素的一个子集的孩子;
  • 搜索元素的属性的能力,孩子,和父元素;
  • ,重要的是,创建新元素的方法(不使用解析器),并附上他们(或分离)树。

为特定的元素,如<表>, the interface contains additional table-specific features for locating all the rows, columns, and cells within the table, as well as shortcuts for removing and adding rows and cells from and to the table同样的,<帆布>接口特性画线条、形状、文本和图片JavaScript是需要使用这些APIs-they没有单独使用HTML标记。

任何DOM树变化通过上面描述的API(如层次树中的一个元素,该元素的状态切换一个属性名称或价值,或任何API的操作从一个元素的接口)解析结束后将引发连锁反应的浏览器系统的工作是分析改变和更新你在屏幕上看到尽快树保持许多优化让这些重复更新快速,高效,如:

  • 代表共同元素名和属性通过一个数字(使用哈希表快速识别);
  • 记得一个元素的频繁访问缓存集合孩子(快速迭代子元素);
  • and sub-tree change-tracking to minimize what parts of the whole tree get “dirty” (and will need to be re-validated).

其他api

HTML元素和它们的接口只DOM的浏览器的机制在屏幕上显示的内容CSS可以影响布局,但只存在于HTML元素的内容Ultimately, if you want to see content on screen, it must be done through HTML interfaces that are part of the tree.” (For those wondering about Scalable Vector Graphics (SVG) and MathML languages—those elements must also be added to the tree to be seen—I’ve skipped them for brevity.)

我们学会了如何解析器是一种从服务器的HTML DOM树,和如何使用DOM接口的元素添加、删除和修改那棵树后的事实然而,浏览器的DOM编程非常巨大,不仅仅局限于HTML元素的接口。

浏览器的DOM的范围与设置的功能,应用程序可以在任何操作系统使用类似(但不限于):

  • 访问存储系统(数据库、键/值存储网络缓存存储);
  • 设备(地理位置、距离和方向传感器的各种类型、USB、MIDI,蓝牙,游戏手柄);
  • the network (HTTP exchanges, bidirectional server sockets, real-time media streaming);
  • 图形(2 d和3 d图形着色器,虚拟和现实增强);
  • 和多线程(共享和专用执行环境与丰富的消息传递功能)。

公开的DOM功能继续成长为新的web标准是由主要的浏览器引擎开发和实现这些“额外”的DOM api是超出了本文的范围,但是。

从标记

在这部分中,您已经了解了如何构造树解析和创建DOM的基础:有状态,从网络接收HTML标签的内存中表示。

与DOM模型,事件模型和元素等服务api使web开发人员能够随时更改DOM结构每个变更开始一系列的“重建”工作的更新DOM仅仅是第一步。

回到建设类比,现场原材料形成建筑的结构框架和建立正确的维度与内部管道、电气、安装和其它服务,但还没有真正意义上的建筑的最后看它的外观和室内设计。

在下一篇文章中,我们将讨论如何将浏览器的DOM树作为输入来布局引擎,包含CSS和将树转换为你终于可以在屏幕上看到的东西。

关于作者

3读者评论

加载评论