前端大流量场景优化方案

[inkjuncom]

身为前端，面对高并发、大流量、高频率场景，比如电商大促活动爆款页面，核心的目标只有 4 个：

1. 减少请求
2. 减少体积
3. 加快加载
4. 提升稳定性

减少请求

首先是 CSS 或者 JS 打包合并，减少文件的数量
然后是小图片内链，Base64 不发独立的请求
接着是小图标使用雪碧图，或者使用字体文件合并请求
然后是接口合并，同一个场景下的多个接口可以合并为一个
然后是接口缓存，相同的参数请求结果就直接复用，不重复发结果
然后是防抖、截流。针对搜索滚动或者点击这些操作，我们要避免瞬间产生大量的请求
然后我们要控制并发请求的数量，避免页面初始化时同时发大量的接口
并且去除掉一些冗余的请求，比如买点不必要的买点，不必要的统计

2. 第二步是减少体积
   JS 和 CSS 要压缩，然后用这些剔除死代码
   图片要开启 WebP 格式并且压缩质量，按需下载，难加载
   GZP 这些压缩也要实现
   第三方库要按需引入
   然后我们要避免大体积的库，用轻量级的替换方案

3. 加快加载
   想清台资源，就全部上 CDN
   然后是强化，包括 HTML 协商缓存，以及静态资源，这些都属于强制缓存
   然后我关进了 CSS 内联到 HTML
   长列表使用虚拟滚动，不渲染全部的动
   Neural Prelude 加载这个关键的资源
   用 prefer 去预测下一步的这个资源
   new asink 和 differ 控制 JS 的这个时机不足再渲染

4. 然后是提升稳定性
   首先是从数据库捕获异常，要避免真假白屏
   接口超时、调用失败等情况，都需要有降级机制
   我需要实现熔断失败多次后停止请求，保护服务
   为了避免内存泄漏，需要清理定时器
   我是容灾方案。这个容灾一般由 CDN 做，比如 GSSH 和 CSS。我们一般做的是图片的容灾，当图片挂了之后，我们有其他的运营图片
   我是性能监控，和错误监控要快速响应问题