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

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

我使用此代码的Facebook，微博等，但有一个脚本在这使得页面加载速度非常缓慢。可以请你为这个解决方案的帮助，整个代码如下如何使用AddThis小部件提高页面加载速度？

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

来源

2013-02-26 Siva Shanker

你应该让他们更快地做出来:)一种解决方案是加载它们异步 – 2013-02-26 09:38:34

一个显而易见的事情就是将javascript移动到页面底部，就在''之前。哦，我认为你的意思是增加，而不是减少;-) – Mudshark 2013-02-26 09:40:01

因为你告诉我把脚本移动到页面的底部，但没有使用 – 2013-02-26 09:42:44

一个明显的事情是将JavaScript的移动到页面的底部，</body>前右，这样一切可以前加载它。

来源

2013-02-26 09:41:48 Mudshark

尝试了你说的，但是没有改变我的o/p – 2013-02-26 09:43:38

那么你受到第三方脚本的支配 - 它加载的速度有多慢，超出了你的控制范围。除了@ WoLph建议使用异步之外，你可以做的不多。 – Mudshark 2013-02-26 09:47:12

除了一切移动为Mudshark已经说了，你也可以使用异步前页版本的页面的底部：

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-26 09:44:39 Wolph

是的，我已经尝试过使用但不能在页面中使用 – 2013-02-26 09:52:04

解决的办法之一是使用推迟的JavaScript加载模式为AddThis库。

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

您可以阅读更多关于该问题和改进Improve Your Page Performance With Lazy Loading文章。

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

来源

2013-02-26 11:36:46 Tom

把async="async"属性您script标签

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

来源

2016-01-05 11:48:01 lgabster

有几点需要注意：

你真的不需要立即加载前页，你可以将网页中相对较晚加载渲染过程中，
addthis .js文件很大，目前118kb左右，最小化和gzipped（原文如此！），
du e到它的大小，浏览器总是需要花费相当多的时间来编译和处理它，尤其是在移动设备上。

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

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

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

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

还要注意的是存在defer的属性，您可以添加到script标签，但是明确规范指出，与defer标签目前剧本已被处理以前DOMContentLoaded事件 - 在这里所以没有胜。

来源

2016-11-22 11:23:43 matt

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

回答

相关问题