現代瀏覽器中的非阻塞javascript和css。還需要嗎？

Question

我正在玩一些非阻塞的JavaScript加載。 這意味着我的JavaScript在我的一個小片段head ，並載入我的所有外部文件在運行時。 我甚至更進一步加載CSS非阻塞。

我看到我能找到的文章有點過時，這就是為什么我想知道這是否仍然相關。

現在首先是腳本，它們看起來像這樣：

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles只是一個包含所有文件的所有url的對象。

我已經運行了3次測試，結果如下：

正常設置

這只是正常的設置，頭部有4個css文件，頁面底部有3個js文件。

現在我沒有看到任何阻塞。 我認為一切都在同時加載。

非阻塞JS

現在更進一步，我只使js文件非阻塞。 這與上面的腳本。 我突然發現我的css文件阻塞了負載。 這很奇怪，因為在第一個例子中它沒有阻塞任何東西。 為什么css會突然阻塞負載？

一切都是非阻塞的

最后，我做了一個測試，其中所有外部文件都以非阻塞方式加載。 現在我認為我們的第一種方法沒有任何區別。 它們看起來都一樣。

結論

我的結論是文件已經以非阻塞方式加載，我沒有看到需要添加特殊腳本。

或者我在這里遺漏了什么？

更多：

• 文章： http ： //www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• 問題： Javascript非阻塞腳本，為什么不簡單地將所有腳本放在</ body>標簽之前？
• 問題： 現代瀏覽器是否仍限制並行下載？
• 代碼： http ： //calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• 代碼： http ： //blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Answer 1

是的，在今天的瀏覽器中，引用的文件是以非阻塞方式加載的。 但是有區別：

• 如果你把“你不需要等待的東西”用於動態加載，就會出現就緒事件，正如你可以從藍條的時間看到的那樣。 因此頁面中的操作可能會更快開始。
• 從頁面中的文本加載的腳本（與動態加載相反）按順序執行。 因此，如果有人加載時間過長，他們必須等待對方。 除非將.async=false到腳本元素，否則動態加載的腳本會以其他方式盡快執行。

因此，在當代瀏覽器中，差異僅僅是語義上的（靜態負載模擬舊的順序方式，動態更加平行）。

Answer 2

這取決於您要在同一時間加載多少個文件。 在您的情況下，您使用3個JavaScript文件。 不同的瀏覽器有不同的限制，所以這意味着當你有7個JavaScript文件在Frefox 7th將在6完成后加載，因為Firefox有限制6個並行下載。

在標記之前使用腳本或加載scitps仍然是很好的方法。 嘗試使用更多JavaScript文件重復測試，例如10個左右。