通过异步加载 JavaScript 代码提高页面的载入速度

JavaScript异步加载和同步加载的区别

在执行JavaScript代码时，可能会修改DOM，从而影响页面的展现。默认情况下，先加载执行JavaScript，再加载执行后面的代码才是安全的。但是加载执行JavaScript代码的时候会阻塞后面代码的加载与执行，这个模式就是同步加载。

如果我们可以让这些JavaScript代码在下载执行的同时，不影响后续页面代码的执行。页面载入速度就会有一定的提升。下面我们以社交网络代码为例，演示一下如何在WordPress主题中异步加载社交媒体共享按钮，提高页面载入速度。

什么是JavaScript异步加载？

异步加载就是浏览器下载执行JavaScript的时候，不会影响后面代码的加载和执行。实现异步加载有很多方法，本文中介绍的方法是最常用的，这种方法是在页面中通过<script>标签内，用JS创建一个Script元素并插入到Document中。这样就做到了非阻塞的下载JavaScript代码。

异步加载的好处

• 将提高页面速度（减少加载时间）。加载执行下面页面的同事不需要等待来自其他（社交网络）服务器的响应。
• 网站内容是相对独立的，如果社交网络的服务器加载超时，网站的内容不会受到影响。

以上就是JavaScript异步加载的基本介绍和好处。希望对大家有所帮助。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。