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

151 阅读 0 评论 100 点赞

我是靠谱客的博主健壮香水，最近开发中收集的这篇文章主要介绍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;