浏览器加载过程

361 阅读2分钟

进程级别

进程分为:浏览器进程、渲染进程(浏览器内核)、插件进程、GPU进程、网络进程。

浏览器进程:1个进程,负责界面显示、用户交互(事件的位置传递)、子进程的管理、还提供了存储功能。

渲染进程:多个进程与tab标签的个数有关。主要负责将HTM、CSS和Javascript转换为用户可以与之交互的网页,浏览器内核Blink和Javascript的V8都是运行在该进程中,出于安全考虑,渲染进程都是运行在沙箱模式下。

GPU进程:由于网页和chrome的UI界面都采用GPU进行绘制,使得GPU成为普遍需求,最后,Chrome在其多进程架构上也引入了GPU进程。

网络进程:主要负责页面的网络资源加载,之前是作为一个模块运行在浏览器进程里面的,现在单独形成一个进程。

插件进程:多个,主要是负责插件的运行,因为插件进程易于崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。

导航流程

导航流程主要是浏览器进程、网络进程、渲染进程之间的通讯。其中用户的输入操作在浏览器进程中进行,浏览器将解析完成的URL发送给网络进程、网络进程从服务器端获取html页面,网络进程解析头部信息发送给浏览器进程,浏览器开始准备渲染进程,渲染进程创建后与网络进程创建数据通道,然后发送确认文档被提交然后开始从网络进程获取html数据并开始渲染流程。

渲染进程

  1. 渲染流水线:构建DOM树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

  2. 构建DOM树:将html的标签解析成为dom树对象。

  3. 样式计算:通过外部样式、内联样式、style标签内的样式。生成一个样式树。过程中有两个点(1每个DOM节点都会继承父节点的样式。2內联 > ID选择 > class选择|attribute选择|伪类选择 > element选择 > 通配符选择 > 继承)

  4. 布局阶段:通过DOM树+样式树生成一个布局树(只包含可见节点)

  5. 分层:渲染引擎会将渲染树分层展示,拥有层叠上下文属性的元素会单独提升一层(规则),第二点需要剪裁(clip)的地方也会被创建为图层。(剪裁)

  6. 绘制:为每个图层生成绘制列表->提交给合成线程-> 合成线程将图层分图块 ->交由光栅线程(交给GPU进程)生成位图 ->最后合成线程通知浏览器展示。