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屋！