1.浏览器渲染原理

浏览器含有一个渲染引擎，用来渲染窗口所展示的内容。默认情况下，渲染引擎可以显示html、xml文档及图片

从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上：

1. DNS 查询
2. TCP 连接
3. HTTP 请求即响应
4. 服务器响应
5. 客户端渲染

重点讨论第五个部分，即浏览器对内容的渲染，这一部分（渲染树构建、布局及绘制），又可以分为下面五个步骤：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. Layout布局(文档流，盒模型，计算大小和位置)
5. paint绘制（把边框颜色，文字颜色，阴影等画出来）
6. compose合成（根据层叠关系展示画面）

需要明白，这五个步骤并不一定一次性顺序完成。如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM

2.CSS 动画的两种做法（transition 和 animation）

transition

transition（过渡）可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过JavaScript 实现的状态变化。

语法

1. transition 属性是一个简写属性，用于设置四个过渡属性：
2. transition-property 规定设置过渡效果的 CSS 属性的名称。
3. transition-duration 规定完成过渡效果需要多少秒或毫秒。
4. transition-timing-function 规定速度效果的速度曲线。
5. transition-delay 定义过渡效果何时开始。
6. 可以用逗号分隔两个不同属性 transition: left 200ms, top 400ms
7. 可以用all 代表所有属性 transition: all 200ms

注释：

请始终设置 transition-duration属性，否则时长为 0，就不会产生过渡效果。

animation

animation（动画） 属性用来指定一组或多组动画，每组之间用逗号相隔。比transition更好用

缩写语法

animation: 时长过渡方式 |延迟| 次数| 方向| 填充模式| 是否暂停| 动画名

时长： ls 或者lOOOms

过渡方式：踉transition 取值一样，如linear

次数： 3 或者2.4 或者infinite（无限次）

方向： reverse | alternate | alternate-reverse

填充模式： none | forwards | backwards | both

是否暂停： paused（暂停） | running（运行）

以上所有属性都有对应的单独属性

@keyframes

@keyframes 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。这比转换更能控制动画序列的中间步骤。

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

可以添加多次动画，十分的方便

使用animation做的动画

其他

前端需要学习的东西非常多而且很杂，更新又快，一年一次，没有系统的学习真的挺难的，一个小问题就要卡半天

边工作边学压力还是很大的，希望明年能找到个好工作（我同学游戏设计已经在广州待了2个月还没找到）

资料来源于饥人谷和MDN