06-浏览器渲染原理

什么是渲染？

 render，HTML字符串 --渲染--> 像素信息

URL地址是一个字符串，HTML、css、js都在里面

可以把渲染想象成一个函数，上代码：

function render (html) {
	/*  第一行
		第二行
	*/
	return pixels;
}

渲染时间点

从输入URL地址按下回车到显示页面，发生了什么？

重点是两部分，网络：拿HTML，渲染：渲染

渲染流水线

 

解析HTML、parse HTML

形成DOM树和CSSOM树

 

 

除了浏览器默认样式表之外，其他的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