这是我参与「第五届青训营」笔记创作活动的第四天

一、本堂课重点内容：

• 浏览器架构
  • 浏览器架构变迁
  • 浏览器各架构对比
  • 多进程架构介绍
• 渲染进程
  • 渲染进程多线程架构
  • JS引擎VS渲染引擎
  • 多线程工作流程
• chrome运行原理
  • 主进程工作流程
  • 渲染进程工作流程
  • 浏览器性能优化
• 跨端容器
  • 跨端的由来
  • 常见的跨端方案

二、详细知识点介绍：

浏览器框架

浏览器架构演进

• 单进程架构：所有模块都运行在一个进程里，包含网络、插件、javascript运行环境等
• 多进程架构：主进程、网络进程、GUI进程、渲染进程、插件进程。
• 面向服务架构：将原来的UI，数据库，文件、设备、网络等。作为一个独立的基础服务。

浏览器架构

• 架构对比
• 任务管理器
• 多进程分工

渲染进程

内部是多线程的实现，其中包括：

• GUI渲染线程（与JS引擎线程互斥）
• JS引擎线程
• 定时器线程
• 实践出发线程
• 网络请求执行线程

Chrome的运行原理

主进程工作流程

• 输入处理
• 开始导航
• 读取响应
• 寻找渲染进程
• 资源加载
• 构建渲染树
• 页面布局
• 页面绘制
• 性能工作performance

首屏优化

• 压缩：只使用特定的算法来压缩网页中的资源文件（如HTML、CSS、JavaScript和图片等），以减小文件大小，加快加载速度。
• 分包：指将网页中自愿文件分成多个包，按需加载。
• 删除无用代码：指删除网页中不再使用的代码和资源文件，以减小文件大小，加快加载速度。

三、课后个人总结：

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