WeTest 导读

天天P图”军装照”活动交出了一份10亿浏览量的答卷,一时间刷屏朋友圈,看到这幕,是不是特别想复制一个如此成功的H5?不过本文不教你如何做一个爆款H5,而是介绍天天P图在“军装照”活动过程中,如何面对10亿流量时的后台承载。

一、10亿浏览量,“军装照”火了

这两天,相信 “军装照”活动已经刷爆了朋友圈,这个活动是由人民日报客户端策划出品并主导开发,腾讯天天P图提供图像处理支持的一款H5产品。

天天P图智能换脸

这款H5于7月29日晚一经推出,浏览量就迅猛攀升。7月30日24时,浏览次数突破6000万,在7月30日23:03时,H5迎来了这次活动的最高峰值,图片生成请求达到每分钟117万次,8月1日13时突破5亿。截至8月2日17时,“军装照”H5的浏览次数累计8.2亿,独立访客累计1.27亿,一分钟访问人数峰值高达41万。

后台数据截图

一般来说,一个H5产品浏览次数能超过500万就很不错了,超过1亿的十分罕见。如果以1亿为标准,这款H5产品能够申请10次世界纪录。

创纪录的浏览量背后,自然需要坚强的后盾,腾讯云与腾讯WeTest帮助天天P图对图片上传下载,存储,智能分析、融合处理以及压力测试等服务提供技术支持,让“军装照”活动可以顺利延续影响力,保证用户的良好体验。

二、一个刷屏级的H5有多难?

在见证了一个个精妙的H5活动后,我们渐渐意识到,制作一个刷屏级的H5越来越难了。

面对H5,用户越来越“丧失耐心”

腾讯大数据2016年的《移动页面用户行为报告》中表示如果页面加载超过5秒就会有74%的用户离开页面。

页面加载超过5s就会有74%的用户离开页面

(图片来源:腾讯大数据《移动页面用户行为报告》)

这样的数据是符合交易响应时间的“2-5-8原则”的,也就是:

1、 当用户能够在2秒以内得到响应时,会感觉系统的响应很快;

2、 当用户在2-5秒之间得到响应时,会感觉系统的响应速度还可以;

3、 当用户在5-8秒以内得到响应时,会感觉系统的响应速度很慢,但是还可以接受;

4、 当用户在超过8秒后仍然无法得到响应时,会感觉系统糟透了,或者认为系统已经失去响应,而选择离开这个Web站点,或者发起第二次请求。

从腾讯大数据的数据来看,用户对于H5的容忍程度显然更低,在5-6秒的时候,已经开始无法忍受了,因此根据这样的现实情况,对于移动页面,我们更应该关注一个全新的“1-2-5原则“:

1、 当用户能够在1-2秒内打开H5页面,看到信息的展示,或者能够开始进行下一步的操作,用户会感觉速度还好,可以接受;

2、 页面如果在2-5秒后才进入可用的状态,用户的耐心会逐渐丧失;

3、 如果一个界面超过5秒甚至更久才能显示出来,这对用户来说基本是无法忍受的,也许有一部分用户会退出重新进入,但更多的用户会直接放弃使用。

举个例子:

2016年11月24日晚上九点半,一个名为《薛之谦2个月没写段子,结果憋了个大招》的腾讯动漫的H5引爆了朋友圈,仅仅三个小时就已经突破120W的PV,而第二天早上的PV大概是270W左右。

该H5采用长图文+视频的形式,在屏幕划到某一个位置,自动播放准备好的Mp4文件,起初,这个时长2分51秒的视频大小是34.5MB,,如果在网络环境较好的情况,用户可以很流畅的观看,没有卡顿和延迟,但是为了提升用户的体验感受,H5进行了全面的优化,整体大小被下降到了24.3MB。

腾讯动漫的H5整体大小从40MB左右优化到了24.3MB

(图片来源:《深度解析!薛之谦的二次元H5为什么又翻天了!》)

对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app,所以,H5的性能是一个绕不开的话题。

