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

5 回答 5

5

除了像 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();
于 2013-02-26T09:44:39.837 回答
2

一种解决方案是对 AddThis 库使用延迟的 JavaScript 加载模式。

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

您可以在使用延迟加载文章提高页面性能中阅读有关该问题和改进的更多信息。

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

于 2013-02-26T11:36:46.170 回答
1

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

于 2013-02-26T09:41:48.297 回答
0

有几点需要注意：

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

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

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

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

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

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

于 2016-11-22T11:23:43.563 回答
0

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

<script type="text/javascript" 
    src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4dfeea6f5bf22ac6" async="async">
</script>
于 2016-01-05T11:48:01.457 回答