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;

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



相关阅读:
Json数据解析模拟美团界面显示
nodeType属性返回被选节点的节点类型介绍
Android 游戏开发之Canvas画布的介绍及方法
360浏览器文本框获得焦点后被android软键盘遮罩该怎么办
HTML (css样式规范)必看篇
Java生成非对称型加密公钥和私钥的方法
C++中const用法小结
ASP.NET MVC5网站开发我的咨询列表及添加咨询(十二)
AngularJS入门知识之MVW类框架的编程思想探讨
动态改变gridview列宽度函数分享
通过CSS禁用页面内容选中和复制操作
SQL高级应用之同服务器上复制表到另一数据库中并实现去重复
针对Sqlserver大数据量插入速度慢或丢失数据的解决方法
jquery京东商城双11焦点图多图广告特效代码分享
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4