浏览器运行机制

浏览器运行机制

页面内容的快速加载和流畅的交互体验是前端开发者所希望的, 了解浏览器的运行机制有助于我们提升Web性能、优化用户体验.

区分进程和线程

进程是系统资源分配的最小单位,系统为每个进程分配一块内存.一个应用程序可以包含多个进程, 进程之间可以通信,但是代价比较大;

一个进程可以包含多个线程， 每个进程中的内存空间对于里面的线程来说都是共享的，但是当某个线程在使用进程中的共享内存时，其他线程必须等他使用结束，才能操作该共享内存。防止多个线程同时读写某一块内存区域.

以上图中我们目前正常运行的Typora这个应用程序为例, 可以看到当前有多个相关进程在运行, 每个进程中都包含多个线程,它们共同协助使Typora这个应用程序正常运行.

浏览器多进程

根据上面Typora的例子,我们猜想浏览器也应该是多进程的,我们就以Chrome浏览器为例继续进行探讨实验, 首先只打开一个浏览器窗口,然后在活动监视器里观察进程情况:

通常每新建一个tab页浏览器工作原理是怎样的，假使浏览器就会新开起一个新的渲染进程(renderer)(根据上面实验应该是上不止一个的)，浏览器的渲染进程是也是多线程的

现在我们可以确定的说浏览器是多进程的, 而且大致是下面这四种进程:

主进程(Google Chrome)

也称为Browser进程, 是浏览器的主控进程, 只有一个,负责整体的调控、tab页面的打开关闭;

GPU进程(GPU)

图形处理器, 负责3D图形绘制,只有一个

渲染进程(Renderer)

主要负责页面渲染相关工作, 有多个

插件进程

每一个插件都会创建一个插件进程

浏览器中的渲染进程

上面四类进程中, 我们前端开发工作中会经常接触到的,主要就是渲染进程和GPU进程; 像页面渲染、脚本执行、事件循环、接口请求等都在渲染线程中, 而我们平时在CSS3中使用的硬件加速则是在GPU进程中; 本篇文章主要讨论浏览器的渲染进程.

浏览器内核

浏览器内核是浏览器最重要的组成部分。浏览器内核分两部分:渲染引擎和JS引擎;后来由于JS引擎越来越独立，浏览器内核就倾向于单指渲染引擎。浏览器内核即渲染引擎主要用来解释网页语法并将网页渲染到屏幕上。由于不同的浏览器使用不同的内核,导致对网页语法解释不同，所以就会出现最终渲染的效果不同;常见浏览器内核:

浏览器类型渲染引擎JS引擎

IE

Trident(['traɪd(ə)nt])

Chakra(['gekəʊ])

Chrome

以前Webkit, 现在Blink

V8

Safari

Webkit

JavaScriptCore

渲染进程(renderer)

浏览器的渲染进程(renderer)主要负责页面解析、JS执行、事件循环处理等操作, renderer进程也是多线程的,根据上面的进程图我们知道,任意一个渲染进程都可能包含十几个线程, 这里我们只挑其中的五大常驻线程说一下:

GUI渲染线程：

Graphical User Interface，简称 GUI，又称图形用户界面。

负责将html解析成DOM tree， 将CSS解析成CSSOM tree，然后将二者整合生成Render tree，进行布局（Flow Layout）和绘图（Paint）。

当 Render Tree 中部分或全部元素的尺寸、结构、或某些属性发生改变时，触发浏览器回流(Reflow), 或者当页面中元素样式的改变且不影响它在文档流中的位置时（例如：color、background-color、visibility 等），触发的浏览器重绘(Repaint)。

GUI渲染线程和JS引擎线程是互斥的。 二者不会同时发生

JS引擎线程：

负责解析、执行JS脚本代码

在空闲时执行任务队列中进来的异步任务

每个tab页面只有一个JS引擎线程, 而且与GUI线程互斥; 这是在这门语言设计之初就确立的规则,如果JS引擎线程在增删DOM的时,渲染线程执行渲染页面的操作, 那么此时渲染线程就凌乱, 不知咋办了;

事件触发线程：

浏览器为JS引擎线程开辟的助手，用于控制事件循环;

因为JS引擎是单线程运行的,对于一些耗时的异步任务,JS引擎不能一直等待当前这些耗时操作(往往这些耗时操作并不是因为JS引擎运行速度慢、执行不过来导致的, 大多是由于网络请求、I/O操作等外部原因导致的)处理完再执行后面的代码, 否则就太影响效率了, 所以对于一些像（定时器事件、鼠标事件， 滚动事件， AJX事件），在事件触发时浏览器工作原理是怎样的，事件触发线程会把回调任务添加到事件队列, 等待JS引擎线程来执行,我们经常说的事件循环机制(Event Loop)就发生在这个线程上.

定时器线程

setInterval 和 setTimeout事件所在的线程

为了准确, 这些定时计数器是由单独的线程来维护的, 在d定时结束时,将任务添加到事件队列, 等待JS引擎线程来执行