浏览器的构成
浏览器主要由SHELL和内核两部分组成，其中内核又分为渲染引擎和JS引擎。渲染引擎主要用于获取网页结构、添加CSS样式、计算网页结构等；JS引擎用于解析JavaScript语言，为网页添加动态效果。
浏览器内核
现市面上主流的浏览器内核有：
- Trident内核：由微软公司开发，主要浏览器有IE；
- Webkit内核：由苹果公司基于KHTML开发，主要浏览器有Safari、Chrome、360；
- Gecko内核：用C++开发的，主要浏览器有firefox；
- Presto内核：主要浏览器有Opera。
进程与线程
一、概念
进程相当于工厂：
- 有单独的空间（浏览器分配的内存）；
- 工厂与工厂之间彼此独立（进程与进程间相互独立）。
线程相当于工厂里的工人：
- 多个工人合作完成一个项目（多个线程完成一个进程）；
- 工人间共享空间（同一进程下的各个线程之间共享程序的内存空间，包括代码段、数据集、堆等）。
二、浏览器
浏览器是多进程的，主要包括：
1、browser进程：浏览器的主进程，主要负责浏览器的界面显示、与用户交互；网络资源的下载等；
2、第三方插件进程：每种插件对应一个进程，仅当使用插件时才会创建进程；
3、GPU进程：最多一个，用于3D绘制；
4、浏览器渲染进程（Render进程）：默认浏览器的每个Tab页就是一个render进程；负责网页的渲染、事件处理等。由多个线程共同完成：
- GUI渲染线程：
- 负责页面的渲染；
- 解析HTML、CSS，创建DOM树、Render树；
- 与JS引擎线程相斥。
- JS引擎线程：
- 负责解析JavaScript脚本；
- 与GUI渲染线程相斥。
- 事件触发线程：
- 归属于浏览器而不是JS引擎，用来控制事件循环；
- 当JS引擎执行代码块（如鼠标点击事件等）时，将事件添加到事件队列中，等待JS引擎线程执行；
- 计时触发器线程：
- 主要负责计时（setTimeout与setInterval），计时完毕后添加到事件队列中等待执行；
- 异步HTTP请求线程：发送网络请求。
browser进程与浏览器渲染进程的通信
1、browser进程接收到请求，先获取页面内容（从网络上下载资源），然后通过RendererHost接口传递给浏览器渲染进程；
2、浏览器渲染进程中的GUI渲染线程开始页面渲染，这其中可能会需要browser进程帮忙下载资源以及GPU进程的帮助；
3、浏览器渲染进程将渲染的结果发送给browser进程，browser进程对页面进行展示。
GUI渲染线程
1、解析HTML，并生成DOM树；
2、解析CSS，构建CSS规则；
3、将CSS规则与DOM树合并成render树；
4、布局render树（layout / reflow）；
5、绘制render树（paint）；
6、浏览器将各层的信息发送给GPU进程，GPU将各层信息进行合并（composite），并显示在屏幕上。
JS运行机制
1、JS运行主要包括三个方面：JS引擎线程、事件触发线程、计时触发器线程。
2、JS分为同步任务和异步任务。同步任务会被放进执行栈中，JS会优先处理执行栈中的任务，当执行栈中的任务被执行完毕（JS引擎空闲）时，由事件触发线程负责的事件队列中的任务会被提至JS引擎进行处理。
3、当使用setTimeout时，计时触发器线程负责计时，计时完毕后会被放进事件队列中等待JS引擎空闲处理。
网友评论