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方法时，页面加载时整个异步内容的重点是什么？函数，直到 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，一切都会顺利进行。

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

Answer 2

我需要通过Google的pagespeed测试。所以这就是我所做的加载jquery async和所有依赖它的脚本/代码的过程，因此加载不会阻塞。如果未加载jquery，它将等待。如果加载了jquery，它将立即加载或执行代码。

<script>
    var rdy=[],jqloaded=false;
    function doscript(a){
        if(typeof a=="function"){
            (a)();
        } else {
            $("head").append('<script src="'+a+'"></script>');
        }
    }

    function jqrdy(){
        if(typeof $=="undefined"){
            setTimeout(jqrdy,10);
            return;
        }
        $(document).ready(function(){
            jqloaded=true;
            for (var i=0;i<rdy.length;i++){
                doscript(rdy[i])
            }
        });
    }

    jqrdy();

    function rdypush(a){
        if(!jqloaded){
            rdy.push(a);
        } else {
            doscript(a);
        }
    }
</script>

<script src="/js/jquery-3.3.1.min.js" async></script>

<script>
    rdypush("/js/jquery-ui.min.js");
    rdypush("/js/bootstrap.min.js");
    rdypush("/js/tinymce/tinymce.min.js");
    rdypush(function(){
        console.log("I'm Ready");
    });
</script>

在页面加载

2 个答案: