进程与线程
进程是内存分配的最小单位,线程是CPU调度的最小单位
浏览器内核——浏览器渲染进程
- GUI渲染线程
解析HTML,CSS 构建DOM树,render树,布局绘制
与JS引擎线程互斥 - JS引擎线程
处理js代码,事件循环 - 定时器线程
setTimeout/setInterval计时 - 事件线程
准备回调交给js引擎线程执行 - 异步线程
微任务&宏任务
- 常见宏任务:I/O,UI渲染,定时器,主线代码
- 常见微任务:Promise,MutationObserver
- 每执行一个宏任务都会清空微任务队列
缓存策略
- 地址栏的缓存
HSTS(HTTP Strict Transport Security)强制客户端浏览器使用https协议与服务器创建连接 - DNS缓存(DNS Prefetch)
让具有该属性的域名不用等用户点击就在后台解析 - ARP缓存(Address Resolution Protocol)
储存IP地址和MAC地址的映射表 - TCP Buffer区缓存
浏览器多进程架构
- 进程
- 主进程:控制地址栏,书签,网络请求,文件访问
- UI线程
- 网络线程
- 存储线程
- 渲染进程: 关于页面显示
- 插件进程: 网站使用的插件
- GPU进程: 独立于其他进程处理GPU任务
- 优点
- 互不影响
- 沙盒安全
- 整合成服务,节省资源
- 站点隔离
- CORB
限制敏感资源进入渲染进程的内存
一张网页的一生
- 输入的URL被主进程的UI线程接管
- UI线程判断是字符串还是域名
- 用户点击进入,UI线程将域名交给网络线程,然后将进度条显示在选项卡上
- 网络线程DNS找到IP并进行特定协议的链接
- 网络线程获取到数据并对数据类型进行识别,如果是HTML文件就交给渲染进程,如果是下载请求就交给下载管理器,同时与恶意站点匹配,发出警告
- 主进程将数据提交给渲染进程,同时地址栏更新
- 渲染进程接收到html文件开始解析构成DOM树,同时CSS脚本等外部资源从缓存或者通知主进程的网络线程加载
- 主线程解析CSS,确定每个DOM元素的计算样式
- 主线程遍历DOM,计算样式,并创建布局树,布局树种包含x,y坐标和边界框大小
- 确定绘制顺序,开始绘制
- 光栅化
将布局树信息和绘制记录(顺序)信息转换成屏幕上的像素 - 将页面分层分别光栅化,当页面滑动时,重新在单独线程的合成器下合成新帧
2.遍历布局树,创建层树
3.主线程将层树信息提交给合成器线程
4.合成器线程将每个层分割成小的瓦片,交给栅格线程,栅格线程栅格化后储存在GPU内存中
5.合成器线程收集瓦片,创建合成器帧
6.合成器帧发送到GPU,显示在屏幕上
浏览器事件与合成器
- 浏览器事件由主进程捕获,主进程将位置信息和事件类型交给渲染进程处理
- 采用合成器合成页面主要优势就是不用与主进程通信
- 所以合成器在合成页面的时候会指定一个区域为“非快速可滑动区域”,此区域可以处理事件,此区域之外不影响合成
