浏览器工作原理简介

浏览器的主要功能是将用户从服务器请求的资源显示在浏览器窗口中。

1. 浏览器的主要组成

    人机交互部分（UI）

    网络请求部分

    js引擎部分（用于解析执行js）

    渲染引擎部分（渲染html、css）

    数据存储部分（cookie、localStorage、sessionStorage等）

2. 浏览器内核（渲染引擎）工作原理

用下面这个webkit渲染引擎解释说明下：

1）html解析器解析html，构建DOM树

2）CSS解析器把网页中所有CSS解析生成一个CSS规则树

3）将DOM树和CSS规则树合并生成一个“渲染树”，“渲染树”并不等同于DOM树，因为像head标签或display:none这样的元素就没有必要放到“渲染树”中了，但是它们在DOM树中

4）对“渲染树”进行布局、定位坐标和大小、是否换行、确定position、overflow、z-index等，这个过程称之为“layout”或“reflow”

5）绘制“渲染树”

3. chrome浏览器观察渲染过程

    打开开发者工具界面——在下面竖直三个点点击选择Rendering，勾选Paint flashing即可观察到页面的渲染过程

    

4. 补充下回流和重绘的区别

    回流：当“渲染树”中的一部分或全部因为元素的规模尺寸、布局、隐藏与改变等而需要重新构建——称回流，回流结束后，就会重绘受影响的部分到屏幕中；

    重绘：当“渲染树”中的一些元素需要更改属性，而这些属性只是影响元素的外观、风格，而不会影响布局的称重绘；

    回流必将引起重绘，而重绘则不一定会引起回流