浏览器 == 客户端容器
一、浏览器的演进史与对比
单进程架构的缺点主要是：
1.访问同一块内存区域，会相互影响 2.单进程导致卡顿
面向服务架构简单来说就是更细分的多进程架构，降低了耦合度
二、现代浏览器的多进程分工
三、渲染进程
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
工作的具体流程如下，就是之前学习的Js的event loop哦
-
网络线程负责加载网页资源
- 网络线程的主要任务是从服务器加载网页资源，如HTML、CSS、JavaScript、图片等。加载过程中，网络线程会将HTML和CSS交给渲染线程进行解析，并将JavaScript交给JS引擎进行解析和执行
-
JS引擎解析JS脚本并且执行
-
JS解析引擎空闲时，渲染线程立即工作
- 负责解析HTML和CSS，构建DOM树和渲染树，计算布局信息，并将渲染树转换为屏幕上的像素。
-
用户交互、定时器操作等产生回调函数放入任务队列中
-
事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
事件循环中，一定是先执行完同步任务，才会去执行异步任务
四、首屏优化
- 压缩、分包、删除无用代码，减小代码的体积
- 静态资源分离：可以把静态资源放在CDN上
- JS脚本非阻塞加载：即JS脚本异步加载（JS引擎和渲染进程互斥）
- 缓存策略
SSR
- 服务器端渲染（Server Side Rendering）可以在服务器端生成HTML文档，减少客户端渲染的工作量，从而提高页面的加载速度。
- 预置loading、骨架屏：ant design中就有selecton骨架屏，提供等待的效果
五、JS优化
- 防止内存泄漏：e.g.DOM节点也会占用内存空间,为了避免内存泄漏，应该及时清除不需要的DOM节点
- 循环尽早break
- 减少Dom访问
- 防抖、节流 防抖是指在一定时间内，如果连续触发事件，只会执行一次（防抖的实现原理是：设置一个定时器，在指定的延迟时间内，如果再次触发事件，则重新计时。只有在延迟时间内没有再次触发事件时，才会执行目标函数） 节流是指在一定时间内，无论触发多少次事件，只会执行一次（节流的实现原理是：设置一个间隔时间，在这个时间内，无论事件触发多少次，都只执行一次目标函数。一旦超过这个间隔时间，就会再次执行目标函数）
