浏览器核心原理
2021-05-27 本文已影响0人
mafa1993
canvas核心与原理
- canvas 渲染引擎 skia
- flutter 是 dart + ski
- 页面是 js + skia + 解析
- canvas是面向于CPU编程 webgl面向GPU编程（片云、定点着色器等，GPU可以并行）
- beginPath会创建一个集合。moveTo 向集合追加路径，stroke, 根据集合绘制
- canvas基于状态和路径绘图，调用scale和translate api是在下次绘制时，新的图形会变成两倍，原图形不变
- save和restore就是保存状态到堆栈，然后重新创建一个状态。撤销的是堆栈的存储
canvas 渲染引擎
- 拾取，选中，拖动，改变颜色，绘制两层，上下层图形一致，下层用颜色用来当做唯一标识，用点击的点获取颜色就可以饿到图像的id
- 局部绘制
- 分层
- 事件封装
- 坐标点计算，怎么进行优化，可以使用webgl，从而使用GPU运算
- 多线程数据传递 postMessage使用结构化克隆算法，所有数据会进行一次拷贝复制，使用shareBuffer，会共享，不会进行复制 wa也存在数据传递问题
- 然后分层，解决全量绘制的问题，选中的时候，将选中的这层进行绘制，移出的时候，擦除
- 拾取的鄫可以在内存中使用createElement创建
- gc会阻塞渲染和js执行
- quickjs + libuv
- wa（中间字节码）
- 中间字节码，可以根据不同的硬件和机器运行，不同的语言调用机器接口，要转换成一个统一规范的东西
- 浏览器可以直接加载中间字节码
- 例如视频的解码，编码，在浏览器端，使用字节码
- 运行之前，编译成适配各个机器的代码
- js等式运行时编译
进程
- 浏览器进程
- 请求，如果请求的是css，html会交给渲染进程
- 定时器
- 读写io
- ui线程，刷新，前进后退等浏览器上的操作
- 渲染进程
- 合成线程 启动主线程 判断时间数据是否还需要传递到主线程 这是最先被告知垂直同步事件（vsync event，操作系统告知浏览器刷新一帧图像的信号）的线程。它接收所有的输入事件。如果可能，合成线程会避免进入主线程，自己尝试将输入的事件（比如滚动）转换为屏幕的移动。它会更新图层的位置，并经由 GPU 线程直接向 GPU 提交帧来完成这个操作。如果输入事件需要进行处理，或者有其他的显示工作，它将无法直接完成该过程，这就需要主线程了。
- main 主线程 parseHtml webkit进行解析，遇到script就启动v8 => 编译js => 执行 然后形成domTree 和cssTree。合成layoutTree（计算节点的大小和位置） => update layer tree （有层级概念） 层叠上下文，计算哪些元素在哪层 => paint 绘制记录表（描述了具体怎么绘制） => composite 将绘制记录表交给合成线程，合成线程将页面切分，切成一个个图块（原来浏览器会边滚动边绘制，哪里重绘就只执行哪一块） => 栅格化
- tile work 栅格化， 将cpu存储的数据，point line color 转换成一个个像素点 => 绘制四边形 draw => 如果某个图块上有事件，就把这个图块定义成非快速滚动区，根据事件点击的像素点。判断是否是在非快速滚动区
- GPU 渲染
- 层叠上下文绘制过程
- 绘制背景和边框
- 绘制z-index 为负数的
- 绘制流式布局（无position 无flow 非inline-block元素）
- 无position的flow元素
- 内联元素
- z-index 为0 transform opacity的元素
- z-index为正的
