Question

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

例如，如果我想加载＆＃34;即时＆＃34;按照许多社交网络中的按钮，他们似乎互相阻止渲染，你会得到令人不快的弹出窗口。

<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

你很少以这种方式控制你的代码。

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

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

有一些解决方案可用：

自制社交按钮 - 您可以创建并绘制自己的图标，并附加外部网站代码＆＃39;它似乎是一个简单的解决方案，但最后一次检查时，它涉及编辑不那么小的代码行。我个人认为这是最后的手段。

一键统治他们 - 你可能在其他页面上看到了它，一个小的分享按钮，扩展到一个包含所有你喜欢的社交网站的盒子。这些是预制的，是一个简单的解决方案。

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

请记住，javascript几乎只有一个轨道。即使你的所有代码都存储在本地，它仍然会轮流渲染所有代码。

JavaScript渲染块

1 个答案: