如何使用 AddThis 小部件提高页面加载速度？答案

【问题标题】：How to increase page loading speed with AddThis widget?如何使用 AddThis 小部件提高页面加载速度？
【发布时间】：2013-02-11 16:38:58
【问题描述】：

<script type="text/javascript" 
    src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

我将此代码用于 facebook、twitter 等，但其中有一个脚本使页面加载速度非常慢。你能帮忙解决这个问题吗，整个代码在下面

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
    <a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">
    var addthis_config = {
        "data_track_addressbar": true
    };
</script>
<script type="text/javascript" 
    src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dfeea6f5bf22ac6">
</script>
<!-- AddThis Button END -->

【问题讨论】：

你应该要求他们让它更快:) 一个解决方案是异步加载它们
一个显而易见的事情是将javascript移动到页面底部，就在</body>之前。哦，我认为您的意思是增加，而不是减少；-)
正如你所说，我将脚本移到页面底部但没有用
嘿，太好了 - 我刚刚找到他们的 OPT-OUT 页面 :)
尝试安装 Chrome 或使用带有 firebug 的 Firefox。然后查看 hte NET 选项卡，看看花了这么长时间

标签： javascript html optimization addthis

【解决方案1】：

有几点需要注意：

你真的不需要立即加载addthis，你可以在页面渲染过程中相对较晚的加载它，
添加这个 .js 文件很大，目前大约 118kb，已最小化和 gzip 压缩（原文如此！），
由于它的大小，浏览器编译和处理它总是需要相对大量的时间，尤其是在移动设备上。

在script 标签中使用async 属性可能会有所帮助，但是浏览器在看到该属性时主要考虑网络资源。浏览器不会考虑脚本可能对 CPU 使用率、页面渲染树等产生的影响（在浏览器防御中，他们无法确定它）。例如，需要很长时间才能执行的脚本可能会阻止渲染第一帧或其他关键的早期绘制。即使我们忽略获取 addthis .js 文件所需的网络资源（连接槽、带宽等），它仍然可能证明该脚本对页面加载过程有严重影响。

请注意，虽然async 属性提示浏览器可以异步加载资源，但当最终检索到脚本执行时，它并没有说明脚本执行。浏览器中的 JS 大多是单线程的，一旦浏览器开始处理 .js 文件，它就无法退出它，它必须让它完成运行。

在我的计算机上，在 Chrome 中评估脚本大约需要 130-140 毫秒，并且它会长时间阻止 ParseHTML 事件。在功能较弱的移动设备上，它可能很容易跳到 500 毫秒。

因为 addthis 太大了，最好给浏览器一点帮助，并推迟 .js 文件获取，直到显示页面的其他更重要的组件。您应该为此任务使用专用的 .js 延迟库，以确保在 DOMContentLoaded 事件之后以及处理其他重要资源之后对其进行处理。我个人为此使用 Lab.js，因为它很小，而且做得很好。

还要注意存在defer 属性，您可以将其添加到script 标记中，但是规范明确指出存在defer 标记的脚本必须在之前处理 DOMContentLoaded事件 - 所以这里没有胜利。

【讨论】：

【解决方案2】：

将async="async" 属性添加到您的script 标签中

<script type="text/javascript" 
    src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dfeea6f5bf22ac6" async="async">
</script>

【讨论】：

【解决方案3】：

其中一种解决方案是为 AddThis 库使用 延迟 JavaScript 加载模式。

有几个不错的 JavaScript 库可以帮助您解决这个问题。我个人主要使用Modernizr.load（或yepnope.js）

您可以在Improve Your Page Performance With Lazy Loading 文章中阅读有关该问题和改进的更多信息。

附带说明一下，在我过去的项目中，通过使用延迟 JavaScript 加载模式，我能够将页面加载平均提高约 35%。我希望这会有所帮助。

【讨论】：

【解决方案4】：

除了像 Mudshark 所说的将所有内容移到页面底部之外，您还可以使用 async addthis 版本：

http://support.addthis.com/customer/portal/articles/381221-optimizing-addthis-performance#.USyDXiVuPYo

  <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#async=1"></script> 

 function initAddThis(){
      addthis.init()
 }
 // After the DOM has loaded...
 initAddThis();

【讨论】：

【解决方案5】：

要做的一件显而易见的事情是将 javascript 移动到页面底部，就在 </body> 之前，以便在它之前加载其他所有内容。

【讨论】：

好吧，您受第三方脚本的支配 - 它加载的速度有多慢或多快是您无法控制的。除了@WoLph 建议使用异步之外，您无能为力。