什么是渲染？
render，HTML字符串 --渲染--> 像素信息
URL地址是一个字符串，HTML、css、js都在里面
可以把渲染想象成一个函数，上代码：
function render (html) {
/* 第一行
第二行
*/
return pixels;
}渲染时间点
从输入URL地址按下回车到显示页面，发生了什么？
重点是两部分，网络：拿HTML，渲染：渲染
渲染流水线
解析HTML、parse HTML
形成DOM树和CSSOM树
扫描二维码关注公众号，回复：
16464468 查看本文章
除了浏览器默认样式表之外，其他的JS都能操作
下载插件，可以在线观看Chrome源码
搜索Chromium，复制网址
这样就可以在线查看Chrome浏览器源码了
查看页面样式
一般框架里用的比较多
/* 给页面所有div加边框 */
document.styleSheets[0].addRule('div', 'border: 2px solid #c00000 !important') 
CSS代码不会阻塞html解析 ，因为他们处在不同的线程上
JS代码会阻塞html解析 ，遇到JS需要暂停，因为JS可能会修改DOM树
样式计算 - Recalculate Style
CSS属性值的计算过程，层叠，继承
最终样式会把预设值变成绝对单位
比如颜色 "#f40" 变成 "rgb(255, 0, 22)"
或者 rem 变成 px
获取最终样式
getComputedStyle()
位置和宽高是相对包含块来说的，相对第一个定位的元素，不一定是父元素，父元素没有会一直往外查找，直到有定位的包含块
浏览器默认样式表规定head是隐藏的，它不会出现在布局树中，因为它没有几何信息
layout布局树里面不是DOM对象，但是它可以间接拿到一些属性，比如
document.body.clientHeight
635
document.body.clientWidth
1275
document.body.offsetHeight
635分层 - Layer
绘制 - Paint 
分块 = Tiling 合成线程
光栅化 - Raster
画 - Draw
面试题：浏览器是如何渲染页面的？
什么是reflow?
重新布局（排版）
改变几何信息都reflow
什么是repaint?
为什么transform
