javascript - 自己写的网页占用CPU和内存过高是什么原因,怎么优化?
问题描述
如题,内存和CPU占用过高,请问是什么原因?谢谢请输入代码
$(
function () {
//控制iframe响应式显示效果
function iframeview() {
var viewwidth=document.body.clientWidth;
if (viewwidth<768){
var viewdu=document.getElementById('mana').contentWindow,
tag=document.createElement("style"),
text=document.createTextNode("body{-webkit-transform: scale(0.4615); -moz-transform: scale(0.4615); -ms-transform: scale(0.4615); -o-transform: scale(0.4615);transform: scale(0.4615);width: 260px;margin-top: -142px;margin-left: -70px;}");
tag.appendChild(text);
viewdu.document.getElementsByTagName("head")[0].appendChild(tag);
}
}
//数字变化特效
//star<stop
function numChange(position,star,stop,step) {//对象,开始数值,结束数值,保留小数位数
$(position).html(star);
var speed=(stop-star)/20,
star=star;
function bb() {
if (star<stop){
star=stop;
clearInterval(timer)
}else {
star+=speed;
}
}
var timer=setInterval(
function () {
bb();
$(position).html(star.toFixed(step));
},100);
}
//star>stop
function aNumChange(position,star,stop,step) {
$(position).html(star);
var speed=(stop-star)/20,
star=star;
function bb() {
if (star>stop){
star=stop;
clearInterval(timer)
}else {
star+=speed;
}
}
var timer=setInterval(
function () {
bb();
$(position).html(star.toFixed(step));
},100);
}
//监听scroll事件判断执行数字特效变化
var first=true,
once=true,
isfirst=true,
monce=true;
$(document).scroll(
function () {
var clienth=$(window).height(),//获取当下浏览器可视窗口的高度
worhh=clienth*30/100,
no3=document.getElementById("no3"),
no3h=no3.getBoundingClientRect().top,
no5=document.getElementById("no5"),
no5h=no5.getBoundingClientRect().top,
step3=document.getElementById("step3"),
step3h=step3.getBoundingClientRect().top,
mana=document.getElementById("mana"),
manah=mana.getBoundingClientRect().top;
if (no3h<worhh && no3h>-300 && first){
numChange("#second",2,0.5,1);
aNumChange("#number",9,1000,0);
numChange("#rate",0.9999,0.0009,4);
aNumChange("#angle",0,360,0);
first=false;
}
if (no5h<worhh && no5h>-300 && once){
numChange("#minute",16,5,0);
aNumChange("#weight",0,150,0);
iframeview();//iframe可能存在加载延时问题,故放此位置以规避
once=false;
}
if(manah<worhh*1.5 && manah>-300 && monce){
document.getElementById('mana').contentWindow.manaframe();
monce=false;
}
if (step3h<worhh*1.5 && step3h>-300 && isfirst){
aNumChange("#money",0,20,0);
isfirst=false;
}
}
)
}
);
内存和cpu过高的主要原因
在于监听了document的scroll事件并创建了过多的时间间隔过短的时间计时器。
从你的代码大概可以知道每当你滚动鼠标,就会执行一个函数,这个函数会根据情况调用 numChange、aNumChange等函数,这些函数又会创建间隔为.1秒的计时器。
由于scroll事件的触发次数是和鼠标的滚动距离有关的,所以当你滚动比较长的话,假设一次触发了5次scroll,那么会触发五次事件,这五次事件会调用回调函数,假设条件为最差情况,你触发了两次numchange和两次anumchange,那么你同时创建了 5 * 4 = 20 个时间计时器,这20个时间计时器会在每个.1秒后执行对应的函数,也就是每个.1秒就会有 20个函数需要执行,那么在1秒内会有200个函数需要被执行,并且是要修改DOM元素的,这个是很消耗性能的。
当然,如果处理器够快的话,这是没有问题的,问题在于时间计时器是不准确的,就算我们定义
setInterval(function(){}, 0);
函数也不会立即执行,不同的浏览器会有不同的偏差,一般在24ms左右,这还是队列里面没有其他函数执行的情况下,所以当队列里面还有函数在执行的情况下,队列里的函数会处于等待的状况。但是!setInterval可不理你,只要时间一到,就固定地往队列里面推函数,不管前面是否还有未执行的函数。
以上这些原因组合在一起就导致了内存cpu等过高,知道了原因就知道怎么解决了:
1、不要直接监听scroll,等到鼠标滚动停止的时候再去触发事件
2、控制创建的时间计时器的数量
3、控制时间计时器的时间间隔
代码? 问题原因和解决思路都有了,代码就只是时间而已了,加油!
这篇关于javascript - 自己写的网页占用CPU和内存过高是什么原因,怎么优化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!