浏览器主要包含的进程
Browser 进程:浏览器的主进程,只有一个,负责创建和销毁其它进程、网络资源的下载与管理、浏览器界面的展示、前进后退等。
GPU 进程:用于 3D 绘制等,最多一个。
第三方插件进程:每种类型的插件对应一个进程,仅当使用该插件时才创建。
浏览器渲染进程(浏览器内核):内部是多线程的,每打开一个新网页就会创建一个进程,主要用于页面渲染,脚本执行,事件处理等。
浏览器的渲染过程
1.构建DOM
将html解析成树形的数据结构,在这个过过程中,如果有过程链接js,css,图片等资源时,会并行发生进行请求,DOM树的构建过程是一个深度遍历的过程,当前节点的所有子节点都构建好了之后才会构建当前节点的下一个兄弟节点。
2.构建CSSOM
浏览器将css代码解析成树形结构,在DOM的基础上,匹配每一个元素的样式。
3.构建render tree
DOM和CSSOM合并后生render tree,render tree和DOM一样,以多叉树的形式保存了每个节点的css属性,节点本身属性,以及节点的孩子节点。
4.layout
有了render tree,浏览器已经知道网页中有哪些节点,各个节点的css定义以及它们的从属关系,以此来计算出每个节点在屏幕中的位置。
5.painting
layout之后。浏览器已经知道哪些节点要显示,每个节点的css属性是什么,每个节点在屏幕中的位置。显卡就会将内容绘制到屏幕上。
注:
回流:涉及到页面布局的几何属性的改变会引发回流
重绘:不影响页面布局的,只涉及到外观变化的改变会引发重绘
浏览器把渲染过程交给浏览器的渲染进程去执行,为了能解析,运行页面文件中的各种代码,渲染进程内部有细分出多个线程,由这些线程共同协作实现页面的展示。
浏览器渲染进程包含的线程
1.GUI 渲染引擎线程:负责渲染浏览器界面,解析HTML,CSS,构建DOM、CSSOM、Render Tree,布局(Layout)和绘制(Painting) 等。当界面需要重绘(Repaint)或由于某种操作引发回流(Reflow)时,该线程也会执行。
2.JavaScript 引擎线程:也称为 JavaScript 内核,负责处理、解析 、运行 Javascript 代码(例如 V8 引擎)。
3.事件触发线程:用来控制浏览器事件循环,注意这是浏览器的操作,不属于 JavaScript 引擎线程管,当事件被触发时,该线程会把事件添加到待处理队列的队尾,等待 JavaScript 引擎的处理。
4.定时触发器线程: setInterval
与 setTimeout
所在线程,执行将返回定时触发器在系统中的ID,可以通过这个ID来取消定时触发器。W3C 在 HTML 标准中规定,规定要求 setTimeout
中低于 4ms 的时间间隔算为 4ms 。
5.异步 http 请求线程:在 XMLHttpRequest
连接后通过浏览器新开一个请求线程,接下来检测状态变更,如果相应的状态下设置有回调函数,异步线程就会产生状态变更事件,将这个回调再放入事件处理队列中,等待 JavaScript 引擎的处理。
GUI 渲染线程与 JavaScript 引擎线程是互斥的
当 JavaScript 引擎线程执行时 GUI 线程会被挂起,GUI 更新会被保存在一个队列中等到 JavaScript 引擎空闲时立即被执行。所以如果 JavaScript 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞。