非阻塞Javascript

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

引用這個答案 ：

Javascript資源請求確實是阻塞的，但是有很多方法可以解決這個問題（例如：頭腦中注入DOM的腳本標記，以及AJAX請求），而我自己看不到頁面可能就是這里發生的事情。

包括相同JS資源的多個副本是非常糟糕的，但不一定是致命的，並且是典型的較大的站點，可能已經從單獨的團隊的工作中累積，或者只是簡單的舊編碼，計划或維護。

至於雅虎建議將腳本放在正文的底部，這可以提高執行的響應時間，並且可以在一定程度上改善實際加載時間（因為所有以前的資源都允許首先異步），但它永遠不會那么有效作為非阻塞請求（盡管它們具有很高的技術能力）。

您可以查看有關非阻止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

如果您有一些對於立即加載並不重要的JavaScript，則推遲執行JavaScript可能是一個非常好的解決方案。

Answer 7

看看這個jQuery插件 （http://code.google.com/p/funky-jq-plugins/wiki/nonblocking）。

它旨在使用計時器來模擬多線程環境，在這種環境中，UI線程不會被需要的操作（例如長列表上的迭代）凍結。 很酷的東西......我寫的:)

Ciao現在