客户端容器|青训营笔记本文内容包括浏览器架构、渲染进程、Chrome运行原理、跨端容器四大部分，重点在多进程架构、多线程

1.浏览器架构演进

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

各浏览器架构对比：

浏览器任务管理器：

任务管理器负责监控、管理和分配浏览器的各个进程，确保整个浏览器系统的稳定性和性能。包括【进程监控、进程管理、资源分配、进程隔离、异常处理】

多进程浏览器分工：

思考问题：

a.为什么会有单进程架构

单进程架构在早期的浏览器中出现，当时的Web技术相对较为简单，浏览器需要处理的任务和复杂性远不及现在。在这个背景下，单进程架构具有一些优势：Ⅰ较为简单，更易于实现和维护；Ⅱ资源消耗少；Ⅲ兼容性好

b.面向服务架构是否会替代多进程架构？

面向服务架构在某种程度上可以看作是多进程架构的一种演进和优化。这种架构将浏览器的各个功能模块化，作为独立的服务来运行和维护。这样可以进一步提高浏览器的稳定性、安全性和性能，同时优化资源利用率。

尽管面向服务架构具有一定的优势，但是它不一定会完全替代多进程架构。这是因为两种架构各自有不同的应用场景和优缺点。

面向服务：适用于复杂的浏览器系统；模块化和灵活性高；成本大，消耗资源多
多进程：更易于实现；成本相对小，消耗资源少

2.渲染进程

浏览器内核：

多线程架构：

多进程场景：在多进程浏览器中，每个Tab标签页都运行在一个单独的进程中，以实现进程间的隔离和资源管理。
多线程场景：在一个图形编辑器中，可以使用多个线程分别处理用户输入、图形渲染和文件保存等任务，从而提高程序的响应速度和执行效率。

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

JS引擎和渲染引擎：

Bridge:JS引擎提供了DOM API，使得JavaScript代码可以访问和操作DOM树。

多线程工作流程：

网络线程负责加载网页资源。【如HTML、CSS、JavaScript、图片等】
JS引擎解析JS脚本并且执行。
JS解析引擎空闲时，渲染线程立即工作
用户交互、定时器操作等产生回调函数放入任务队列中
事件线程进行事件循环，将队列里的任务取出交给JS引擎执行【通过回调】

setTimeout笔试题：

const now = Date.now();

// 定时器1：异步，放入任务队列10ms后执行
setTimeout(() => {
 console.log('time10', Date.now() - now); //大于20
}, 10);

// 定时器2：异步，放入任务队列30ms后执行
setTimeout(() => {
 console.log('time30', Date.now() - now); //30附近
}, 30);

// 主线程立即执行，直到大于20ms时退出
while (true) {
 if (Date.now() - now >= 20) {
  break;
  }
}

//主线程立即执行
console.log(Date.now() - now); //20

注：放入任务队列就开始计时，而不是先放入，等主线程执行完毕才开始计时

3.chrome运行原理

左侧是浏览器主进程中的导航流程，目的是为了保证用户能够成功加载并显示所请求的网页

输入处理：UI线程会判断输入的是一个URL地址还是一个query查询条件
开始导航：UI线程通知网络线程发起一个网络请求
读取响应：网络线程读取响应主体是HTML，浏览器将内容交给渲染进程处理|其他类型文件，比如Zip、exe等，则交给下载管理器处理
寻找渲染进程：网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后通过IPC为这个站点寻找一个渲染进程

渲染进程不再累述...

前端性能performance：

时间都花在哪？

页面加载时间、网络请求时间、渲染时间、绘制时间...

什么情况下卡顿？

卡顿一般是由于浏览器在渲染页面时遇到了阻塞或耗时操作导致的。以下是一些可能导致卡顿的情况：

JavaScript执行时间过长：JavaScript的执行会阻塞页面的渲染。如果脚本执行时间过长，会导致页面无响应或卡顿现象。
大量的DOM操作：DOM操作会影响页面的渲染，特别是在大量DOM操作时。如果需要频繁地更新DOM元素，可以考虑使用虚拟DOM等技术来减少DOM操作次数。
大量的网络请求：浏览器在渲染页面时需要下载和解析HTML、CSS、JavaScript和图像等资源。如果有大量的资源需要下载，会导致页面加载时间过长。
大量的样式和布局计算：如果页面包含大量的样式和布局计算，会影响页面的渲染性能。

优化：

首屏优化：

压缩、分包、删除无用代码【减小体积，加快页面的加载速度】
静态资源分离【将页面中的静态资源（如CSS、JavaScript和图像等）与HTML文档分离，可以使得浏览器可以并行加载这些资源，从而提高页面的加载速度】
JS脚本非阻塞加载【defer和async】
缓存策略【通过使用HTTP响应头中的Cache-Control和Expires等属性来设置缓存策略】
服务器端渲染SSR（Server Side Rendering）【服务器生成HTML,适用于复杂的单页面应用或对SEO有要求的应用】
预置loading、骨架屏【提高用户体验】