Question

<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 -->

Answer 1

除了像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();

Answer 2

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

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

您可以在Improve Your Page Performance With Lazy Loading文章中详细了解该问题和改进。

作为旁注，通过使用延迟JavaScript加载模式，我能够在过去的项目中将页面加载平均提高约35％。我希望这会有所帮助。

Answer 3

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

Answer 4

将async="async"属性添加到您的script代码

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

Answer 5

有几点需要注意：

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

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

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

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

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

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

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

5 个答案: