A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

感谢网友分享!

前段时间公司上线了一个微信抢红包的项目,搞了6天活动,公众号粉丝从二十多万一下子涨到四十万左右,看来糖衣炮弹的吸引力才是最大的。但是对于我们技术开发而言,这么多的用户,而且还存在大量并发的访问,服务器的压力可想而知,为了配合减少服务器压力,作为前端开发的我,在和同事讨论后,做了如下几条前端优化措施,配合服务端有效减轻了服务端的压力。

1.减少访问API或者不访问

       这个项目主要开发了3个页面,活动规则页面、 抢红包页面、中奖名单页面。最开始的方案是活动规则页面的活动规则是通过请求api从服务端获取,这是通常的做法,好处是开发完成后不再需要技术人员修改代码,运营人员直接在后台修改富文本编辑器就可以更新页面,很灵活,适合长期存在、活动有变更的项目。但是对于抢红包这个项目,6天活动时间结束后即可下线,为了保证稳妥性,防止大量用户并发访问导致服务器瘫痪,后来把从服务端获取活动规则的借款去掉了,直接在页面中写死数据。

       在中奖名单页面的开发中,也是一样的道理,但是这个就稍微复杂一些了,由于抢红包页面采用的是静默授权的方式,服务端数据库中只存了用户的openid,而中奖名单页面需要显示用户微信头像、微信昵称,这样才具有公信力,否则只摆出一个openid,用户会怀疑活动的真实性。



       方案已经是确定的,中奖名单的数据还是采用写死的数据,不访问API,那么对于我而言,开发方式就有点变化了,我需要从服务端获取到3月31日的中奖名单前100名,然后遍历这一百天数据的openid,使用access_token 和openid获取用户的头像和昵称后,以数组的形式存入到一个数组中。页面加载的时候其实是每次取这个数组中的10条数据。具体实现方法我写了了demo,有时间再补充。

2.h5静态文件资源与API请求部署到不同的服务器

       做最坏的打算,为了防止服务器瘫痪后,用户打开页面显示404或者503,我把前端静态文件中的js、css、图片等资源都放到七牛服务器上,为了防止跨域,html文件还是和API放在同一台服务器上。这样,即使我们自己的服务器瘫痪了,用户依然可以正常打开页面。

3.对于高访问量接口使用分时请求



       抢红包的页面如上图所示。      

       在整个项目中,抢红包的API是访问量最大的接口之一,为了减轻服务器压力,我做了一个分时处理,在用户点击“继续抢”按钮时,取1到15秒的随机数,然后发起api请求,这样就把所有的请求平均分到15秒时间内,一定程度上可以减小并发访问量。

4.在高并发请求API接口前添加访问限制接口,只允许一部分用户通过

      这个主要是服务端的逻辑,作为前端就是配合添加接口,如果超过超时时间就重新初始化。

5.当天抢到红包的用户不再发起抢红包API请求,屏蔽时间1小时

      由于活动时间为6天,当天的活动,如果用户已经抢到红包,就不再请求api,如果还没有抢到红包,可以继续请求。具体是这样实现的:如果用户已经抢到红包,将中奖标志存入cookie,有效期1小时。这样中奖当天就不会再请求api,但是第二天的活动照样可以请求api,实现了减小api请求的目的。

2 个回复

倒序浏览
奈斯
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马