参考链接: http://www.web3.xin/code/1763.html
前端高并发解决方案
并发请求主要针对于多人访问该网址请求服务器静态资源,直到页面正常显示的过程以及在页面中多次请求接口。
解决方案
1.服务器端处理
(1)nginx配置压缩
gzip on; #开启gzip功能
gzip_http_version 1.1; #指定压缩响应所需要的最低HTTP请求版本
gzip_buffers 32 4K; #缓存空间个数与大小
gzip_comp_level 6; #gzip压缩级别
gzip_min_length 1k; #进行压缩响应页面的最小长度,content-length
gzip_disable "MSIE [1-6]\."; #对IE6以下的版本都不进行压缩
gzip_vary on; #往头信息中添加压缩标识
gzip_proxied off; #nginx作为反向代理压缩服务端返回数据的条件
gzip_types application/javascript text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript #压缩源文件类型,根据具体的访问资源类型设定
(2)静态资源缓存
location ~ .*\.(css|js|swf|php|htm|html )$ {
add_header Cache-Control no-store;
# add_header Cache-Control max-age=60; //过期时间 60s
add_header Pragma no-cache;
}
(3)图片资源与服务隔离,采用oss存储
(4)后端接口返回使用gzip压缩
2.前端处理
(1)控制接口重复请求,多次提交
(2)打包后生成.map文件,打包速度慢,文件多,占用空间大。
productionSourceMap设置为false即可.
(3)空白是显示loading
main.js文件里:
router.afterEach((to,from,next)=>{
Loading.close()
}),
new Vue({
router,
store,
render:h=>h(App),
created(){
Loading.open();
}
}).$mount(‘#app’)