无阻塞Javascript

问题描述:

我想知道是否有可能以不妨碍用户体验的方式加载JavaScript。我不知道如何实现,但我正在寻找一种跨浏览器的解决方案。我想知道是否有人能指引我走向正确的方向。将js放在页面的底部并不适用。无阻塞Javascript

谢谢你的时间。

+0

Blargh,我有一个很好的链接,这一点,但我不能找到它 – Greg 2009-07-10 07:45:05

+0

需要澄清:你说的是加载javascript文件资源如`

+0

由于这不是跨浏览器,我不会将其作为解决方案发布,但对于不冻结DOM事件的线程化JavaScript,请查看[Web](https://developer.mozilla.org/en- US/docs/Web/API/Web_Workers_API/Using_web_workers)[Worker](http://www.html5rocks.com/en/tutorials/workers/basics/)[API](http://www.htmlgoodies.com/html5 /tutorials/introducing-html-5-web-workers-bringing-multi-threading-to-javascript.html)。 – 2015-07-04 17:41:16

Javascript运行在单线程中,所以如果你有大量的Javascript调用,比如像ExtJS这样的系统管理员,这可能会很慢。您可能会考虑以下替代方案:

首先,尽可能地优化代码。

然后,您可以在JavaScript中使用计时器来模拟异步工作。这里有一个很好的例子:http://ejohn.org/blog/how-javascript-timers-work/

如果你想了解更多信息,这里有一些关于如何尝试减少Javascript冻结时间的提示。

http://debuggable.com/posts/run-intense-js-without-freezing-the-browser:480f4dd6-f864-4f72-ae16-41cccbdd56cb

祝你好运!

我相信你可以使用Workers,但它似乎在FF3.5中实现,但是很少有其他的。

http://hacks.mozilla.org/2009/07/working-smarter-not-harder/

当网页加载它只能并行下载2个JavaScript文件在任何一个时间,试图保持的JavaScript文件下来,它们的大小记下电话号码(与缩小,obsfucation和gzip压缩)将有助于加载体验。

在JavaScript中使用回调函数还有助于处理javascript运行时的非阻塞项。

在jQuery的一个例子是

$('#id').click(function(){ 
    $.post('url',data,function(callbackdata){//do something 
     }); 

}); 

报价this answer

的Javascript资源请求 确实堵,但有办法 解决这个(即:DOM注入 脚本标记在头,和AJAX 请求)其中没有看到 页我自己很可能是什么 发生在这里。

包括相同 JS资源的多个副本是非常糟糕,但并不 不一定是致命的,而且是典型的 较大的站点可能已经 从单独 团队,或者只是普通的老坏的编码工作增生, 规划或维护。

至于雅虎的建议,在 体的底部 代替脚本,这提高percieved响应 时间,并能提高实际负荷 时间在一定程度上(因为所有的 以前的资源被允许 异步第一个),但它永远不会像 那样有效,因为非阻塞请求 (尽管它们具有技术能力的高障碍 )。

你可以看看关于Non-Blocking Javascript的YUI博客条目。

Deferring execution of JavaScript如果您有一些对于立即加载并不重要的JavaScript,它可能是一个非常好的解决方案。

带有小延迟的setTimeout将允许控制流继续进行,同时调度另一个函数稍后执行。这对防止UI被阻塞或无意中依赖于其他函数的成功执行特别有用。

我觉得它是非常有用的,以防止JavaScript错误干扰绑定事件。例如,安装一个表单上的提交处理程序:

$('#form').submit(function() { 
    setTimeout(function() { 
    // Submit handler function, i.e. do an ajax submission of the form 
    $.ajax(...etc...); 
    }, 1); 
    // Return false before the handler executes, ensuring the form won't manually submit 
    // in the event of a js error in the handler 
    return false; 
}); 

看一看这个jQuery plugin(http://code.google.com/p/funky-jq-plugins/wiki/nonblocking)。

它旨在使用计时器来模拟多线程环境,其中UI线程不会因要求像长列表迭代等操作而被冻结。非常酷的东西......我写的:)

侨现在