JavaScript 渲染 block

Question

尝试了解如何消除或最小化网站上不同 JavaScript 库的渲染延迟。

例如，如果我想加载来自许多社交网络的“即时”关注按钮，它们似乎会相互阻止渲染，并且您会收到令人不快的弹出窗口。

<div id="fb-root"></div>
<script>
(function(d, s) {
    var j, h = d.getElementsByTagName(s)[0],
        f = d.createDocumentFragment(),
        add = function(u, i) {
            if (d.getElementById(i)) {
                return;
            }
            j = d.createElement(s);
            j.src = u;
            i && (j.id = i);
            f.appendChild(j);
        };

    add('http://apis.google.com/js/plusone.js');
    add('http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk');
    add('http://platform.twitter.com/widgets.js', 'twitter-wjs');
    add('http://platform.linkedin.com/in.js');
    add('http://assets.pinterest.com/js/pinit.js');


    h.parentNode.insertBefore(f, h);
}(document, 'script'));
</script>


<div id="wrapper" style="width:100%; max-width:800px; margin-left:auto; margin-right:auto; text-align:center;">
    <div id="widgetWrapper" style="width:100%; max-width:800px; background-color: #eee; padding: 10px; margin-left:auto; margin-right:auto;">
        <div class="followBox">
                <div class="fb-like" data-href=" " data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
        </div>
        <div class="followBox">
                <div class="g-follow" data-annotation="bubble" data-height="20" data-href=" " data-rel="author"></div>
        </div>
        <div class="followBox">
                <a href=" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow </a>
        </div>
        <div class="followBox">
                <div class="g-ytsubscribe" data-channel=" " data-layout="default" data-count="default"></div>
        </div>
        <div class="followBox">
                <iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="113" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog= &color_scheme=dark"></iframe>
        </div>
        <div class="followBox">         
                <script type="IN/FollowCompany" data-id=" " data-counter="right"></script>
        </div>
        <div class="followBox">
                <a data-pin-do="buttonFollow" href="http://www.pinterest.com/ /">Fun Paw Care</a>
        </div>      
    </div>
</div>

对于 JS 的这种类型的渲染阻塞，一般可以采取什么措施？不仅仅是社交网络按钮，它们只是提供了最好的例子。

Answer 1

通过这种方式，您对代码的控制能力非常有限。

您实际上正在调用五个不同的站点来加载和运行它们的代码。如果只有一个网站有点忙，您的网站最终会出现延迟显示。

此问题有解决方法，并且您几乎随处都可以看到示例。

有一些可用的解决方案:

自制社交按钮 - 您创建并绘制自己的图标，并在“幕后”附加外部站点代码。这似乎是一个简单的解决方案，但我上次检查时，它涉及编辑不那么小的代码行。就我个人而言，我建议将此作为最后的手段。

一个按钮即可统治所有内容 - 您可能在其他页面上看到过它，这是一个小共享按钮，可展开为一个包含所有您喜爱的社交网站的框。这些都是预先制作好的，是一个简单的解决方案。

耐心是美德 - 您将所有链接扭曲在隐藏容器中，并在所有渲染完成后显示它。用户将在网站加载后几秒钟看到按钮一起出现。

请记住，JavaScript 的思维方式几乎是单一的。即使所有代码都存储在本地，它仍然会轮流渲染所有代码。