0. 序言

关于这一部分，Google（Chrome）与Mozilla（Firefox）的官方文档就说的很明确了。Google文档需要一些特别手段才能看到，这对于程序员不是啥大问题。不过Google官方文档的一个问题是它是以英文原文写成，虽然对于我这个英文专业出身的人来说问题不大，但对于英文不好的同学来说会比较痛苦。但更重要的是Google官方的中文翻译质量不高，基本上断绝了大部分人看Google官方文档的可能及必要性。不过在文末还是附上了Google团队的文章，供我自己以及英文好的同学阅读。

但有一件好事是，Mozilla团队的本地化工作一直做的非常出色，虽然它们的文档是由英文写成，但它们的翻译同样良心。

本次笔记的参考文献是两家的文章。

1. 浏览器渲染原理

在经过导航（Navigation）之后，浏览器获得了后台返回的数据，接下来就是对这些数据进行渲染及展示的过程。而这一过程正是浏览器的渲染原理。至于导航，涉及到HTTP协议相关知识，另起一篇博客写作，此处暂按下不表。写完之后会将超链接更新到这里。

我们从后台获取到的数据并不是一下子就成为网页的。最一开始要处理的数据是一段HTML代码及CSS代码。

HTML代码示例（来源于MDN文档）：

<!doctype HTML>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>My simple page</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h1 class="heading">My Page</h1>
  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
  <div>
    <img src="myimage.jpg" alt="image description"/>
  </div>
  <script src="anotherscript.js"></script>
</body>
</html>
复制代码

CSS代码示例（我自己写的）：

.heading{
    font-family : san-serif;
}
复制代码

浏览器实际上执行的是对上述代码进行解析的过程。

获得代码后，浏览器便开始解析。解析的实质是经历一个Bytes → characters → tokens → nodes → object model的过程^[3]。

从bytes到characters的转变涉及到计算机内部原理知识，倒也不难–按照一定的编码标准（通常是utf-8）解析我们写下的html代码。

从characters到tokens的转变过程是tokenization。根据Google官方的解释，tokenization是“The browser converts strings of characters into distinct tokens—as specified by the W3C HTML5 standard; for example, <html>, <body>—and other strings within angle brackets. Each token has a special meaning and its own set of rules.”翻译一下，是浏览器将html标签按照诸如W3C标准等标准进行意义化的过程。在这个过程中<html>等标签不再是干巴巴的字符串，而是有意义的。可以理解为把彩票兑奖了。

接下来，浏览器便构造DOM树（HTML DOM）与CSSDOM树，也就是俗称的“两棵树”。那么，两棵树分别长什么样子呢？

这是DOM树（图片来自Google）：

Google团队DOM树

这是CSSDOM树（图片来自Google）：

Google团队CSSDOM树

构建DOM树恰好符合html自身的树形结构。DOM树刚好描述了文档的内容，也表示出了层级关系。在DOM树中，<html>是树根，在其下逐层展开内容。

关于CSSDOM树，虽然CSS的指定方式并不必须遵守HTML式的树形结构，但其由于和HTML深度绑定，所以也获得了树形结构。在CSS中，子节点(node)会继承父节点的CSS样式，但也可以指定自己的样式。

最后一步进行渲染。具体过程是：

将DOM树与CSSDOM树组合而成一棵渲染树（render tree），树上只有需要被渲染到页面上的节点。然后进行布局（layout）计算，将树上的各个元素进行布局，可以理解为从树上摘下果子然后整齐地放到安排好的位置上去。最后再绘制网页。

总结一下，除却计算机内部的必要过程（Bytes → characters → tokens）外，后两步的过程（nodes → object model）与做画、写文章有类似之处：先搭骨架（DOM树和CSSDOM树），再搞内容。

2. CSS 动画的两种做法

什么是动画？即静止画面连续播放时由于视觉残象产生的错觉。在CSS中，做动画有两种办法：transition和animation。

transition：可用于指定一个或多个属性的过渡效果。可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
animation：用来指定一组或多组动画，每组之间用逗号相隔

事实上，transition和animation都是简写属性。

transition包括以下分支属性：

transition-property：指定应用过渡属性的名称。
transition-duration：以秒或毫秒为单位指定过渡动画所需的时间。默认值为0s，表示不出现过渡动画。
transition-timing-function：CSS属性受到transition effect的影响，会产生不断变化的中间值。而该属性是用来描述这个中间值是怎样计算的。
transition-delay：规定了在过渡效果开始作用之前需要等待的时间。

transition后用空格分隔的属性顺序为：
property name | duration | timing function | delay

关于都有哪些transition-timing-function，可以参考MDN官方说明^[6]，有详细的说明及动态演示。

而animation包括的分支属性则更多。依顺序包括如下：

animation-name：为动画取名
animation-duration：指定一个动画周期的时长
animation-timing-function：属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个 <timing-function>。
animation-delay：定义动画于何时开始，即从动画应用在元素上到动画开始的这段时间的长度。0s是该属性的默认值，代表动画在应用到元素上后立即开始执行。
animation-iteration-count：定义动画在结束前运行的次数。
animation-direction：指示动画是否反向播放。
animation-fill-mode：设置CSS动画在执行之前和之后如何将样式应用于其目标。
animation-play-state：属性定义一个动画是否运行或者暂停。