javascript - JavaScript渲染块

试图了解如何消除或最小化站点上不同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可以进行这种类型的渲染阻止吗？不只是社交网络按钮，它们还提供了最好的例子。

最佳答案

这样，您对代码的控制就很少。

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

有解决此问题的方法，您几乎可以在任何地方看到示例。

有一些可用的解决方案：

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

一个按钮将它们全部统治-您可能在其他页面上看到了它，一个小的共享按钮扩展为一个包含所有您喜欢的社交网站的框。这些都是预制的，是一个简单的解决方案。

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

请记住，JavaScript具有相当多的优势。即使您的所有代码都存储在本地，也仍然需要轮流渲染所有代码。

关于javascript - JavaScript渲染块，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23396672/