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


Posted in Javascript onDecember 03, 2014

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;

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

Javascript 相关文章推荐
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
javascript中clone对象详解
Dec 03 #Javascript
javascript使用正则表达式检测IP地址
Dec 03 #Javascript
Javascript快速排序算法详解
Dec 03 #Javascript
Javascript冒泡排序算法详解
Dec 03 #Javascript
Javascript堆排序算法详解
Dec 03 #Javascript
node.js下when.js 的异步编程实践
Dec 03 #Javascript
jquery操作 iframe的方法
Dec 03 #Javascript
You might like
解析PHP 5.5 新特性
2013/07/02 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php+ajax+json 详解及实例代码
2016/12/12 PHP
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
微信小程序实现文字跑马灯
2020/05/26 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
使用Vue实现简单计算器
2020/02/25 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
Python标准库之sqlite3使用实例
2014/11/25 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python使用Turtle模块绘制五星红旗代码示例
2017/12/11 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python如何对XML 解析
2020/06/28 Python
南京软件公司的.net程序员笔试题
2014/08/31 面试题
城市规划毕业生求职信
2013/10/10 职场文书
先进教师事迹材料
2014/12/16 职场文书
提档介绍信范文
2015/10/22 职场文书
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python
用Python创建简易网站图文教程
2021/06/11 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers