前端优化相关
关于 Vue 相关的问题可以阅读一下文章！
浏览器相关
代码方面
1. 懒加载
2. 虚拟列表
3. 减少HTTP请求
- 合并CSS和JavaScript文件：减少文件数量，降低请求次数。
- 使用雪碧图或SVG图标：减少图片请求，提高加载速度。
- 内联小资源：对于小的CSS和JavaScript代码，直接内联到HTML中，避免额外请求。
4. 延迟加载和按需加载
5.避免内存泄漏
6. 通过requestAnimationFrame进行动画，确保流畅性、
7. 通过 GPU 加速动画渲染
8. 避免不必要的重绘和重构
9. CSS 属性避免深度嵌套
10. 节流防抖
打包方面
1. 代码压缩
- 去除空白、注释，缩小文件大小。
2. Tree-shaking移除未使用的代码
3. CSS和JavaScript的模块化与异步加载
4. 提取公共代码合并文件
5. 缩小loader 匹配范围
- 优化loader配置
- test、include、exclude三个配置项来缩⼩loader的处理范围
- 推荐include
6. resolve.extensions
resolve.extensions在导⼊语句没带⽂件后缀时，webpack会⾃动带上后缀后，去尝试查找⽂件是否存在。
- 后缀尝试列表尽量的⼩
- 导⼊语句尽量的带上后缀。
如果想优化到极致的话，不建议用extensionx, 因为它会消耗一些性能。虽然它可以带来一些便利。
7. 多线程打包提升打包速度
后端
1. 缓存策略
- 利用浏览器缓存：通过设置合适的HTTP缓存头（如Cache-Control, ETag）来缓存静态资源。
- Service Worker：使用Service Worker实现离线缓存和资源拦截，提升应用加载速度和可访问性。
2. 开启GZIP压缩
3. 使用CDN分发静态资源
网络层面
1. 使用 HTTP/2.0 HTTP/3.0
2. 提升带宽
3. 使用HTTPS 提供安全性
举例问题
一、多文件上传
比如100个视频上传，浏览器会发生什么？如何优化？
浏览器可能会因为单线程的原因会发生
- 页面卡顿：因为JavaScript是单线程执行的，如果在主线程中连续发起大量异步请求（虽然异步请求不会阻塞主线程，但是请求的回调处理、文件读取等操作仍需在主线程上执行），特别是在处理文件读取、压缩等CPU密集型任务时，会占用大量计算资源，导致页面响应变慢，甚至出现短暂的卡顿现象。
- 内存占用：视频文件通常体积较大，一次性读取和处理多个视频文件到内存中，特别是如果处理不当（如未及时释放不再使用的资源），很容易导致浏览器内存占用激增，严重时可能引起浏览器崩溃。
- 网络拥塞：短时间内发送大量请求可能会导致网络拥塞，影响到其他网络活动的正常进行，同时也可能触碰到浏览器或服务器对并发连接数的限制。
- 用户体验下降：长时间的上传过程和不可预知的等待时间会大大降低用户体验，用户可能不知道上传进度，也无法有效管理或取消上传任务。
优化：
- 分批处理：将100个视频分成几个小批次（例如，每批5-10个视频），而不是一次性全部上传。这样可以减少每次请求的负担，避免因请求过多导致的浏览器或服务器压力。
- Web Workers：考虑使用Web Workers来处理视频压缩、分块等CPU密集型任务。Web Workers允许在后台线程执行脚本，避免影响用户界面的性能。
- 异步处理和Promise：使用JavaScript的异步编程模型（如Promises或async/await）来处理文件上传，确保文件上传任务不会阻塞主线程，从而保持页面的响应性。（虽然接口是异步的 但是 Promise 是现代技术手段，更优雅的代码）
- 进度跟踪：为每个视频上传任务添加进度跟踪，可以是全局进度条或是每个视频单独的进度指示，提升用户体验。
- 错误处理与重试：为每个上传任务添加错误处理逻辑，如果某个视频上传失败，可以单独重试该视频的上传，而不是重新开始整个批次。
- 优化内存管理：在处理大文件上传时，注意释放不再需要的资源，如上传完成的文件片段或临时数据，避免内存泄漏。
- 使用Blob URLs和FileReader：对于预览或处理大文件，可以使用Blob URLs和FileReader API逐步读取文件内容，避免一次性加载整个文件到内存中。
- 客户端压缩：在上传前允许用户选择是否对视频进行压缩，减少文件大小，从而降低上传所需时间和资源消耗。可以使用如
compressorjs等库来实现。 - 用户交互设计：提供清晰的上传进度提示和取消上传的功能，给予用户控制权，提升用户体验。
- 后端增加多文件上传接口：后端增加多文件上传的接口。
- 负载均衡：使用负载均衡器（如Nginx、HAProxy或云服务商提供的负载均衡服务）分配上传请求到不同的服务器，避免单点过载。前端无需直接干预负载均衡的配置，但需确保上传请求遵循后端指定的规则（如上传URL可能是动态生成的）。
- CDN加速：对于全球用户，可以使用内容分发网络(CDN)加速上传，减少地域带来的延迟。前端需要根据后端提供的上传地址选择最近的节点。
- 节流或限速：根据网络状况动态调整上传速度，避免对用户其他网络活动造成太大影响，特别是在移动设备上考虑电池和网络资源的合理利用。
- 安全验证和过滤：后端应实施严格的文件类型、大小检查，以及病毒扫描，防止恶意文件上传。前端需在上传前进行初步验证，并传递必要的验证信息（如文件MD5摘要）给后端进行二次确认。
- 后台处理：对上传后的文件进行异步处理，如视频转码、缩略图生成等，避免阻塞上传进程。前端在上传完成后可提供通知机制，告知用户文件处理进度或结果。
优化-代码层面：
1. 分批处理
2. 多文件上传接口
3. Web Workers
4. 异步处理和Promise
5. 客户端压缩
6. 使用Blob URLs和FileReader
7. 优化内存管理 及时释放不需要的内存空间
优化-用户体验
1. 二次确认
2. 进度条
3. 错误提示和重传
优化-后端
1. 负载均衡
2. 增加多文件上传接口
3. 在安全性上进行病毒扫描，实施访问控制和身份验证，保护用户数据
优化-网络
1. 控制请求并发数
2. 根据网络状况动态调整上传速度，节流或限速
3. 使用HTTP/2或HTTP/3
优化-其他
1. CDN加速
二、大文件上传
优化-代码层面
1. 分片上传
将大文件切割成多个小块，依次上传这些小块，最后在服务器端重组文件。
2. 并发上传与分批上传：
同时上传多个文件块或多个文件，利用多线程或HTTP/2的多路复用特性，提高上传效率。
3. 前端压缩：
在上传前对文件进行压缩，减小文件大小，提高上传速度，但需平衡压缩率和图像质量（或视频清晰度）。
4. 断点续传：
记录上传进度，如果上传中断，下次可以从断点继续上传，提升用户体验。
优化-用户体验
1. 实时显示上传进度，包括总进度和单个文件的进度
2. 提供清晰的错误提示和解决方案
优化-后端
1. 分布式存储和负载均衡，提高服务器处理能力
2. 后台异步处理，如视频转码等操作，避免阻塞上传进程
3. 在安全性上进行病毒扫描，实施访问控制和身份验证，保护用户数据
优化-网络
1. 控制请求并发数
2. 根据网络状况动态调整上传速度，节流或限速
3. 使用HTTP/2或HTTP/3
4. CDN加速
总结
在此只是体现了优化可以从哪几个方面去诉说，更具体的内容可以针对性的查询一下对应的解决方案！！！
在 网络方面 推荐大家可以看一下 小林coding