三、腾讯云+WeTest “军装照”H5攻克最后技术难关

为了保证“军装照”H5能够被用户顺利的访问,,天天P图与腾讯WeTest压测大师合作,对H5的主要接口进行了多次压力测试。

1、制定测试目标

根据之前多次H5活动经验,天天P图对活动流量通常都有一个稳定的预期。天天P图的技术团队将H5的压测目标制定如下:

事务成功率: 99.9%

响应时间: 500ms

TPS: 10000qps

网络流量: 15G

压测人数配置(示例)

2、确认压测场景

对于“军装照”H5活动,最为重要的一个接口就是用户上传图片到天天P图“人脸融合”后台的接口,通过完成接口地址的配置,天天P图技术团队完成了压测的配置。

接口地址配置(示例)

天天P图团队不断的通过压测大师测试接口,获取实时的承载数据,对服务器进行持续优化,从而实现一个最为稳定的状态。

压测数据结果(demo数据)

在完成了服务器架构的最佳优化之后,天天P图在“军装照”活动爆红之后,依赖腾讯云海量处理能力和灵活扩展性,天天P图团队紧急在腾讯云调动服务器,进行弹性扩容,从一开始的400台,再到800台,最终在最高峰动态部署了4000台腾讯云服务器。此外腾讯云还采用了智能分流、柔性策略等办法,确保稳定应对海量用户的请求。这样的弹性扩展因而支撑了“军装H5”10亿次的浏览。

H5技术的兴起,注定着这款重要的网络语言将要承载越来越多的内容,为了满足用户越来越“不耐心”的响应时间要求,未来的H5以及Web页面针对性能势必进行更多的测试以及优化,保证用户在越来越多的场景下可以体验到最好的效果。


腾讯WeTest压测大师运用了沉淀十多年的内部实践经验总结,服务了包括王者荣耀、龙之谷手游、轩辕传奇手游、火影忍者等多款高星级手游,也包括天天P图、NOW直播等明星产品,通过基于真实业务场景和用户行为进行压力测试,帮助开发者发现服务器端的性能瓶颈,进行针对性的性能调优,降低服务器采购和维护成本。

为了让外部更多产品能够享受到简单易用的压测产品,腾讯WeTest决定将这份服务器测试能力产品化,以产品”压测大师“的形式,正式对外开放。目前更有10元10000VUM的压测优惠,欢迎大家的使用!

体验地址:http://wetest.qq.com/activity/paygaps0808

如果对使用当中有任何疑问,欢迎联系腾讯WeTest企业qq:800024531

