前端学习-界面渲染过程

界面渲染过程

• 1 地址栏输入 url 地址
• 2 DNS 会完成域名解析， 帮我们找到相应的服务器主机
• 3 建立 TCP 的端到端连接(将你的电脑跟接勾的服务器主机建立一条传输数据的通道)
• 4 因为 TCP 是处于网络模型中的传输层，而具体的 BS架构数据传输是发生在应用层，所以我们需要通过应用层的 http 协议来跟服务器主机进行数据交换
• 5 服务端会依据客户端提交的数据进行计算，从而返回具体的内容给到客户端
• 6 第五步完成之后就相当于浏览器此时就拿到了网页资源数据(字符串)【 网络IO 磁盘IO 操作的是二进制数据】
• 7 浏览器拿到了字节数据之后就想要对它进行渲染，然后展示在界面上

浏览器多进程

• 多个渲染进程
  Html css js 相关的操作
• 插件进程
  针对于浏览器插件的处理
• 浏览器主进程
  管理浏览器本身的一些操作
• GPU 进程
  最初就为了实现 3D动画
• 网络进程
  下载网络资源的

浏览器如何渲染界面

• a 渲染进程里就会开启一个进程调用 Html 解析器来执行渲染
• b 首先会将字节数据处理成字符串，然后再从字符串里挑出来对应的 Token(标签)，最后再将这些标签放在一起生成一个 DOM 树
• c 与 DOM树构建同时的还有一个 CSSOM 树的构建过程
• d 将DOM树和 CSSOM 树进行合并生成了渲染树 (存在于内存里的东西，浏览器界面上看不见)
• e 依据渲染树进行回流( 重排 ) 可以依照之前树来确定界面上人他们的几何信息(大小、位置)
• f 重排之后就会进行重绘，将上面计算出来的所有信息都通过 GPU 调用相应 GUI API 针后绘制在屏幕上
• g 之后就可以看到界面了