亿级流量高并发春晚互动前端技术揭秘 - 学习笔记

刘大爷_17

于 2024-02-11 13:52:04 发布

阅读量970

点赞数 11

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/weixin_37365539/article/details/136095464

版权

我可能是个假前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

主要学习到在面对大规模、高并发的场景下，确保系统的稳定性和性能，为用户提供稳定流畅的互动体验。前端都用到那些技术，做了哪些努力和创新。
文章链接：https://my.oschina.net/u/4090830/blog/11032956

一、静态资源优化

1.首屏资源加载策略

为了降低页面打开时的请求次数和资源体积，根据页面交互，将所需资源分为三类：首屏、次屏以及操作后。
首屏资源主要包括：HTML 文档、JavaScript、CSS 以及样式图片。由于这是单页面应用，可以通过常规技术将 JS 和 CSS 进行打包。对于样式图片，通过按需加载的方式，显著减小首屏资源体积。
下面将进一步讲解具体的优化方法

1-1.动画图片低损压缩

设计团队将3D 动画转化为精灵图，并将不变部分（如鼓架）单独抽离。精灵图仅包含运动部分（如鼓面敲击动画），有效降低资源消耗。
精灵图进行进一步优化，通过抽帧方式将击鼓精灵图从 24 帧降至 4 帧，结合降质参数和WebP格式，精灵图下降了 93%。此外，将主光效换成放大一倍的一倍图，并通过 CSS 属性 scale 实现放大，进一步节省资源。

1-2.标题雪碧图方案的演进

元素背景图使用雪碧图模式，是前端基本优化手段，可以显著降低请求次数。相较于常规方案，春晚红包还扩展了 2 个功能：
1、css 雪碧图在运行时为图片 URL 添加CDN降质参数和 webp 格式转换参数（someimage.png!q70.webp）

极限降低 CDN 带宽。因为并不是所有环境都支持webp，所以还需要通过运行时检测 webp 支持特性，切换 HTML 标签上的 class 名，来使对应的后代选择器的background-image属性生效。
关于特性检测，有两种技术方案：
a、通过版本判断，从 caniuse 看，可以按照只有 iOS14 以下不支持 webp 来作为判断依据。这个方案的优势是：通过 UA 判断系统版本是同步执行的，可以在调用渲染页面前的任意地方执行并修改 HTML 标签的 class 属性。确保内容渲染后有正确的背景图 css 生效。不会对原有渲染逻辑产生入侵性修改。
b、通过创建一个 Image 对象，其 src 为一个基于 base64 的 webp 图片，根据 load 是否成功来判断是否支持 webp。优势是经过大规模实践，判断逻辑的可靠性较高，缺点是异步逻辑的，需要修改原来的渲染逻辑。
2、动态雪碧图
有些图片需要通过接口调取后再获取。所以无法使用编译时雪碧图方案。为了将图片请求次数减少到 1 次，设计同学根据产品提前确认图片位置将多张图片拼到一张雪碧图上，通过固定的background-position属性，动态设置className和背景图，可实现动态背景图。