感谢网友分享！

前段时间公司上线了一个微信抢红包的项目，搞了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请求的目的。

奈斯