“军装照”背后——天天P图如何应对10亿流量的后台承载。的更多相关文章

  1. 你知道军装照H5浏览了多少次吗? 10亿

    7月29日,由人民日报客户端推出的<快看呐!这是我的军装照>(以下简称<军装照>)H5页面,由它所引发的全民晒“军装照”现象级事件,据统计,截至8月18日,<军装照> ...

  2. TOP100summit:【分享实录-QQ空间】10亿级直播背后的技术优化

    本篇文章内容来自2016年TOP100summit QQ空间客户端研发总监王辉的案例分享.编辑:Cynthia 王辉:腾讯SNG社交平台部研发总监.腾讯QQ空间移动客户端技术负责人高级工程师.09年起 ...

  3. 高性能kv存储之Redis、Redis Cluster、Pika:如何应对4000亿的日访问量?

    一.背景介绍 随着360公司业务发展,业务使用kv存储的需求越来越大.为了应对kv存储需求爆发式的增长和多使用场景的需求,360web平台部致力于打造一个全方位,适用于多场景需求的kv解决方案.目前, ...

  4. 故障复盘究竟怎么做?美图SRE结合10年经验做了三大总结(附模板)

    美图崇尚的故障文化是 "拥抱故障,卓越运维",倡导的基准是 No-Blame, 即「不指责,重改进」.今年 9 月 TakinTalks 社区曾经分享过美图的三段式故障治理方法(美 ...

  5. QQ亿级日活跃业务后台核心技术揭秘

    http://ms.csdn.net/geek/75478 引言 作为本次技术开放日后台架构专场的出品人我今天给大家带来<构造高可靠海量用户服务-SNG数亿级日活跃业务后台核心技术揭秘>, ...

  6. (转)从P1到P7——我在淘宝这7年

    (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘宝已经七周年了.很多人第一句话就是七年痒不痒,老实说,也曾经痒过,但往往都是一痒而过,又投入到水深火热的工作中去.回家之后 ...

  7. 从P1到P7——我在淘宝这7年(转)

    作者: 赵超  发布时间: 2012-02-25 14:47  阅读: 114607 次  推荐: 153   [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...

  8. 从P1到P7——我在淘宝这7年 - 子柳撰写

    http://kb.cnblogs.com/page/132752/来自博客园的整理版本,作者是子柳,博客地址:http://blog.sina.com.cn/calvinzhaoc (一) 2011 ...

  9. 深度揭秘腾讯云TSF日调用量超万亿次背后技术架构

    腾讯云TSF是整合外部开源框架和腾讯内部历经多年锤炼的PaaS平台打造而成的企业级分布式应用服务开发与托管平台,本文重点对TSF中负责服务托管的PaaS平台进行揭秘,从技术角度解析TSF 平台是如何每 ...

随机推荐

  1. document.getElementById("searchForm").submit is not a function

    document.getElementById("searchForm").submit is not a function在用userForm.submit() 提交表单的时候, ...

  2. IOS 关于property的详细解法

    1.格式 @property (参数1,参数2,...) 类型 名字; eg: @property(nonatomic,retain) UIWindow *window; 其中参数主要分为三类: • ...

  3. 解决Jenkins performance-plugin 解析jmeter jtl报告NumberFormatException "timeStamp"

    报错日志: Performance: Failed to parse file '/var/lib/jenkins/jobs/Jmeter/jobs/jmeter-test/builds/14/per ...

  4. 百度统计API的使用

    百度统计API的使用 在搭建自己博客的时候,希望自己能有个日志系统,能够看到PV.UV等信息,同时自己也搭建了个ELK系统,可惜服务器配置太低(1GHZ+1G内存),根本运行不起来.只能使用第三方的日 ...

  5. JavaScript学习笔记(三)——留言板知操纵DOM节点

    用JavaScript写了一个简易的留言板,暂不涉及数据库接入等. 1.功能以及流程 主要功能即为留言,用两个文本框接受用户输入的用户名以及留言内容,然后通过"提交留言"按钮将用户 ...

  6. 简单总结几种常见web攻击手段及其防御方式

    web攻击手段有几种,本文简单介绍几种常见的攻击手段及其防御方式 XSS(跨站脚本攻击) CSRF(跨站请求伪造) SQL注入 DDOS XSS 概念 全称是跨站脚本攻击(Cross Site Scr ...

  7. 数据结构(C语言版)顺序表相关算法代码实现

    这两天实现了一下顺序表的相关操作,包括顺序表初始化.创建.遍历.第i个元素前插入,删除第i个元素.查找元素e的位置.清空顺序表.销毁顺序表.合并两个非递减顺序表操作. 这次在网上学习到了新的布局方法, ...

  8. (转载)Sybase:bcp命令参考

    参考文档: http://blog.csdn.net/wwp1026/article/details/6900569

  9. 关于Android log拿不到的情况

    遇到很多开发者说crash了,log没有看到..出现类似情况的基本原因是因为现在的国产厂商如crash了会直接将进程杀掉,于是你的studio就看不到了,可以往下面几个方向去想办法找到crash的lo ...

  10. 快速查询List中指定的数据

    时间:2017/5/15 作者:李国君 题目:快速查询List中指定的数据 背景:当List中保存了大量的数据时,用传统的方法去遍历指定的数据肯定会效率低下,有一个方法就是类似于数据库查询那样,根据索 ...