标签: deferred-loading

我试图找出我继承的一些代码的问题.

我有一个HTML页面

<script type="text/javascript" src="file1.js" defer="defer"></script>
<script type="text/javascript" src="file2.js" defer="defer"></script>
</body>
</html>

file1.js有

FOO = {
  init : function () {
    var bar = BAR;
  }
}

$(document).ready(FOO.init);

file2.js有

var BAR = {
}

由于元素的延迟属性,是否可以安全地假设当那个可能仍然未定义的.ready()调用b/c 由于延迟执行而导致代码尚未执行？FOO.init()BARfile2.js

这将匹配我试图追踪的错误(仅在IE中偶尔发生),但我真的想在我处理解决方案之前理解为什么会发生这种情况.我不知道为什么原来的开发人员使用defer,除了一个神秘的称赞"他必须"这样做.

由于使用$.Deferred我已经遇到过这种情况几次:我有一个值列表,每个值都以某种方式产生一个Deferred Object,并且我想在解析所有Deferred对象后执行回调.

一个更具体的例子是这样的:

var urls = [ 'foo.com', 'bar.com', 'baz.com', 'qux.com' ],
    defers = [], defer;

for( var i = 0, j = urls.length; i < j; i++ ){
    defer = $.ajax({
        url: 'http://' + urls[ i ]
    });

    defers.push(defer);
}

$.when.apply(window, defers).done(function(){
    // Do Something
});

有没有比我的例子中的代码更优雅的解决方案？

Google Page Speed Insights

"尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分."

上面的问题促使我提供了2个样式表.所以我用下面的代码加载我的样式表来推迟加载样式表.

window.onload = loadResource;

function loadResource(){
    css_array=[resource1,resource2];
    css_init(css_array);
}

function css_init(hrefPath){
    for(a = 0; a < hrefPath.length; a++){
        link=document.createElement('link');
        link.href=hrefPath[a];
        link.rel='stylesheet';
        document.getElementsByTagName('head')[0].appendChild(link);
    }
}

与上面的代码的所有CSS样式表后,加载DOMContentLoaded Event和Load Event已经被解雇(的Chrome浏览器开发工具,网络选项卡)

但即使有上述内容,渲染阻止问题仍未解决.知道为什么它不起作用以及如何正确推迟css样式表？谢谢您的帮助!

如何设置两个外部asyncJavascript文件的加载和执行顺序？

鉴于以下......

<script src="framework.js" async></script> // Larger file
<script src="scripts.js" async></script> // Small file

虽然由于它的文件大小而在scripts.js下载和执行之前是第二个framework.js,但是scripts.js依赖于framework.js.

有没有办法在保持async属性的同时指定加载和执行顺序？

只有在准备好DOM之后才开始操作DOM是一个古老的常识,我们可以确定所有元素都可用,并且在jQuery之后的日子里我们都使用了这个DOMContentLoaded事件.

现在,Web组件(特别是以自治自定义元素的形式)倾向于创建自己的HTML,通常在connectedCallback()生命周期方法中.

第一个问题:

如何DOMContentLoaded与(自治)自定义元素相关？只有在所有组件connectedCallbacks完成后才会发生事件吗？如果没有,我如何确保某些代码仅在Web组件初始化后执行？

第二个问题,完全相关:

Web组件如何与元素的defer属性相关联script？

我在网站上显示诺顿安全站点密封,我想提高页面速度,推迟加载密封脚本.我所做的所有尝试都失败了,我发现只有这个页面提到了这一点(链接).有没有人为此找到了一个好的解决方法？
我用来运行其他脚本的延迟代码如下所示:

<script type="text/javascript">(function(d, s) {
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.src = url;
        js.id = id;
        fjs.parentNode.insertBefore(js, fjs);
    };
    load('/js/scriptone.js', 'one');
    load('/js/scripttwo.js', 'two');
    }(document, 'script'));
</script>

如果你想查看网站密封初始化脚本:(我正在使用flash动画密封)

<script type="text/javascript" src="https://trustseal.verisign.com/getseal?host_name=www.undisclosed.com&amp;size=S&amp;use_flash=YES&amp;use_transparent=YES&amp;lang=en"></script>

