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>

（功能（d、s）{
var j，h=d.getElementsByTagName[0]，
f=d.createDocumentFragment（），
加法=函数（u，i）{
if（d.getElementById（i））{
返回；
}
j=d.createElement（s）；
j、 src=u；
i&（j.id=i）；
f、 儿童（j）；
};
加（'http://apis.google.com/js/plusone.js');
加（'http://connect.facebook.net/en_US/all.js#xfbml=1","facebook jssdk",；
加（'http://platform.twitter.com/widgets.js","twitter wjs",；
加（'http://platform.linkedin.com/in.js');
加（'http://assets.pinterest.com/js/pinit.js');
h、 parentNode.insertBefore（f，h）；
}（文件“脚本”）；

---

对于这种类型的JS渲染块，通常可以做些什么？不仅仅是社交网络按钮，它们只是提供了最好的示例。

这样，您对代码几乎没有控制权

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

这个问题有很多解决方法，你几乎可以在任何地方看到例子

有一些可用的解决方案：

自制社交按钮-您可以创建和绘制自己的图标，并附加外部网站代码“在引擎盖下”。这似乎是一个简单的解决方案，但上次我检查时，它涉及编辑不太小的代码行。我个人认为这是最后的办法

只需一个按钮即可控制所有社交网站——您可能会在其他页面上看到它，一个小的共享按钮可以扩展到一个包含所有您喜爱的社交网站的框中。这些都是预先制作的，是一个简单的解决方案

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

---

请记住，javascript的思维方式几乎是单轨的。即使您的所有代码都存储在本地，它仍然会轮流呈现所有代码。

许多HTTP请求都是完全异步的，这一事实又如何呢？基本上：如果没有真正的方法来控制延迟（尽管您的建议是有效的，但从技术上讲，它们并不适用于基本问题），那么如何确定HTTP请求优先于其他请求？例如：我首先列出了谷歌的API，但这些请求以一种看似“随机”的方式在其他请求之间抛出。据我所知，没有办法完全控制它，正如你所看到的，我只列出了一些变通方法，以尽量减少延迟显示。而且它看起来有点随机，因为运行脚本越多，浏览器就越依赖本地存储，而不是再次请求文件，并且这些导入的脚本中的一些调用其他脚本，这些脚本也可能存储在缓存中。。。加上每个服务器的响应时间，每次都会得到不同的结果。谢谢，这基本上回答了我的问题。