Question

我想知道是否可以以不阻止用户体验的方式加载javascript。我不知道如何实现相同，但我正在寻找一个跨浏览器的解决方案。我想知道是否有人可以指导我朝着正确的方向前进。将js放在页面底部不能很好。

感谢您的时间。

Answer 1

Javascript在一个单线程中运行，所以如果你有大量的Javascript调用，那么就像ExtJS这样的librairies一样，它很慢是正常的。但是，您可以考虑以下备选方案：

首先，尽量优化代码。

然后，您可以在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

祝你好运！

Answer 2

引用this answer：

Javascript资源请求是   确实阻塞，但有办法   围绕这个（即：注入DOM   头文件中的脚本标签和AJAX   请求）没有看到   页面我自己很可能是什么   发生在这里。

包括相同的多个副本   JS资源非常糟糕，但没有   必然是致命的，而且是典型的   可能有更大的网站   从单独的工作中获益   团队，或者只是简单的旧编码，   计划或维护。

至于雅虎的推荐   将脚本放在底部   身体，这改善了感知的反应   次，可以提高实际装载量   到一定程度的时间（因为所有的   允许以前的资源   async first），但它绝不会像   作为非阻塞请求有效   （虽然他们有很高的障碍   技术能力）。

您可以查看有关Non-Blocking Javascript的YUI博客文章。

Answer 3

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

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

Answer 4

当页面加载时，它只能在任何时候并行下载2个javascript文件，因此试图保持javascript文件的数量减少并且它们的大小下降（使用Minification，obsfucation和GZipping）将有助于加载体验。

在javascript运行时，在javascript中使用回调也有助于项目无阻塞。

jQuery中的一个例子是

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

});

Answer 5

带有小延迟的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;
});

Answer 6

Deferring execution of JavaScript可以是一个非常好的解决方案，如果你有一些JavaScript并不是立即加载的关键。

Answer 7

请查看此jQuery plugin（http://code.google.com/p/funky-jq-plugins/wiki/nonblocking）。

它的目标是使用计时器来模拟多线程环境，在这种环境中，UI线程不会被要求的操作（例如长列表上的迭代）冻结。很酷的东西......我写的：）

Ciao现在

非阻塞Javascript

7 个答案: