咦?浏览器又崩了?再试试这个呢!

Posted hellomryk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了咦?浏览器又崩了?再试试这个呢!相关的知识,希望对你有一定的参考价值。

由于连续进行过多的dom操作,有时候会导致浏览器运行崩溃,尤其是在ie中使用onrise事件处理的程序中有dom操作,高频的修改可能会导致浏览器崩溃,为了绕开这个问题,可以用定时器对函数进行节流。

当别人问你,同学说一下函数节流吧?
你可以告诉他,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码,当第二次调用该函数时,他会清除第一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
let processor = {
    timeoutId:null,
    //实际进行处理的方法
    performPrcessing:function() {
        //实际执行的代码
    },
    
    //初始处理调用的方法
    process:function() {
        clearTimeout(this.timeoutId);
        
        let that = this;
        this.timeoutId = setTimeout(function() {
            that.performPrcessing();
        },100)
    }
}

在这里创建一个processor对象,对象还有两个方法process和performProcessing(),前者是初始化任何处理所必须调用的,后者则是实际进行应完成的处理。当调用了process();第一步是清除存好的timeoutId,来阻止之前的调用被执行。然后创建一个新的定时器调用performProcessing(),由于setTimeout中用到的函数环境总是window,所以有必要保存this的引用方便用。

时间间隔100ms,表示最后一次调用process(),至少100ms后才会调用performProcessing(),所以如果100ms之内调用了process()共20次,performProcessing()仍只会被调用一次。

以后可以调用下面这个函数做到,定时器的自动设置和清除

function throttle(method,context) {
    clearTimeout(method.tid);
    method.tId = setTimeout(function(){
        method.call(context);
    },100)
}

如又一个div需要保持它的宽度始终等于高度:

window.onresize = function() {
    let div = document.getElementById(‘myDiv‘);
    div.style.height = div.offsetWidth + ‘px‘;
}

首先计算offsetwidth属性,css复杂的话,计算量会很大 其次高度的变化,会造成页面的reflow,这又会造成大计算量。 这时就可用throttle函数

function resizeDiv() {
    let div = document.getElementById(‘myDiv‘);
    div.style.height = div.offsetWidth + ‘px‘
}

window.onresize = function() {
    throttle(resizeDiv)
}

注意传入的的是resizeDiv不是resizeDiv(),多数情况下,用户是感受不到变化的,但是浏览器会节省大量运算。

扫码加群,每日更新一篇前端技术文章一起成长。

 

技术图片

以上是关于咦?浏览器又崩了?再试试这个呢!的主要内容,如果未能解决你的问题,请参考以下文章

比特币又崩了

服务器又崩了?10年+性能测试老鸟给测试工程师的忠告

713 事故之后,B站又崩了...

太刺激!刚刚,比特币又崩了:狂跌10000美元,53万人爆仓320亿!末日博士紧急发话…

hdu1241 dfs

ie浏览器的网页滚动条不能动,如何解决,就是网页右侧的滚动条,chrome浏览器的页面可以正常滚动。