浏览器架构：
浏览器架构演进：
• 单进程架构：所有模块运行在同一个进程里，包括网络、插件、JavaScript运行环境等。
• 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程
• 面向服务架构：（多进程架构的升级版）将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务。
浏览器架构对比：
浏览器架构的多进程分工： 在浏览器的工具中打开任务管理器，可以看到众多进程。
渲染进程：
常见浏览器内核：
多线程架构：
渲染进程的内部是多线程实现，主要负责页面渲染，脚本执行，事件处理和网络请求等。
• JS引擎线程：
负责解析JS脚本，运行JS程序，每个渲染进程下面只有一个js引擎线程，与GUI渲染线程互斥，如果JS任务执行时间过长，会导致页面卡顿。
• GUI渲染线程：
负责渲染浏览器界面，解析html、css，构建dom树和render树、布局、绘制，和JS引擎线程互斥，GUI更新会在JS引擎空闲时立即执行。
• 定时器触发线程：
定时器所在线程，setTimeout、setlnterval 计时完毕后，将回调添加到事件队列，等待js引擎执行。
• 网络线程：
在XHR、Fetch等发起请求后新开一个网络线程请求，如果设置了回调函数，在状态变更时，将回调放入事件队列，等待js引擎执行。
• 事件线程：
由宿主环境提供，用于控制事件循环，不断地从事件队列里取出任务执行。
JS引擎和渲染引擎的对比：
JS引擎和渲染引擎是相互独立的，如果JS引擎想要操作DOM树，是需要通过桥接方式通信的。
多线程工作流程：
1、网络线程负责加载网页资源
2、JS引擎解析JS脚本并且执行
3、JS解析引擎空闲时，渲染线程立即工作
4、用户交互、定时器操作等产生回调函数放入任务队列中
5、事件线程进行事件循环，将队列里的任务取出交给JS引擎执行。
Chrome运行原理：
如何展示网页：
浏览器地址输入URL后发生了什么：
输入处理：
用户URL框输入内容后，UI线程会判断输入的是一个URL地址还是一个query查询条件 如果是URL，直接请求站点资源 如果是query，将输入发送给搜索引擎
开始导航：
当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容 请求过程中，tab处于loading状态
读取响应：
网络线程接收到HTTP请求后，先检查响应头的媒体类型（即 MIME Type） 如果相应主体是一个HTML文件，浏览器将内容交给渲染进程处理 如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理
寻找渲染进程：
网络线程做完所有准备后，会告知主进程数据已经准备完毕，主进程确认后为这个站点寻找一个渲染进程 主进程通过IPC消息告知渲染进程去处理本次导航 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段。
渲染进程 - 资源加载：
收到主进程的消息后，开始加载HTML文档 除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本
渲染进程 - 构建渲染树：
构建DOM树，将HTML文本转化成浏览器能够理解的结构。 构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM DOM树和CSSOM树都构建完毕后，开始合成渲染树，渲染树是DOM树和CSSOM树的结合。（如下图）
渲染进程 - 页面布局： 根据渲染树计算每个节点的位置和大小（只有位置和大小，没有样式） 在浏览器页面区域绘制元素边框 遍历渲染树，将元素以盒模型的形式写入文档流
渲染进程 - 页面绘制：
1、构建图层：为特点的节点生成专用图层
2、绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
3、合成线程接收指令生成图块
4、栅格线程将图块进程栅格化
5、展示在屏幕上
前端性能：
优化方法：
首屏优化：
• 压缩、分包、删除无用代码
• 静态资源分离
• JS脚步非阻塞加载
• 缓存策略
• SSR
• 预置loading、骨架屏
渲染优化：
• GPU加速
• 减少回流、重绘
• 离屏渲染：GPU需要在当前屏幕缓冲区以外新开辟一个缓冲区进行渲染操作
• 懒加载：也叫延迟加载，指的是在长网页中延迟加载图像。即不会加载用户可视区域外的图像。
JS优化：
• 防止内存泄漏：使用全局变量、定时器时
• 循环尽早break
• 合理使用闭包：
• 减少Dom访问：因为Dom访问耗时长
• 防抖、节流：
节流： n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖： n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时
【想象每天上班大厦底下的电梯。把电梯完成一次运送，类比为一次函数的执行和响应
假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制
电梯第一个人进来后，15秒后准时运送一次，这是节流。
电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。】
• Web Workers
