百度推广 个人网站,无流量地图导航下载,佛山市网站建设 骏域动力,钱江摩托车官网【写在前面】客户现场应用我们的系统时候#xff0c;发现用着用着就出现1个页面无响应现象#xff0c;给客户带来极其不好的体验#xff0c;尤其是当重要工作汇报演示时#xff0c;就给我看无响应#xff0c;浏览器崩溃#xff1f;这样对产品的发展无疑是致命的伤#x…【写在前面】客户现场应用我们的系统时候发现用着用着就出现1个页面无响应现象给客户带来极其不好的体验尤其是当重要工作汇报演示时就给我看无响应浏览器崩溃这样对产品的发展无疑是致命的伤那么如何去面对又如何解决呢且听我细细讲解。
目录场景复现1、问题定位及方向Web端设备配置CPU占用率内存占用率2、如何解决2.1 释放缓存A、在ajax请求之前(beforeSend)添加B、在ajax设置属性cache为falseC、在jsp或html头部meta标签内添加D、请求结束后回收资源2.2 定时器优化2.3 代码优化排查2.4 同步阻塞排查3、彩蛋直通涉及知识点 web优化页面响应cpu和内存的占用优化前端页面响应优化内存泄漏场景复现
页面问题效果如下
1、问题定位及方向
根据之前的开发经验我建议大家从这三个方向去出发
Web端设备配置
这个主要看你访问端的设备配置是否支持程序的运行有些系统对配置有个最低标准的说明比如4核8G磁盘要求128G显卡也有基础的要求。 要是你的配置太低了市场都淘汰的机器去部署一个大的运维系统那么肯定也会出现无响应的现象。
CPU占用率
主要针对当前页面的CPU占用率很多人肯定知道任务管理器ctrlaltdelete,但是很少有人知道查看浏览器单个页面占用CPU在哪看按照如下操作点击浏览器谷歌右上角的三个点然后点击更多工具再点击任务管理器如下所示
按照上图操作后你就可以看到如下所示的各个单页面运行时的cpu占比和内存占比动态变化的
内存占用率
和上面一样我们可以通过看内存的变化比如说你点击不同的菜单时候你发现这个内存一直在飞速增长这就说明了存在内存泄漏的问题那么针对你写的代码逻辑需要去排查一下。 代码阻塞定时器死循环三方组件 代码阻塞这方面也是很难去发现的但是我教大家一个方法针对页面我们可以通过代码删除定位法去#发现问题最终总会找到那个性能很差的代码段针对这个代码段进行优化。
2、如何解决 其实核心问题上面也说了针对优化我归纳成以下两点释放缓存及优化阻塞代码
2.1 释放缓存
我们可以从这些方向出发去实现
A、在ajax请求之前(beforeSend)添加
xhr.setRequestHeader(If-Modified-Since,0);
xhr.setRequestHeader(Cache-Control,no-cache);B、在ajax设置属性cache为false
cache:false,【效果】由31M降成17M
C、在jsp或html头部标签内添加
meta http-equivpragma contentno-cache
meta http-equivCache-Control contentno-cache, must-revalidate【效果】由31M降到8M
D、请求结束后回收资源
在ajax的complate设置XML为null
XMLHttpRequest null;总结增加no-cache确实对内存的消耗带来一定的作用但是我想还是有增长点击的次数多了是否会仍然存在页面无响应现象
2.2 定时器优化
首先我们了解一下定时器执行顺序它是一个异步执行函数。 尤其是我们页面有定时刷新功能很多人都会想到应用setInterval但是setInterval会存在回调积累尤其是频繁操作dom使得页面不断的repaint和reflow,特别消耗资源尤其是遇到死循环直接GG。 如何合理应用setInterval呢 A、不使用时候清除或者定时清除clearInterval B、使用过程中嵌套setTimeout(func,0)使用有助于释放资源,防止阻塞 setTimeout设置0的主要作用是把func执行体放在队列最后去执行。实际应用如下
HomeListDataInterval setInterval(function(){console.log(定时器触发次数 (intNum));setTimeout(() {doSearch()},0)
}, conTime * 1000);其实在一定的时间内或者没有应用这个页面的话应及时清除HomeListDataInterval定时器
clearInterval(HomeListDataInterval);2.3 代码优化排查
我采用的是代码一段一段的注释的方式去定位的每次注释后然后再看CPU和内存的占用率一旦出现明显的下降说明你注释的那些代码内肯定存在毒瘤所以说针对性优化之后你肯定会发现速度快的飞起。 通过排除我发现一个问题就是我前端做文字滚动引发的我是用的是jquery的jquery.liMarquee.js组件一旦注释了我的CPU瞬间下降了后面我就自己重新编写了一个CSS來实现文字滚动样式。
2.4 同步阻塞排查
在ajax请求的时候很多人就为了图方便直接用了async:false属性的设置确实可以第一时间访问但是后续所有的进程都会被它堵住从而会出现响应超时的现象。 就好比是一个公园只有一个厕所但是那么多人排队这就堵着进程了要是有些人能够被安排不同时间段去上厕所那么对它来说压力就少很多。
3、彩蛋直通
喜欢博主的这篇文章的可以上皇榜支持一下博主哟皇榜入口点击此处
