当前位置: 首页 > 编程笔记 >

javascript引擎长时间独占线程造成卡顿的解决方案

臧令
2023-03-14
本文向大家介绍javascript引擎长时间独占线程造成卡顿的解决方案,包括了javascript引擎长时间独占线程造成卡顿的解决方案的使用技巧和注意事项,需要的朋友参考一下

Javascript 引擎的单线程特性使得在处理一个较大的循环遍历时会长时间独占线程,导致其它事件(例如用户操作)无法及时响应,严重时造成卡顿甚至是假死现象。为解决上述问题,一种可行机制是将大的循环拆分成若干小的循环片段分片执行,使得Javascript 引擎有时机在各段之间插入执行其它事情,从而有效改善性能体验

Ansync.js


function Ansync (totalCount, segmentCount, workCallback, returnCallback)

{

    var num_of_item_for_each_segment = segmentCount;

    var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);

    var count_of_segment = 0;

    var timer;

    var start, end;

    this.process = function(scope, timeout)

    {

        if (scope != undefined)

        {

            workCallback = workCallback.bind(scope);

            returnCallback = returnCallback ? returnCallback.bind(scope) : undefined;

        }

        if (count_of_segment == num_of_segment)

        {

            clearTimeout(timer);

            if (returnCallback != undefined)

                returnCallback();

        }

        else

        {

            start = count_of_segment * num_of_item_for_each_segment;

            end = Math.min(totalCount, (count_of_segment + 1) * num_of_item_for_each_segment);

            if (num_of_segment == 1)//needn't create timer

            {

                workCallback(start, end);

                count_of_segment = 1;

                this.process();

            }

            else

            {

                timer = setTimeout(function ansyncTimeout(){

                    if (workCallback(start, end)) //finish process if function returns true

                    {

                        count_of_segment = num_of_segment;

                    }

                    else

                    {

                        count_of_segment++;

                    }

                    this.scope.process();

                }.bind({scope: this}),timeout == undefined ? Ansync.TimeOut : timeout);

            }

        }

    }

}

Ansync.TimeOut = 5;

方法很简单,但是很实用,有相同项目需求的小伙伴参考下吧

 类似资料:
  • 在做一个元素的拖拽的时候,对关闭图标和右键弹出层使用了position:absolute来相对于父元素(即每一个应用)进行定位。再通过mousedown、mousemove、mouseup三个事件来实现拖拽的逻辑,这样实现之后,发现当元素过多时,拖拽会卡顿。 如下面图片所示:

  • 本文向大家介绍5种解决Java独占写文件的方法,包括了5种解决Java独占写文件的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了5种解决Java独占写文件的方法,包含自己的一些理解,如若有不妥的地方欢迎大家提出。 方案1:利用RandomAccessFile的文件操作选项s,s即表示同步锁方式写 方案2:利用FileChannel的文件锁 方案3:先将要写的内容写入一个临时文件,然后

  • 因此,计时器在Cadence、SWF和Step函数等工作流引擎中是耐用的。耐用计时器对于需要等待很长一段时间,然后唤醒以执行一些业务逻辑的用例很有用。由于耐用性,它对各种故障具有弹性,使开发人员的编程体验和模型更好。 但是,如果要在计时器启动后对其进行更改,该怎么办?比如这个例子: 计时器启动后,您可能希望计时器改为等待3天,甚至取消它。如果您简单地将工作流代码更改为此怎么办? 这不起作用! 在

  • 本文向大家介绍CSS3 动画卡顿性能优化的完美解决方案,包括了CSS3 动画卡顿性能优化的完美解决方案的使用技巧和注意事项,需要的朋友参考一下 为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的。但是我们要明确以下几个概念:单线程,主线程和合成线程。 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2

  • 本文向大家介绍vue大数据表格卡顿问题的完美解决方案,包括了vue大数据表格卡顿问题的完美解决方案的使用技巧和注意事项,需要的朋友参考一下 前言 vue渲染小数据挺快,大数据vue开始出现卡顿现象,本文讲给大家详细介绍关于vue大数据表格卡顿问题的解决方法 点我在线体验Demo(请用电脑查看) 亲测苹果电脑,chrome浏览器无卡顿现象,其它浏览器并未测试,如遇到卡顿请备注系统和浏览器,方便我后续

  • iPhone在低电量模式会导致three.js项目掉帧与卡顿 在做Telegram Mini APP开发的时候遇到的问题,正常模式下无异常; 在iPhone进入低电量模式后,Mini APP里的three.js会出现严重的掉帧和卡顿。 在未显示three.js的内容时页面内存用量130M, 启用后内存用量在150M~163M。 请问是什么原因导致的?和CPU降频、动效被简化相关吗?有无解决办法?