青训营笔记

客户端容器

课程介绍

本节课程主要着重介绍浏览器的架构以及运行原理，并以一道八股文为例，讲解在Chrome浏览器里，网页是如何加载并且渲染成我们所见的画面。通过对本节课的学习，你还能了解到在浏览器里JS引擎和渲染引擎如何协同工作，如何从多个角度优化前端的性能体验。再以webview容器为扩展，带你认识一些常见的跨端方案

课程重点

• 浏览器架构

  • 浏览器架构变迁
  • 浏览器各架构对比
  • 多进程架构介绍

• 渲染进程

  • 渲染进程多线程架构
  • JS引擎VS渲染引擎
  • 多线程工作流程

• chrome运行原理

  • 主进程工作流程
  • 渲染进程工作流程
  • 浏览器性能优化

• 跨端容器

  • 跨端的由来
  • 常见的跨端方案

浏览器架构

1. 单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
2. 多进程架构：主进程、网络进程、渲染进程、CPU进程、插件进程
3. 面相服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

渲染进程

常见浏览器内核

渲染进程-多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，时间处理，网络请求等

JS引擎和渲染引擎对比

1. 解释执行JS
2. XML解析生成渲染树，显示在屏幕
3. 桥接方式通信

渲染进程-多线程工作流程

1. 网络线程负责加载网页资源
2. JS引擎解析JS脚本并且执行
3. JS解析引擎空闲时，渲染线程立即工作
4. 用户交互，定时器操作等产生回调函数放入任务列表中
5. 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

Chrome运行原理

Chrome运行原理-如何展示网页

Chrome运行原理-输入处理

1. 用户Url线程会判断输入的是一个URL地址还是一个query地址
2. 如果是URL，直接请求站点资源
3. 如果是query，将输入发送给搜索引擎

Chrome运行原理-开始导航

1. 当用户按下回车，，UI线程通知网络进程发起一个网络请求，来获取站点内容
2. 请求过程中，tab处于loading状态

Chrome运行原理-读取响应

1. 网络线程接收到HTTP响应后，先检查响应头的媒体类型
2. 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
3. 如果拿到的是其他类型文件，如Zip、exe等，则交给下载管理器处理

Chrome运行原理-寻找渲染进程

1. 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
2. 主进程通过ipc消息告知渲染进程取处理本次导航
3. 渲染进程开始接收数据并告知主进程自己已经开始处理，导航结束，进入文档加载阶段