浏览器渲染

发表于 | 分类于

浏览器内核

常见的浏览器内核就是webkit。

可分为两部分：渲染引擎和js引擎。

最开始渲染引擎和js引擎分的并没有很明确，随着js引擎的越来越强大，浏览器内核就偏向于指渲染引擎。

渲染引擎

三种渲染模式

  • 标准模式
  • 近标准模式
  • 怪异模式

标准模式：HTML5 DOCTYPE声明；

近标准模式：HTML4 DOCTYPE声明；

怪异模式：HTML3 DOCTYPE声明、DOCTYPE头不正确的声明、无DOCTYPE头。

1
2
3
DOCTYPE 声明不正确的情况：
<!DOCTYPE svg>

不同渲染模式之间的差异

标准与怪异：

1
2
3
4
1、标准模式下使用标准模式的盒模型，怪异模式下使用IE标准的盒模型（border-box);
2、行内元素垂直对齐方式：
   怪异模式：对齐父盒的下边框；
   标准模式：对齐父盒的baseline

近标准和标准：

不同点即为上述的第二点。

js引擎

主要作用是读取文件中的javaScript，处理并执行它。

js是单线程的，但是能执行ajax和setTimeout等异步操作是因为浏览器是多线程的。

渲染引擎工作原理

1、首先渲染引擎下载html，解析并生成DOM Tree。

2、如果碰到css标签或js脚本标签就新起线程去下载他们，并继续构建DOM。（css是异步下载同步执行），浏览器通过DOM Tree和CSS Rule Tree构建rending tree。

3、通过CSS Rule Tree匹配DOM Tree进行定位坐标和大小，这个过程称为Flow。

4、最后绘制出网页画面的过程称为Paint。

重排：指在执行交互或者通过js脚本改编页面结构是，需要进行重排。重排是指DOM树结构发生变化，需要重新构建DOM结构。

重绘：指DOM节点样式发生了改变，需要重新绘制，即称为重绘。

重排一定会带来重绘，但重绘并不一定伴随着重排。

减少重排：将需要多次重排的元素定义为postion:absolute，使它脱离文档流，他的变化不会影响其他元素。