浏览器渲染原理

1. 通过HTML构建dom树
2. 通过css构建cssdom树
3. 合并(combine)为渲染树(render tree)

以下跳过构建：

• meta、script这些标签不会显示在界面
• display:none
  1. layout(文档流、盒模型、计算大小和位置)
  2. paint（把边框颜色、背景颜色、文字颜色绘制出来）

填空像素，绘制许多layers

1. composite（层叠关系展示画面）

把layers用合适的顺序排列展示

官方文档

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
https://developers.google.com/web/fundamentals/performance/rendering/

Life of a Pixel (To be continued)

https://www.yuque.com/u544621/omqghq/vzgk68

body
加上背景色，是整个页面变色

CSS配置

*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
*:before,*:after{
box-sizing: border-box;
}
ul, ol{
list-style: none;
}
a{
color: inherit;
text-decoration: none;
}