高并发访问服务器时前端页面优化方法
前段时间公司上线了一个微信抢红包的项目，搞了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请求的目的。
高并发访问服务器时前端页面优化方法相关推荐
- 高并发访问服务器时前端优化
高并发访问服务器时前端优化 高并发的痛点:数据流动过程两端失衡了,会导致前端到后台部分的请求会被后台拒掉甚至可能会击垮后台.需要把两端重新回到数据流动的平衡状态.前端层面尽可能地加强其作为用户与后台之 ...
- 关于前端页面优化的方法
前端页面优化方法 1.减少http请求,减少DNS查询次数,减少dom操作 2.CSS写在顶部,JavaScript写在尾部或异步 3.压缩HTML.CSS.JavaScript 4.js不滥用闭包, ...
- 总结一些前端页面优化的方法（一）
前言: 这里我想写一点日常前端页面优化的方法,将持续发布一些我所遇到的问题优化,尽量写的通俗易懂些(大白话搞起!!!) 一.减少页面加载时间的方法 优化图片(这个很重要,图片尽量压缩一下) 图像格式化 ...
- 前端页面优化之完善篇
前端页面优化 学习目标 了解为何进行前端页面的优化 了解SEO,掌握前端页面语义性的评判标准与规则 从代码可读性角度进行页面优化 为何进行前端优化 加载速度更快 -- 速度就是王道 成本耕地 -- 人 ...
- 列举6个常见且实用的Web前端性能优化方法
在如今这个信息爆炸的时代,人们的节奏总是快速的,对于一个网站的耐心毕竟是有限的可怜的,如果网站不进行优化必定会流失相当一部分的客户,带来不必要的损失.那么从Web前端的性能优化上来说有哪些常见.实用的 ...
- web前端页面优化——个人见解
web前端页面优化,我们从JavaScript.css.html这3个方面说下,我的见解,希望大神们能有刚好优化方法,一起探讨. 一. 有关javascript方面 优化见解. 1. 首先举个例子: ...
- 前端页面优化：如何更快速将你的页面展示给用户？
前端页面优化:如何更快速将你的页面展示给用户? 现在许多公司往往注重后端优化,而忽略了前端优化想想如果辛苦优化了服务器,后台,排查了sql,却在最后页面加载展示的时候很慢,也得不偿失其实,前后台优化都 ...
- 多线程高并发 底层锁机制与优化的最佳实践——各种锁的分类 || synchronized 关键字 倒底锁的是什么东西？|| CAS与ABA问题||锁优化||轻量级锁一定比重量级锁的性能高吗
多线程高并发 底层锁机制与优化的最佳实践 各种锁的分类 加上synchronized 关键字,共享资源就不会出错 synchronized 关键字 倒底锁的是什么东西? synchronized 锁的 ...
- java支付宝支付_Java 高并发环境下的性能优化，揭秘支付宝技术内幕
前言 高并发经常会发生在有大活跃用户量,用户高聚集的业务场景中,如:秒杀活动,定时领取红包等. 为了让业务可以流畅的运行并且给用户一个好的交互体验,我们需要根据业务场景预估达到的并发量等因素,来设计适 ...
最新文章
- 计算机科学 44(6a 增刊,窃昕攻击下子空间码的安全性-计算机科学.PDF
- 100%由清洁能源供电的数据中心什么样？苹果丹麦维堡数据中心投入使用
- Monthly Expense POJ - 3273（二分最大值最小化）
- web开发：jquery之DOM
- 把angular（vue等）项目部署在局域网上
- python pip gpl_python pip怎么更新包
- MyBatis框架 传参、事务、缓存（二级）
- 【Flink】Flink SQL 架构 以及 执行逻辑
- java通过jdbc访问mysql，update数据返回值的思考
- 用AD9画51单片机的最小系统
- 51单片机外设篇：电机
- 【文末下载PPT】李中文：软件成分安全分析（SCA）能力的建设与演进
- 计算机图形学之机器人
- 【电脑使用】修改注册表——让有密码的电脑开机自动登录
- 3DUnity汽车尾气模拟
- 【用户画像】功能实现值写入ClickHouse人群包、预估和更新分群人数，NoSQL数据库介绍
- JAVA后端开发必备软件（仅供参考）
- mos管的rc吸收电路计算_正激式RC吸收电路计算
- 帮北航小妹妹做的一道她的C++的作业题.
- 电子商务电子支付实训二