浏览器工作原理

    0

大概流程

  1. 根据HTML构建HTML树 (DOM)
  2. 根据CSS构建 CSS树 (CSSOM)
  3. 将两棵树合并成一颗渲染树 (render tree)
  4. Layout布局(文档流、盒模型、计算大小和位置)
  5. Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  6. Compose 合成 (根据层叠关系展示画面)

浏览器进程

  • 浏览器主进程,提供界面交互,管理子进程,文件存储等功能。

  • 网络进程,提供下载网络资源的能力

  • 插件进程,运行插件的进程

  • GPU进程,原是用来渲染CSS 3D的,后用来渲染UI界面

  • 渲染进程,把HTML,CSS,JavaScript转为用户可与之交互的页面,JavaScript引擎便运行在渲染进程内。

进程功能
浏览器主进程主要负责界面显示、用户交互、子进程管理,同时提供存储等功能。
渲染进程核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页,排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中。默认情况下,Chrome 浏览器会为每个tab标签创建一个渲染进程,但如果从一个页面打开了另一个新页面,而新页面和当前页面属于同一站点的话,那么新页面会复用父页面的渲染进程。
GPU进程GPU 的使用初衷是为了实现 3D CSS 的效果,只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制,这使得 GPU 成为浏览器普遍的需求。最后,Chrome 在其多进程架构上也引入了 GPU 进程。
插件进程主要是负责插件的运行,因插件易崩溃,所以需要通过插件进程来隔离,以保证插件进程崩溃不会对浏览器和页面造成影响。
网络进程主要负责页面的网络资源加载。

详细流程

构建dom树

计算样式

布局

分层

图层绘制

栅格化(光栅化)

合成和显示

总结

1、渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。

2、渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets,计算出 DOM 节点的样式。

3、创建布局树,并计算元素的布局信息。

4、对布局树进行分层,并生成分层树。

5、为每个图层生成绘制列表,并将其提交到合成线程。

6、合成线程将图层分成图块,并在光栅化线程池中将图块转换成位图。

7、合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

8、浏览器进程根据 DrawQuad 消息生成页面,并显示到显示器上。

评论区

共有评论 0

暂无评论