![](https://i-blog.csdnimg.cn/blog_migrate/307c1c97896c20c831ced5664989848f.jpeg)
浏览器构成
基本概念:
1、浏览器分类(五个主流):chrome(内核:blink基于webkit)、
safari(webkit)、firefox(gecko)、ie(triddent)、opera(blink)
2、浏览器的构成:用户界面、浏览器引擎(查询与操作渲染引擎的接口)、渲染引擎、js解析、数据存储、网络(请求)、ui后端
浏览器内核构成:渲染引擎和js引擎(但是由于js引擎越来越独立,所以浏览器内核就单指渲染引擎)
渲染引擎
作用:解析html并显示出来
流程:解析html以构建dom树 -> 构建render树 -> layout布局render树 -> 绘制render树
dom树:html文档中的元素及其节点构成
render树:可见元素(比如head元素就是不可见)及其盒子、样式(displaynone属于不可见样式)
js引擎
这里有个nodejs引擎,这是基于谷歌浏览器js引擎(v8引擎)进行的封装)
3、浏览器作用:将用户选择的资源呈现出来
浏览器中的进程与线程
比喻:cpu-工厂 进程-车间 线程-工人
浏览器进程:
浏览器有多个进程,一个主进程,如下:
1、browser进程:主进程,一个,作用协调、主控
2、浏览器渲染进程:每打开一个tab网页就相当于开了一个渲染进程实例,进程之间相互独立,不共享资源
3、第三方插件进程:一个,每一类插件对应一个进程,仅当使用该插件时才创建
4、GPU进程:3D绘制
多进程的优缺点:如果浏览器是单进程,那么某个 Tab 页崩溃了,就影响了整个浏览器,体验有多差;同理如果是单进程,插件崩溃了也会影响整个浏览器;当然内存等资源消耗也会更大
浏览器进程与浏览器内核进程的通信:
a、Browser进程收到用户获取页面内容请求,将该任务通过RendererHost接口传递给Render进程
b、Renderer进程的Renderer接口收到消息,交给渲染线程,然后开始渲染
c、渲染线程接收请求,加载网页并渲染网页,可能需要Browser进程获取资源和需要GPU进程来帮助渲染,会有JS线程操作DOM(回流、重绘)
d、最后Render进程将结果传递给Browser进程
e、Browser进程接收到结果并将结果绘制出来
浏览器中的线程:
确切的应该是浏览器内核的线程,即渲染进程的线程,多个,每个tab页是有多线程的,线程如下:
1、GUI渲染线程
作用:将html文件渲染到浏览器界面
流程:构建 DOM 树、构建渲染树、布局、绘制、渲染层合成(composite) ,具体如下:
a、构建dom树:解析html和css,将元素与其节点构建DOM树和CSSOM树(css是由下载线程异步下载的,不会阻塞html解析,但是会阻塞render树和js解析,所以优化上把link标签的css放在顶部)
b、构建render树:根据DOM树从根节点开始遍历可见节点;针对每个可见节点寻找CSSOM树中的几何属性样式;合成构建render树
c、布局(layout):根据构建好的render树进行位置和大小的计算(回流),根据计算好的几何属性进行layout布局
d、绘制(Paint):遍历渲染树,调用渲染器的 paint() 方法将布局中的节点转换成界面上的实际像素。该过程有一些不影响布局的 CSS 修改引起的屏幕局部重画,称为重绘(Repaint)。绘制过程是在多个层上完成的,这些层称为渲染层(RenderLayer)。
e、渲染层合成(composite):渲染层根据层叠顺序合并生成位图,交给显卡展示在屏幕上
回流与重绘
参考网址:https://www.c