性能优化

如何解决页面请求接口大规模并发问题

不仅仅是包含了接口并发，还有前端资源下载的请求并发。

后端优化：可以对接后台接口优化，采用缓存技术，对数据进⾏预处理，减少数据库操作等。使⽤集群技术，将请求分散到不同的服务器上，提高并发量。还可以使用反向代理、负载均衡等技术，分担服务器压⼒。
做 BFF 聚合：把所有首屏需要依赖的接口，利用服务中间层给聚合为一个接口。
CDN加速：使⽤CDN缓存技术可以有效减少服务器请求压⼒，提高网站站访问速度。CDN缓存可以将接⼝的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。
使⽤ WebSocket：使⽤ WebSocket 可以建⽴⼀个持久的连接（长连接），避免反复连接请求。WebSocket可以实现双向通信，⼤幅降低服务器响应时间。
使⽤ HTTP2 及其以上版本，使⽤多路复⽤。
使⽤浏览器缓存技术：强缓存、协商缓存、离线缓存、Service Worker 缓存等⽅向。
聚合⼀定量的静态资源：比如提取页面共用复用的代码到一个页面、对图片进行雪碧图处理，多个图片只下载⼀个图片。
采⽤微前端⼯程架构：只是对当前访问⻚⾯的静态资源进⾏下载，⽽不是下载整站静态资源。
使⽤服务端渲染技术：从服务端把⻚⾯⾸屏直接渲染好返回，就可以避免掉⾸屏需要的数据再做额外加载和执⾏。

处理和渲染30万条数据时如何优化性能

处理和渲染30万条数据时，优化性能是非常重要的。以下是一些有效的优化策略：

虚拟滚动（Virtual Scrolling）：
- 虚拟滚动技术只渲染用户当前可见区域的数据，不渲染整个列表，复用DOM元素，避免大量DOM操作。例如，可以使用Vue中的vue-virtual-scroller组件来实现长列表的虚拟滚动。
合理分页（Pagination）：
- 不直接渲染全部数据，而是每次只渲染数据的一个分页，比如每页100条记录。当用户滚动到分页底部时，再异步加载下一页数据。
防抖处理（Debounce）：
- 对滚动、输入等高频事件进行防抖处理，避免触发过多无意义的计算。
- 防抖和节流
缓存复用（Caching）：
- 使用keep-alive缓存组件，避免重复渲染，提升切换效率。
数据变更优化：
- 对于需频繁更新的数据，避免直接操作DOM，使用诸如virtual DOM、dirty checking等机制进行优化。
图片懒加载（Lazy Loading）：
- 图片只在将要进入可视区域时才加载，减少不必要的提前加载。
动画优化：
- 优化过渡动画，避免动画过程中产生大量中间帧，导致卡顿。
监控性能：
- 在开发和生产环境监控页面性能，分析找到优化方向。
代码拆分（Code Splitting）：
- 避免把所有代码打包在一起，按需异步导入，减少初始包体积。
服务端渲染（SSR）：
- 使用服务端渲染，使得初始状态更快呈现，优化载入速度。
Web Worker：
- 利用Web Worker进行计算任务，避免主线程被占用，影响页面响应。
Tree Shaking：
- 启用Tree Shaking，移除没有使用的代码，减少打包后的代码量。
长任务分割：
- 将长任务分割成多个小任务，减少单个任务的执行时间，为后面的任务腾出执行时间。
使用Canvas：
- 对于地图等元素，可以使用Canvas进行渲染，这样可以在同一个Canvas中渲染绘制出来，提高性能。
  通过这些策略，可以显著提升大数据量渲染的性能和用户体验。在实际开发中，应结合具体场景灵活运用这些技巧。