进程
- 申请和拥有计算机资源
- 不同进程间通信通过进程间通信管道IPC
线程
- 一个进程多个线程，每个线程执行不同的任务
浏览器一般可以分为以下几个部分
- 用户界面
- 浏览器引擎
- 渲染引擎 (内核)
- 进程
浏览器引擎
数据持久层
渲染引擎 (内核)
- 网络
- js解析器
进程
- 浏览器进程
- 网络进程
- GPU进程
- 插件进程
- 渲染器进程
- 缓存进程
浏览器地址栏输入地址时
一、浏览器进程的UI线程会扑捉你的输入内容
二、如果是网址，UI线程会启动一个网络线程请求DNS进行域名解析，连接服务器获取数据
1、safeBrowsing 检查站点是否是恶意站点
2、网络线程通知UI线程准备好了
3、UI线程会创建一个渲染器进程渲染页面
4、浏览器进程会通过IPC管道将数据传递给渲染器进程，进入渲染流程
- 4.1 渲染器进程获取到数据就是html, 将html, css，JS, image 渲染成用户可交互的web页面
- 4.2 渲染器进程 主线程将html 进行解析，构造DOM数据结构
4.2.1、html首先经过tokeniser 标记化，通过词法分析将输入的html内容解析成多个标记，根据识别后的标记进行DOM树构造，在DOM树构建过程中会创建document对象，然后以document为根结点的DOM树不断进行修改，向其中添加各种元素
4.2.2、图片和css这些资源需要网络下载，或者从缓存中直接加载，这些资源不会阻塞html的解析，因为他们不会影响DOM的生成，但当html解析过程中遇到script标签，就会停止html的解析流程，转而去加载解析并执行js, (因为浏览器并不知道js执行是否会改变当前页面html结构，如果就是代码里调用了document.wirte 来修改html，那之前解析就没有意义了，这就是为什么把script 放在合适的位置，或者使用async 和 defer 属性 异步加载js)
4.2.3、解析完成后我们会获取一个DOM Tree, 但我们不知道每个节点长什么样子，主线程需要解析css并确定每个DOM节点计算样式，即使没有写样式，浏览器也有默认样式
4.2.4、需要知道每个节点放在页面哪个位置，也就是节点坐标该占用多大区域，这就layout布局，主线程通过遍历DOM和计算好的样式来生成layout Tree
4.2.5、需要知道绘制顺序来绘制节点，为保证正确层级，主线程遍历layout Tree创建一个绘制记录表（Print Record）记录绘制顺序，这个阶段叫做绘制
4.2.6、把信息转化为像素点显示在屏幕上，这种行为叫做删格化，将页面各个部分分成多个图层分别删格化并在合成器线程中 单独进行合成页面，详细过程 - 主线程遍历layout Tree 生成 layer Tree, 生成完毕和绘制顺序确定后，主线程把信息传递给合成器线程，合成器线程把每个图层删格化，并把他们切分成很多图块，然后将每个图块发送给删格线程，删格线程删格化每个图块，将它们存储在GPU内存中，当图块删格化完成后，合成器线程根据这些信息生成一个合成器帧，通过IPC传递给浏览器进程，浏览器进程传给GPU 渲染到屏幕上
5、重排：当我们改变元素尺寸位置，会重新进行样式计算，布局、绘制
6、重绘：修改颜色属性，不会触发布局，还是会样式计算和绘制
7、优化：重排、重绘，js 也在主线程，多次触发重排、重绘，js 还没执行完毕主线程还没归还，会造成程卡顿。1、requestAnimationFrame，每一帧被调用 2、transform 不会经过布局和绘制，直接运行在合成器线程和删格线程，不会收到主线程js的影响
网友评论