javascript - 在页面加载时使用 async/defer 加载多个 Jquery 文件

Question

我一直在阅读有关在 HTML5 页面标题中的脚本调用上使用 async 的内容，以使脚本加载不会占用页面的其余部分。

所以我提出了类似的东西

    <script src="/includes/js/modernizr-2.6.2.min.js" async></script>
    <script src="/includes/js/jquery-1.11.0.min.js" async></script>
    <script src="/includes/js/tinymce/tinymce.min.js" async></script>
<script>
 $( document ).ready(function() {
            tinymce.init({
                mode : "specific_textareas",
                editor_selector : "mceEditor",
                plugins: [
                    "advlist autolink autosave lists link image"
                ],
                toolbar1: "insertfile undo redo",
                image_advtab: true,
                paste_as_text: true
            });
          /* <other jQuery page specific scripts here too> */
        });
</script>

但这会带来各种错误:

• 文档调用无法识别 JQuery $。
• tinyMCE jquery 方法tinymce.init 无法识别

很明显，我从脚本链接中删除了 async 调用 - 这可行，但是当我无法调用任何 JQuery 方法或函数时，页面加载上的整个异步内容有什么意义直到必须首先加载jquery.js，然后还必须非异步加载每个.js文件，然后才能在页面脚本中运行相关方法(或文档加载时附加脚本)。

我读了很多关于async如何适合AJAX的内容，但是在将async更改为defer之后，我发现这也不能解决我的问题，返回相同的控制台错误。

有什么基本的事情我没有做吗？或者异步脚本加载根本就不能在基本的非 AJAX 页面加载上完成？

编辑:使用脚本，页面加载大约需要+4秒，主要是由于tinyMCE及其所有插件，因此我尝试尝试使用异步加载插件等...

Answer 1

这并不是说 jQuery 不能异步加载，而是它并不真正有利于人们通常组织他们的 javascript。有一些文章和工具可以解决该问题 ( http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader )，但在页面底部加载 javascript 作为最后加载通常会更简单。这至少会首先加载您的 DOM，并且在加载库时不会停止任何视觉加载。只要您在脚本需要 jQuery 之前加载 jQuery，一切都会顺利进行。

请注意，如果您的脚本影响页面布局，那么当这些脚本运行时，您将会出现闪烁/闪光/调整，因为大多数内容在进行调整时都会出现。在您的情况下，tinyMCE 将在文本区域可见后触发，通常会在事后进行调整。