前端训练营，客户端容器，笔记

浏览器架构

多进程架构: 主进程、网络进程、渲染进程、GPU进程、插件进程面向服务架构: 将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务

不同进程的分工

Q1: 为什么会有单进程？

受到早期硬件的限制，内存比较贵。每个进程都会占用系统资源。

渲染进程

渲染进程为多线程架构，主要负责页面渲染，脚本执行，事件处理，网络请求等等

：：GUI引擎与JS引擎互斥：：

js引擎对比渲染引擎

JS：v8优化：高频的函数，会转为机器码，转为机器码的好处就是缓存然后下次可以直接执行，不需要像字节码一样解析执行，由此达到优化效果渲染：CSS解析可以与HTML解析同步进行

Chrome浏览器运行原理

输入URL以后发生的响应（部分）首先会判别是URL还是query，query就搜索引擎搜索，URL就进入导航

优化

首屏优化

1.压缩、分包、删除无用代码

压缩：指使用特定的算法来压缩网页中的资源文件（如 HTML、CSS、JavaScript 和图片等），以减小文件大小，加快加载速度。例如，可以使用 Gzip 或 Brotli 等压缩算法来压缩文本文件，使用 PNGquant 或 JPEGmini 等工具来压缩图片。
分包：指将网页中的资源文件分成多个包，按需加载。这样，用户在访问网页时只需要加载首屏所需的资源文件，而不必一次性加载所有文件。例如，可以使用 Webpack 或 Rollup 等打包工具来实现代码分包。
删除无用代码：指删除网页中不再使用的代码和资源文件，以减小文件大小，加快加载速度。例如，可以使用 UglifyJS 或 Terser 等工具来删除 JavaScript 代码中的无用代码，使用 PurgeCSS 等工具来删除 CSS 代码中的无用样式。

2.静态资源分离

静态资源分离是指将网页中的静态资源（如图片、CSS、JavaScript 等）与网页本身分开，通常放在 CDN（内容分发网络）上。这样，当用户访问网页时，浏览器可以从最近的 CDN 节点获取静态资源，加快加载速度。
当静态资源与网页本身位于同一个域名下时，浏览器在获取静态资源时会默认携带网页的 cookie。这是因为浏览器会将同一个域名下的所有请求视为同源请求，自动携带 cookie。

3.JS脚本非阻塞加载

放在包底部，因为渲染是自上而下，如果放在上面会导致卡顿

4.缓存策略

通过文件内容生成content hash是一种常用的缓存策略。它可以根据静态文件（如CSS，JS，图片）的内容生成对应的HASH值作为它的版本号，当文件内容发生变化时，版本号也会随之变化。这样可以有效地解决浏览器缓存问题。文件不变可以使用缓存hash。

5.SSR

6.预置loading、骨架屏

渲染优化

1.GPU加速

设置属性will-change ,提前告诉浏览器这个元素需要GPU加速，然后他会把元素放到新建的涂层里

.accelerate {
transform: translateZ(0); 
will-change: transform;
} 
//需要注意的是，并不是所有情况下都需要启用 GPU 加速。 
//过多地使用 GPU 加速可能会导致内存占用过高，反而降低性能。 
//因此，在使用 GPU 加速时应当谨慎。

2.减少回流、重绘

transfom代替left,top，display:none设置元素可见不可见会引起回流，可以使用visibilty替代。table表单大，一部分修改就会重新布局，如今不怎么用

3.离屏渲染

开辟一个缓冲区，先进行渲染，完成渲染再显示到屏幕上。可以让动画更顺畅

4，懒加载

将所需要的资源提前加载到本地，如界面滚动等等需要资源，直接从缓存加载，节省时间

JS优化

1.防止内存泄漏