Web浏览器工作流程解析
2022-07-27 14:17:47 0 举报AI智能生成
浏览器工作流程
作者其他创作
大纲/内容
就是操作系统在内核中开辟一段缓冲区，进程1可以将需要交互的数据拷贝到这个缓冲区里，进程2就可以读取了
管道通信
消息队列就是用户可以添加和读取消息的列表，消息队列里提供了一种从一个进程向另一个进程发送数据块的方法，不过和管道通信一样每个数据块有最大长度限制
消息队列通信
就是映射一段能被其他进程访问的内存，由一个进程创建，但多个进程都可以访问，共享进程最快的是IPC方式
共享内存通信
比如信号量初始值是1，进程1来访问一块内存的时候，就把信号量设为0，然后进程2也来访问的时候看到信号量为0，就知道有其他进程在访问了，就不访问了
信号量通信
其他的都是同一台主机之间的进程通信，而在不同主机的进程通信就要用到socket的通信方式了，比如发起http请求，服务器返回数据
socket
进程间的通信方式
执行上下文（Execution Context）
函数调用栈（call stack）
队列数据结构（Queue）
Promise
关键知识点
策略：FIFO
宏任务队列（Macro Task）
微任务队列（Micro Task）
任务源
事件循环机制
进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程，是操作系统进行资源分配和调度的一个独立单位，是应用程序运行的载体。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。
进程是操作系统分配资源的最小单位，线程是程序执行的最小单位。
一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线；
浏览器主进程
GPU进程
渲染进程
网络进程
打开一个页面，浏览器一般有四个进程
概念
负责控制浏览器除标签页外的界面，包括地址栏、书签、前进后退按钮等，以及负责与其他进程的协调工作，同时提供存储功能
浏览器进程
负责整个浏览器界面的渲染。Chrome刚开始发布的时候是没有GPU进程的，而使用GPU的初衷是为了实现3D CSS效果，只是后面网页、Chrome的UI界面都用GPU来绘制，这使GPU成为浏览器普遍的需求，最后Chrome在多进程架构上也引入了GPU进程
浏览器渲染进程流程图
负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行。
GUI线程
JS引擎线程负责解析Javascript脚本，运行代码。
JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
与Gui线程互斥
JS线程
归属于浏览器而不是JS引擎，用来控制事件循环
由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待 JS引擎处理 （当JS引擎空闲时才会去执行）
事件触发线程
传说中的setInterval与setTimeout所在线程
W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms
定时触发器线程
在XMLHttpRequest连接后是通过浏览器新开一个线程请求
将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。
异步请求线程
浏览器的渲染流程： html转化成dom，css转化成cssom，他们组成渲染树，然后进入布局阶段，分层，绘制，分块，光栅化，合成。
GUI渲染线程: html转化成dom，css转化成cssom，他们组成渲染树，然后进入布局阶段，分层，绘制
会将绘制所得的指令列表拆分成 256256 或者 512512 的图块，然后将图块放到光栅化线程池里面转化成位图。
在GUI渲染线程后执行，将GUI渲染线程生成的带绘制列表转换为位图。
合成线程
用于和其他进程进行通信
网络进程下载完成以后就会将信息发送给 IO 线程，通过IPC 通信。当用户点击页面按钮，浏览器主线程就会把这个信息通过 IPC 发送给 IO 线程。IO 线程会将这个时间包装成任务添加到消息队列里面，供事件循环机制不断处理。
IO线程
渲染进程 示意图
渲染进程（Renderer Process）
负责发起和接受网络请求，以前是作为模块运行在浏览器进程一时在面的，后面才独立出来，成为一个单独的进程
网络进程（Network Process）
主要是负责插件的运行，因为插件可能崩溃，所以需要通过插件进程来隔离，以保证插件崩溃也不会对浏览器和页面造成影响
插件进程（Plugin Process）
Web浏览器工作流程解析
0 条评论
回复 删除
下一页
