谷歌 Web 开发最佳实践手册(4.1.1):创建对象模型

【伯乐在线提示】:① 5月6日,谷歌开发者中心推出了一个 Web 开发最佳实践手册。伯乐在线资源频道摘编该资源后,已邀请一些关注 Web 开发的朋友参与翻译手册。② 由于译者朋友几乎都是已在职,都是在工作之余参与,每位的翻译进度会不一样(请理解),所以手册中文版不会按照英文版章节顺序发布。③ 手册中文版尚不完整,请不要转载,谢谢合作。


【导读】:浏览器在渲染页面之前,需要创建DOM和CSSOM树。因此我们应该确保尽快将HTML和CSS交给浏览器。

本课内容

  • 文档对象模型 (DOM)
  • CSS 对象模型 (CSSOM)

学习重点

  • 字节(Bytes) -> 字符(characters) -> 标记(tokens) -> 节点(nodes) -> 对象模型
  • HTML标记被转换成文档对象模型(DOM),CSS标记被转换成CSS对象模型(CSSOM)
  • DOM和CSSOM是独立的数据结构
  • Chrome DevTools Timeline工具能让我们观察DOM和CSSOM的创建过程以及处理过程的开销

文档对象模型 (DOM)

开始吧,很简单的一个纯HTML页面,只有一些文本和一张图。在渲染这样一个简单页面的过程中,浏览器需要做些什么?

  1. 转换(Conversion): 浏览器从磁盘或者网络上读取HTML的原始字节,然后根据指定的编码规则转换成单独的字符(比如按UTF-8编码)。
  2. 标记分解(Tokenizing):浏览器将字符串按照W3C HTML5标准转换成确定的标记,比如<html>、<body>以及其他带尖括号的字符。每个标记都有特定的意义以及一套规则。
  3. 词法分析(Lexing):分解出来的标记被转换成能定义其属性和规则的对象。
  4. DOM 构造: 最终由于HTML标记定义了不同标签的关系(有些标签嵌套在其他标签里面),创建出来的对象被关联到一个树形数据结构。这颗树会反映在原先标签里定义的父子关系,比如HTML对象就是body对象的父对象,body对象又是paragraph对象的父对象等等。

整个过程的最终输出就是文档对象模型,或者是我们简单页面的 DOM,浏览器将用于对网页作进一步处理。

浏览器每次处理HTML标记都会经过上面的步骤:将字节转换成字符,识别标记,将标记转换成节点,然后创建DOM树。整个过程可能会消耗一定的时间,尤其是处理大量HTML的时候。

注意:

  • 我们假定你已经基本上熟悉Chrome DevTools,比如知道如何捕获网络资源加载瀑布流,或者记录时间轴。如果你需要复习,可以查看Chrome 开发工具文档. 如果你是新手,建议你学习Codeschool的 发掘DevTools课程。

如果你打开Chrome DevTools,在页面加载过程中录制一个时间轴,你就可以看到完成上面的步骤花费的实际时间。对于上文的例子,从HTML字节到DOM树,一共花了大约5ms。当然了,如果页面更大,事实上大部分页面都比示例要大,那么这个过程可能也会显著花掉更多时间。在后面关于创建平滑动画的章节中你会发现当浏览器需要处理大量HTML的时候这很可能会成为瓶颈。

DOM树创建好了,是不是就表示获得了足够的信息,可以渲染页面了呢?还不是,DOM树包含有文档标记的关系和属性信息,但它不能告诉我们元素渲染之后应该长什么样。这就是CSSOM的责任了,下面就要介绍它。

 

CSS对象模型(CSSOM)

浏览器创建完DOM后,在head区间遇到一个link标签,它引用了一个外部的CSS样式表:style.css。由于预计到可能需要这个资源来渲染页面,浏览器立即发出了一个资源请求,返回的内容如下:

当然我们可以在HTML标签里直接声明样式(内联),但将CSS独立出去可以让我们区别对待内容和显示:设计师可以专注CSS,开发人员专注HTML等等。

与HTML一样,我们也需要将获得的CSS规则转换成浏览器能够理解并执行的东西。所有我们再一次重复了一个与HTML非常相似的过程:


CSS字节被转换成字符然后转换成标记和节点,最终被关联到一个被称为”CSS对象模型“或者简称CSSOM的树形结构中。

为什么CSSOM要采用树作为数据结构? 在计算任何对象的最终样式的时候,浏览器从适用于这个节点的最宽泛的规则开始(比如对于一个body元素的子元素,所有的body样式都适用于它),然后采用更具体的样式来递归的修改计算出的样式。

为了具体说明我们来看上面的CSSOM树。 放在body元素里面的span标签,它里面包含的任何文字都具有16像素的大小,颜色为红色, font-size规则会从body向下级联到span。然而如果span是段落(p)元素的子元素,则它的内容不会显示。

注意上面的树并不是一个完整的CSSOM树,它只显示了我们决定要在样式表里覆盖的部分。 每个浏览器都提供了一套默认的样式,被称为”用户代理样式“,它就是当你不提供任何自定义样式时看到的样式,我们的自定义样式也只是在默认样式的基础上进行覆盖(比如IE默认样式)。

如果你再Chrome DevTools查看过计算后的样式,又搞不懂这些样式从哪儿来,现在你应该知道答案了。

想知道CSS处理花了多少时间吗?在DevTools里录制一个时间轴然后查找”样式再计算”事件(Recalcuate Style), 与DOM解析不同,时间轴不会单独显示”处理CSS“条目,我们需要捕获”解析“和CSSOM树创建,并加上这个事件下面遍历计算样式的时间。

我们的微型样式表需要大约0.6ms进行处理,最终影响到页面上8个元素的显示。耗时虽然不长但不是没有。 但这8个元素从哪儿来?CSSOM和DOM是独立的数据结构。原来,浏览器掩藏了重要的一步。接下来就要讲到将DOM和CSSOM关联的渲染树。

收藏 评论

关于作者:梧桐

(新浪微博:@jakiewoo_vp9) 个人主页 · 我的文章 · 13

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部