显然这只会在我的网站上正确显示,我选择更改域名以保护隐私.我真的想避免使用iframe,如果你发现相关我也加载jQuery

Google pagespeed正在抱怨我的facebook就像按钮脚本一样.我怎样才能推迟脚本？

在初始页面加载期间解析45KiB的JavaScript.推迟解析JavaScript以减少页面呈现的阻塞. http ://static.ak.facebook.com/.../xd_arbiter.php？...(内联JavaScript的21KiB)https://s-static.ak.facebook.com/.../xd_arbiter.php？...(内联JavaScript的21KiB)http://www.facebook.com/.../like.php？...(内联JavaScript的3KiB)

这是我正在使用的代码,我将它加载到页面页脚的.js文件中.

(function(d,s,id){
        var js,fjs = d.getElementsByTagName(s)[0];
        if(d.getElementById(id)){return;}
        js=d.createElement(s);
        js.id=id;
        js.async=true;
        js.defer=true;//THIS DOES NOT APPEAR TO SATISFY PAGESPEED
        js.src="//connect.facebook.net/en_US/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js,fjs);
    }
    (document, "script", "facebook-jssdk")
);

结果在以下脚本标记中(通过Chrome的检查器):

    <script 
    id="facebook-jssdk" 
    async="" 
    defer="" 
    src="//connect.facebook.net/en_US/all.js#xfbml=1"></script>

所以我尝试添加这样的延迟脚本标签

const script = document.createElement('script');
  script.setAttribute('src', '/script.js');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('defer', true);//this is the code in question!
  document.getElementsByTagName('body')[0].appendChild(script);

但是我发现结果脚本标签会生成defer属性,defer=true而不仅仅是defer.

它们是一样的吗？什么是暗示,如果我做的defer=true,而不是defer？

谢谢!

我在网站上安装了 Google reCaptcha v2（复选框类型）。但即使使用“延迟”属性（基于页面速度测试），它也会显着减慢移动设备上的页面加载速度。因此，我想完全推迟其加载，直到页面完全加载之后。

表单代码（安装 reCaptcha 的位置）如下所示：

    <form id="sib-form" method="POST" action="https://.........." data-type="subscription">
       <input class="input" type="text" id="FIRSTNAME" name="FIRSTNAME" data-required="true">
       <input class="input" type="text" id="LASTNAME" name="LASTNAME" data-required="true">

       <script>function handleCaptchaResponse() { 
       var event = new Event('captchaChange'); document.getElementById('sib-captcha').dispatchEvent(event); 
       } </script>  

       <div class="g-recaptcha sib-visible-recaptcha" id="sib-captcha" data-sitekey="xxxxxxxxxxxxx" 
       data-callback="handleCaptchaResponse"></div>

       <button form="sib-form" type="submit">Subscribe</button>      
       <input type="text" name="email_address_check" value="" class="input--hidden">        
       <input type="hidden" name="locale" value="en">
    </form>

并且在 head 部分添加了这个 reCaptcha js 文件：

    <script defer src="https://www.google.com/recaptcha/api.js?hl=en"></script>

即使此 js 文件使用了“defer”属性，其他相关文件仍然会加载。它们是页面速度较低的原因。

如何完全推迟此 reCaptcha 的加载，直到其他所有内容完全加载之后？

我知道你可以使用defer =""html属性来推迟javascript文件,但它只支持IE(lol)并且只会推迟javascript文件,我需要推迟整个插件加载.

有没有办法做到这一点？我喜欢Facebook整合等等,但是plguins很慢.它使加载时间增加了一倍以上.

谢谢!〜杰克逊

<div class="socialplugins"><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="DesignSweeter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>

<div class="socialplugins">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218305128208494&amp;xfbml=1"></script><fb:like href="http://designsweeter.com/" send="false" layout="box_count" width="55" show_faces="true" font=""></fb:like>
</div>

<div class="socialplugins">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" count="true"></g:plusone>
</div>

注意:.socialplugins类仅用于在我的标题中定位.