浏览器架构对比
| 架构类型 | 扩展性 | 安全性 | 稳定性 | 流畅性 |
|---|---|---|---|---|
| 单进程架构 | 低，所有模块运行在同一进程里，访问同一块内存区域，数据没隔离，新增模块可能会影响原有功能 | 低，三方插件可直接访问操作系统里任意资源 | 低，三方插件漏洞或者某个tab页面Javascript脚本问题可能导致浏览器崩溃 | 卡顿，所以页面运行在同一进程中，开启多个页面时明显卡顿 |
| 多进程架构 | 中，各进程分配独立的内存区域，有些进程功能较大，耦合度高 | 高，运行在独立沙箱中，不能访问系统敏感资源 | 高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程 | 顺畅，每个页面运行在独立的渲染进程中，充分利用系统资源 |
| 面向服务架构 | 高，服务模块划分更细，更内聚，耦合性低，易于扩展 | 高，运行在独立沙箱中，不能访问系统敏感资源 | 高，进程相互隔离，当一个页面或者插件崩溃时，不会影响其他进程 | 顺畅，每个页面运行在独立的渲染进程中，充分利用系统资源 |
渲染进程-多线程构架
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
| 线程 | 功能 |
|---|---|
| js引擎 | 负责解析js脚本，运行js程序，每个渲染进程下面只有一个js引擎线程。与GUI渲染线程互斥，如果js任务执行事件过长，会导致页面卡顿 |
| GUI渲染 | 负责渲染浏览器界面，解析html，css，构建dom树和render树，布局，绘制，和js引擎线程互斥，GUI更新会在js引擎空闲时立即执行 |
| 定时器触发 | 定时器所在线程，setTimeout，setlnterval计时完毕后，将回调添加到事件队列，等待js引擎执行 |
| 网络线程 | 在XHR，Fetch等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待js引擎执行 |
| 事件触发 | 由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行 |
经典问题：浏览器地址输入url后发生了什么
主进程
graph TD
输入处理 --> 开始导航
开始导航 --> 读取响应
读取响应 --> 寻找渲染进程
然后渲染进程中：资源加载 --> 构建 --> 布局 --> 绘制 --> 合成 --> 完成的内容返回浏览器主程序
graph TD
加载子资源 --> 构建DOM
构建DOM --> 布局
布局 --> 构建图层
构建图层 --> 光栅化
光栅化 -->展示完成
加载子资源 --> 执行脚本
构建DOM --> 构建CSSOM
构建CSSOM --> 构建渲染树
构建图层 --> 绘制图层
首屏优化
1.压缩，分包，删除无用代码 2.静态资源分离 3.js脚本非阻塞加载 4.缓存策略 5.SSR 6.预设loading，骨架屏
渲染优化
1.GUP加速 2.减少回流，重绘 3.离屏渲染 4.懒加载
JS优化
1.防止内存泄漏 2.循环尽早break 3.合理使用闭包 4.减少Dom访问 5.防抖，节流 6.Web Workers
