1. 浏览器渲染原理
浏览器的主要组件：
- 用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。
- 浏览器引擎 － 用来查询及操作渲染引擎的接口。
- 渲染引擎 － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。
- 网络 － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。
- UI后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口。
- js解释器 － 用来解释执行JS代码。
- 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，Html5定义了web database技术，这是一种轻量级完整的客户端存储技术
浏览器的渲染过程：
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSDOM）
- 将两棵树合并成一颗渲染树（render tree)
- LayOut布局（文档流、盒模型、计算大小和位置）
- Paint绘制（把边框颜色、文字颜色、阴影等画出来）
- Compose合成（根据层叠关系展示画面）
三棵树
2. CSS 动画的两种做法（transition 和 animation）
transition 过渡
- 作用：补充中间帧
- 语法： transition：属性名 时长 过渡方式 延迟 例子：
- transition：left 200ms linear
- transition：left 200ms, top 400ms
- transition: all 200ms
animation 声明关键帧
- 语法： animation：时长｜过渡方式｜延迟｜次数｜方向｜填充模式｜是否暂停｜动画名
