浏览器渲染原理
什么是浏览器的关键渲染路径：
- 从收到 HTML、CSS 和 JavaScript 字节到对其进行必需的处理，从而将它们转变成渲染的像素这一过程中有一些中间步骤，优化性能其实就是了解这些步骤中发生了什么 - 即关键渲染路径。
构建对象模型：
浏览器渲染页面前需要先构建 DOM 和 CSSOM 树。因此，我们需要确保尽快将 HTML 和 CSS 都提供给浏览器。
- 字节 → 字符 → 令牌 → 节点 → 对象模型。
- HTML 标记转换成文档对象模型 (DOM)；CSS 标记转换成 CSS 对象模型 (CSSOM)。
- DOM 和 CSSOM 是独立的数据结构。
- Chrome DevTools Timeline 让我们可以捕获和检查 DOM 和 CSSOM 的构建和处理开销。
渲染树构建，布局及绘制：
CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。优化上述每一个步骤对实现最佳渲染性能至关重要。
- DOM 树与 CSSOM 树合并后形成渲染树。
- 渲染树只包含渲染网页所需的节点。
- 布局计算每个对象的精确位置和大小。
- 最后一步是绘制，使用最终渲染树将像素渲染到屏幕上。
可以依照下面的渲染树来学习
有点看不懂没关系，自己给自己总结一下浏览器的渲染过程。
- 根据HTML树构建HTML树（DOM).
- 根据css构建css树（CSSOM）.
- 将两颗树合并成一颗渲染树（render tree）.
- Layout布局（文档流.盒模型.计算大小和位置）.
- Paint绘制（会根据边框颜色.文字颜色.阴影等画出来）.
- Compose合成（根据层叠关系展示画面）.
还可以根据这个网站进行学，今天文章有借鉴到这个网站。 没错就是我请点击！
transform 简单记录
四个常用功能
- translate (位移) 允许你单独声明平移变换，并独立于 transform 属性。
- scale(缩放) scale() 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。
- rotate(旋转) rotate()函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。
- skew(倾斜) skew() 函数定义了一个元素在二维平面上的倾斜转换。 一般都需要transition进行过渡.
inline不支持transform要先转换成block.
translate常用写法:
- translateX x轴
- translateY Y轴
- translateZ Z轴
- translate3D 这一且在MDN都可查，一定要尝试看MDN的语法示例；
translate(-50%,-50%)可做绝对定位的居中；
还可以组合使用：
transform: scale(0.5) translate(-100%,-100%);
teansform: none; 取消所有；
transition 过渡
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。 可以起到补充中间帧的作用。
语法
-
transition: 属性名 时长 过度方式 延迟
-
transition: left 200ms linear 还可以用逗号分隔两种属性
-
transition: left 200ms , top 400ms 还可以用all表示所有属性
-
transition: all 200ms
当然也不是所有属性都可以过度
- display:none=>block无法过度。一般改成visibility: hidden=>visibl
当然还可以使用animation
@keyframes CSS 规则通过定义动画序列中关键帧（或航点）的样式来控制 CSS 动画序列中的中间步骤。这比过渡更能控制动画序列的中间步骤。
缩写语法
animation: 时长 | 过渡方式 | 延迟 | 次数 |方向 | 填充模式 | 是否暂停 | 动画名 ；
- 时长： 1s或1000ms
- 过渡方式： 跟transition取值一样，比如linear
- 次数： 3或2.4 或者infinite
- 方向： reverse | alternate |alternate-reverse
- 填充模式： none | forwards | backwards | both
- 是否暂停： paused | running 所有属性都有相对的单独属性
奉上transition和animation两种方式跳动的♥动画
- transition 方式： js.jirengu.com/zucim/1/edi…
- animation 方式：js.jirengu.com/zucim/2/edi…
