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

本文主要是介绍亿级流量高并发春晚互动前端技术揭秘 - 学习笔记,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

主要学习到在面对大规模、高并发的场景下,确保系统的稳定性和性能,为用户提供稳定流畅的互动体验。前端都用到那些技术,做了哪些努力和创新。
文章链接: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和背景图,可实现动态背景图。

二、 降低服务器成本及风险

1.流量削峰

找到流量最大的接口,进行削峰

1-1. 初始化接口

在页面加载之前,即资源位入口,配置一个 “加载中” 页面链接。这个页面随机加载 1-3 秒后跳转到活动页面。当流量超过系统承载能力时,开启灰度开关,部分用户进入此页面,然后等待几秒后进入活动页面。

1-2. 击鼓抽奖接口

本次活动的核心玩法接口。如果仅仅是简单地随机延时几秒请求,会极大地影响用户体验。我们采用更精细化的处理方式。已知击鼓交互在用户敲击满次数或倒计时结束时触发抽奖接口,因此,随机设定敲鼓次数,将原本集中在 1-2 秒内的请求打散至 10 秒区间,用户几乎无感知。

2.即时状态的本地存储

前端可以通过本地存储一些状态,提升性能和优化用户体验,前端本地存储机制的优缺点:

  1. cookie存储空间较小(4K),且在与服务端通信时会占用请求头部,可能导致请求头过大,超过服务端设置的最大值,进而引发报错,并增加不必要的网络消耗。
  2. sessionStorage生命周期较短,仅适用于会话期间。
  3. localStorage具有较长的生命周期和较大的储存空间(2.5M-4M),能满足业务需求。

采用localStorage缓存数据,不仅可以简化调用链路、降低风险和节约成本,还能直接从本地读取券的领取状态,避免网络延迟导致的响应时间过长,提升用户体验。

这篇关于亿级流量高并发春晚互动前端技术揭秘 - 学习笔记的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/700805

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

揭秘世界上那些同时横跨两大洲的国家

我们在《世界人口过亿的一级行政区分布》盘点全球是那些人口过亿的一级行政区。 现在我们介绍五个横跨两州的国家,并整理七大洲和这些国家的KML矢量数据分析分享给大家,如果你需要这些数据,请在文末查看领取方式。 世界上横跨两大洲的国家 地球被分为七个大洲分别是亚洲、欧洲、北美洲、南美洲、非洲、大洋洲和南极洲。 七大洲示意图 其中,南极洲是无人居住的大陆,而其他六个大洲则孕育了众多国家和

三国地理揭秘:为何北伐之路如此艰难,为何诸葛亮无法攻克陇右小城?

俗话说:天时不如地利,不是随便说说,诸葛亮六出祁山,连关中陇右的几座小城都攻不下来,行军山高路险,无法携带和建造攻城器械,是最难的,所以在汉中,无论从哪一方进攻,防守方都是一夫当关,万夫莫开;再加上千里运粮,根本不需要打,司马懿只需要坚守城池拼消耗就能不战而屈人之兵。 另一边,洛阳的虎牢关,一旦突破,洛阳就无险可守,这样的进军路线,才是顺势而为的用兵之道。 读历史的时候我们常常看到某一方势