一、浏览器架构演进：
1、单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
2、多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
3、面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
二、浏览器架构对比
| 架构类型 | 扩展性 | 安全性 | 稳定性 | 流畅度 |
|---|---|---|---|---|
| 单进程架构 | 低 | 低 | 低 | 卡顿 |
| 多进程架构 | 中 | 高 | 高 | 流畅 |
| 面向服务架构 | 高 | 高 | 高 | 流畅 |
三、渲染进程-多线程架构
——内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
——JS引擎VS渲染引擎：1、解析执行JS。2、XML解析生成渲染树，显示在屏幕。3、桥接方式通信。
——工作流程：1、网络线程负责加载网页资源。2、JS引擎解析JS脚本并且执行。3、JS解析引擎空闲时，渲染线程立即工作。4、用户交互、定时器操作等产生回调函数放入任务队列中。5、事件线程进行事件循环，将队列里的任务取出交给JS引擎执行。
四、Chrome运行原理-如何展示网页
——输入处理：1、用户Url框输入内容的后，UI线程会判断输入的是一个URL地址还是一个query查询条件。2、如果是URL，直接请求站点资源。3、如果是query，将输入发送给搜索引擎
——开始导航：1、当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容。2、请求过程中，tab处于loading状态
——读取响应：1、网络线程接收到HTTP响应后，先检查响应头的媒体类型
2、如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
3、如果拿到的是其他类型文件、比如Zip、exe等，则交给下载管理器处理
——资源加载：1、收到主进程的消息后，开始加载HTML文档；2、除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本
——构建渲染树：1、构建DOM树，将HTML文本转化成浏览器能够理解的结构
2、构建CSSOM树、浏览器同样、不认识CSS，需要将CSS代码转化成可理解的CSSOM
3、构建渲染树，渲染树是DOM 树和CSSOM树的结合
——页面布局：1、根据渲染数计算每个节点的位置和大小
2、在浏览器页面区域绘制元素框架
3、遍历渲染树，将元素以盒模型的形式写入文档流
——页面绘制：
1、构建图层：为特定的节点生成专用图层
2、绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
3、合成线程接收指令生成图块
4、栅格线程将图块进行栅格化
5、展示在屏幕上
——首屏优化：1、压缩、分包、删除无用代码；2、静态资源分离；3、JS脚本非阻塞加载；4、缓存策略；5、SSR；6、预置loading、骨架屏
——渲染优化：1、GPU加载；2、减少回流、重绘；3、离屏渲染；4、懒加载
——JS优化：1、防止内存泄露；2、循环尽早break；3、合理使用闭包；4、减少Dom访问；5、防抖、节流；6、Web Workers
——为什么需要跨端：1、开发成本、效率；2、一致性体验；3、前端开发生态
——跨端方案：webview、小程序、RN/WeeX、Lynx、Flutter 通过本节课老师的讲解，学习到了很多漏掉的知识，也复习巩固了之前学过的点，老师的讲解很容易理解，通俗易懂。
