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;

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

赞 (0)

相关推荐

  • 写给小白的JavaScript引擎指南

    写给小白的JavaScript引擎指南

    关于本文标题,我并不认为参与写或者读本文的人是白痴.但是有时某个话题会让你觉得自己就像个白痴一样,而 JavaScript 引擎就是这些话题之一,至少对于我来说是这样. 有时编写 Web 应用的代码会感觉充满魔力,因为我们只是写了一系列字符,就能在浏览器里看到效果了.但是理解魔法背后的技术,可以帮助你更好地提高编程技巧.至少当你试图解释在 JavaScript 驱动的 web 或移动应用的幕后发生了什么的时候,会觉得自己不那么白痴了. 很多年前,那是我还是个研究生讲师,向一个教授抱怨还没有掌握那

  • javascript模版引擎-tmpl的bug修复与性能优化分析

    精妙的 tmpl 前端模板类开源的不少,但最属 jQuery 作者 John Resig 开发的 "javascript micro templating" 最为精妙,寥寥几笔便实现了模板引擎核心功能. 它的介绍与使用方式请看作者博客:http://ejohn.org/blog/javascript-micro-templating/ 让我们先看看他的源码: 复制代码 代码如下: (function(){ var cache = {}; this.tmpl = function (st

  • 为JavaScript提供睡眠功能(sleep) 自编译JS引擎

    即然该功能如此需要,但为什么js中不提供这样的函数呢? 目前浏览器都是在UI线程解析js,以火狐浏览器为例,我重新编译了js引擎,并且在js引警中添加了sleep方法,该方法调用c语言的线程睡眠函数. 将方法附加到Object上,方法签名为sleep();无参数.默认休眠1秒钟,如果你在js中调用该函数,浏览器UI界面将被阻碍. 另外如果你的js函数存在死循环,浏览器的js解析会检测到js执行超时会提醒你是否终止执行本页面的js. 最后提供新编译的js引擎,将它们替换firefox下的js引擎即

  • 教你使用javascript简单写一个页面模板引擎

    于是我又想着能不能写一些简单的代码来完善这个模板引擎,又能与其它现有的逻辑协同工作.AbsurdJS本身主要是以NodeJS的模块的形式发布的,不过它也会发布客户端版本.考虑到这些,我就不能直接使用现有的引擎了,因为它们大部分都是在NodeJS上运行的,而不能跑在浏览器上.我需要的是一个小巧的,纯粹以Javascript编写的东西,能够直接运行在浏览器上.当我某天偶然发现John Resig的这篇博客,我惊喜地发现,这不正是我苦苦寻找的东西嘛!我稍稍做了一些修改,代码行数差不多20行左右.其中的

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • 基于jQuery的JavaScript模版引擎JsRender使用指南

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎,都会这么宣传... 由于工作需要,小菜才接触到此款模版引擎.使用了一段时间,发现它确实比较强大,但小菜觉得有些地方强大的过头了,反倒让人觉得很难理解. 另一方面,JsRender的官方文档比较详细,但其他资料出奇的少,遇到点什么问题,基本搜不到,不仅仅是相关问题搜不到,几乎就是没有结果. 再加上Js

  • javascript 多种搜索引擎集成的页面实现代码

    javascript 多种搜索引擎集成的页面实现代码

    - 输入一个关键词,鼠标点击后面的搜索引擎链接,即可进入到该引擎的页面 - 如果输入关键词后敲回车,则使用默认搜索引擎,而每选择新的搜索引擎,默认引擎也会随之改变 - 自动记忆上次使用的搜索引擎,后面添加* 源代码如下,使用了多种IE/FF的适应办法: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数

    Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数

    这里演示如何利用PowerShell将一段Javascript函数字符串交给Jint引擎去执行. 执行Javascript函数 .Net版的Javascript解释器 可以从Git上获取Jint的代码,也可以从nuget上下载Jint的程序集. Jint是一个面向.Net的Javascript解释器.Jint不会把Javascript编译成.Net字节码,所以它非常适用于脚本小且运行起来速度快的工程,或者运行在不同平台上的脚本. PowerShell调用 拿到Dll根据-Path参数直接使用Ad

  • javascript轻量级模板引擎juicer使用指南

    使用方法 编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju

  • js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问

    以下javascript脚本代码可以实现判断访问是否来自搜索引擎. 代码如下: <script type="text/javascript"> if(window.name != 'ad_app6'){ var r = document.referrer; r = r.toLowerCase(); //转为小写 var aSites = new Array('google.','baidu.','soso.','so.','360.','yahoo.','youdao.',

  • silverlight线程与基于事件驱动javascript引擎（实现轨迹回放功能）

    案例背景: 整个功能其实就是从数据库取出数据,然后在界面上播放,简单地说就是类似网上在线看视频,听音乐,只不过我取的是字符串数据,而他们取的是流文件数据.把整体数据分成十份,十个线程同时向数据库取数据(并发提高速度)放在十个队列中,另外一个线程从队列中取数据拿出来到界面上播放,可以拖动播放进度,停止,暂停,重新播放,控制播放速度.恩,功能听起来似乎很简单,做起来也不是很难.但是后面发现的一些问题,以及顺着这些问题往下挖掘,挖掘了一些我认为值得记住的东西. 关键东西: 1. siliverligh

  • 浏览器的JavaScript引擎的识别方法

    浏览器的JavaScript引擎的识别方法

    答案来自StackOverflow,打开这个网页http://jsbin.com/opuvas即可,这个网页也是答题者自己写的. 二维码是这个网址.网页内有统计访问量,作者想知道对多少人有用,建议尊重原创,不要复制这个网页. 对PC浏览器和移动浏览器都可用. 其原理是这段js: 复制代码 代码如下: window.onload = function() { var v8string = 'function%20javaEnabled%28%29%20%7B%20%5Bnative%20code%

  • jsp搜索引擎

    package coreservlets; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; import java.net.*; public class SearchEngines extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws Servle

  • 黑帽seo劫持程序,js劫持搜索引擎代码

    今天在浏览网页时无意中发现了这段JS劫持搜索引擎代码.劫持搜索引擎正常搜索过来的流量,这是黑帽seo常用的劫持方法.特意解密出来供大家了解其劫持原理. 源码打印帮助 <SCRIPT language="<span id="0_nwp" style="width: auto; height: auto; float: none;"><a id="0_nwl" href="http://cpro.baidu

随机推荐