如何延迟或异步此 JS 脚本代码？

Question

我对这段代码有疑问。我知道我们可以为外部脚本添加 async 或 defer，但是使用这个脚本我无法处理 document.write("<script src=\"http://example...... ，所以当我向该代码添加 defer 或 async 时，脚本停止工作。任何人都可以帮助我，因为这段代码使我的博客出现渲染阻塞问题。

这是代码：

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type='text/javascript'>
//<![CDATA[
// Recent Post By Tag
// Recent Post By Tag For Blogger
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li class="clear">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_blank" title="'+r+'">'+r+'</a></strong>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

<script>
document.write("<script src=\"http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag\"><\/script>");
</script>

谢谢...

Answer 1

defer 或 async 更改脚本的加载时间，因此会在脚本执行时更改，从而会更改 document.write() 语句中的时间 rcentbytag() 函数。

由于 rcentbytag() 函数使用 document.write() 将内容插入您的页面，您无法更改该脚本在页面中的位置，除非您将其重写为不使用 document.write() 并以另一种方式将内容插入页面中的适当位置（例如 .appendChild()）。

因此，如果您想延迟加载调用 rcentbytag() 的脚本，则必须重写 rcentbytag() 以将其放入页面的内容以不同的方式插入不使用 document.write().

如果您不再使用 document.write()，您将有更多选择。除了在这里妨碍您之外，它还会因各种原因减慢加载程序。

你使用document.write()的脚本解压后是这样的：

function rcentbytag(e) {
    document.write('<ul class="recent-by-tag">');
    for (var t = 0; t < numposts; t++) {
        var n = e.feed.entry[t];
        var r = n.title.$t;
        var i;
        if (t == e.feed.entry.length) break;
        for (var o = 0; o < n.link.length; o++) {
            if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
                var u = n.link[o].title;
                var f = n.link[o].href
            }
            if (n.link[o].rel == "alternate") {
                i = n.link[o].href;
                break
            }
        }
        var l;
        try {
            l = n.media$thumbnail.url
        } catch (h) {
            s = n.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf('src="', a);
            c = s.indexOf('"', b + 5);
            d = s.substr(b + 5, c - b - 5);
            if (a != -1 && b != -1 && c != -1 && d != "") {
                l = d
            } else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
        }
        var p = n.published.$t;
        var v = p.substring(0, 4);
        var m = p.substring(5, 7);
        var g = p.substring(8, 10);
        var y = new Array;
        y[1] = "Januari";
        y[2] = "Februari";
        y[3] = "Maret";
        y[4] = "April";
        y[5] = "Mei";
        y[6] = "Juni";
        y[7] = "Juli";
        y[8] = "Agustus";
        y[9] = "September";
        y[10] = "Oktober";
        y[11] = "November";
        y[12] = "Desember";
        document.write('<li class="clear">');
        if (showpostthumbnails == true) document.write('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
        document.write('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
        document.write('<br>');
        var x = "";
        var T = 0;
        if (showpostdate == true) {
            x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
            T = 1
        }
        document.write(x);
        document.write("</li>");
        if (t != numposts - 1) document.write("")
    }
    document.write("</ul>")
}

可以用一个新函数替换其中的所有 document.write() 调用，该函数仅累积 HTML，然后在末尾将所有 HTML 插入到先前的将 div 放入您的文档中：

function rcentbytag(e) {
    var storedHTML = "";

    function saveHTML(h) {
        storedHTML += h;
    }

    saveHTML('<ul class="recent-by-tag">');
    for (var t = 0; t < numposts; t++) {
        var n = e.feed.entry[t];
        var r = n.title.$t;
        var i;
        if (t == e.feed.entry.length) break;
        for (var o = 0; o < n.link.length; o++) {
            if (n.link[o].rel == "replies" && n.link[o].type == "text/html") {
                var u = n.link[o].title;
                var f = n.link[o].href
            }
            if (n.link[o].rel == "alternate") {
                i = n.link[o].href;
                break
            }
        }
        var l;
        try {
            l = n.media$thumbnail.url
        } catch (h) {
            s = n.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf('src="', a);
            c = s.indexOf('"', b + 5);
            d = s.substr(b + 5, c - b - 5);
            if (a != -1 && b != -1 && c != -1 && d != "") {
                l = d
            } else l = "http://2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"
        }
        var p = n.published.$t;
        var v = p.substring(0, 4);
        var m = p.substring(5, 7);
        var g = p.substring(8, 10);
        var y = new Array;
        y[1] = "Januari";
        y[2] = "Februari";
        y[3] = "Maret";
        y[4] = "April";
        y[5] = "Mei";
        y[6] = "Juni";
        y[7] = "Juli";
        y[8] = "Agustus";
        y[9] = "September";
        y[10] = "Oktober";
        y[11] = "November";
        y[12] = "Desember";
        saveHTML('<li class="clear">');
        if (showpostthumbnails == true) saveHTML('<a href="' + i + '" target ="_blank" title="' + r + '"><img class="rct-thumb" alt="' + r + '" src="' + l + '"/></a>');
        saveHTML('<strong><a href="' + i + '" target ="_blank" title="' + r + '">' + r + '</a></strong>');
        saveHTML('<br>');
        var x = "";
        var T = 0;
        if (showpostdate == true) {
            x = '<span class="showdates">' + x + g + " " + y[parseInt(m, 10)] + " " + v + "</span>";
            T = 1
        }
        saveHTML(x);
        saveHTML("</li>");
        if (t != numposts - 1) saveHTML("")
    }
    saveHTML("</ul>")
    document.getElementById("rcentDiv").innerHTML = storedHTML;
}

然后，你可以把你的HTML改成这个。这会插入一个占位符 <div>，这是要添加内容的地方，您使用修改后的 rcentbytag() 将 HTML 插入 div，然后您可以使用 defer 在 feeds 脚本上，它将调用 rcentbytag() 这将适当地插入内容：

<div id="rcentDiv"></div>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;

// Recent Post By Tag
// Recent Post By Tag For Blogger
// insert revised rcentbytag() code here
</script>

<script defer src="http://example.blogspot.com/feeds/posts/default/-/LabelHere?orderby=published&alt=json-in-script&callback=rcentbytag"></script>

如何延迟或异步此 JS 脚本代码？

How can I defer or async this JS script code?

javascript

asynchronous

document.write

deferred