JavaScript 执行的时候可能会修改 DOM，影响页面的展现，默认情况下，先加载执行 JavaScript，再加载执行后面的代码才是安全的，加载执行 JavaScript 代码的时候，会停止后面代码的加载执行，这个行为叫做阻塞，这个模式就是同步加载。如果我们可以让这些 JavaScript 下载执行的同时，不影响后续页面代码的执行，页面载入速度就会有一定的提升。下面我们以社交网络代码为例，演示一下如何在 WordPress 主题中异步加载社交媒体共享按钮，提高页面载入速度。
什么是 JavaScript 异步加载？
异步加载就是浏览器下载执行 JavaScript 的时候，不会影响后面代码的加载和执行。实现异步加载有很多方法，本文中介绍的方法是最常用的，这种方法是在页面中<script>标签内，用JS 创建一个 Script 元素并插入到 Document 中。这样就做到了非阻塞的下载 JavaScript 代码。
异步加载的好处:
将提高页面速度（减少加载时间）。加载执行下面页面的同事不需要等待来自其他（社交网络）服务器的响应。
网站内容是相对独立的，如果社交网络的服务器加载超市，网站的内容不会受影响。
有助于减少用户等待时间，降低跳出率，对 SEO 有一定的帮助。
如果用户在我们的网站上停留了比较长的时间，他们将更有可能分享我们的文章。
下面是在 WordPress 实现异步加载社交网络代码的方法，三步即可实现，我们可以根据需要修改下面的代码，来加载自己需要的文件。
第一步: 创建 JavaScript 文件
例如，我们将下面代码加入一个名为 share.js 的文件中，并将其放在主题根文件夹中的 js 文件夹中。
/* 异步加载分享按钮的 JavaScript */
(function(w, d, s) {
// 插入加载后的代码
function go(){
var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
if (d.getElementById(id)) { return; }
js = d.createElement(s); js.src = url; js.id = id;
fjs.parentNode.insertBefore(js, fjs);
};
// 加载社交网络分享代码
load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk'); //Facebook
load('https://apis.google.com/js/plusone.js', 'gplus1js'); //Google+
load('//platform.twitter.com/widgets.js', 'tweetjs'); //Twitter
load('//platform.linkedin.com/in.js', 'lnkdjs'); // LinedIN
load('//assets.pinterest.com/js/pinit.js', 'pinitjs'); //Pinterest
}
if (w.addEventListener) {
w.addEventListener("load", go, false);
}
else if (w.attachEvent) {
w.attachEvent("onload",go);
}
}(window, document, 'script'));
如果有朋友关注过百度统计或谷歌 Analytics 的异步加载统计代码，会发现他们的代码个上面的代码有类似的地方，
第二步: 加载 share.js文件到主题中
添加下面的代码到主题的 functions.php 文件中：
/* 插入代码到主题的 functions.php */
function meks_load_scripts(){
//只在文章页面加载，如果需要在页面中加载，使用 "is_singular()"，如果还需要在存档页面加载，直接去掉下面的判断语句即可。
if(is_single()){
wp_enqueue_script( 'meks_async_share', trAIlingslashit(get_template_directory_uri()).'/js/share.js', array( 'jquery' ));
}
}
add_action('wp_enqueue_scripts', 'meks_load_scripts');
第三步: 放置 HTML 代码到主题的模板中
最后一步，在主题的模板中插入“占位符”，脚本执行后将在插入“占位符” 的地方填充共享按钮，最好在循环中使用。代码示例如下：
<?php if( have_posts() ) : while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php the_content(); ?> <ul class="meks_share"> <!-- twitter --> <li><a class="twitter-share-button" data-count="vertical" data-via="mekshq" data-url="<?php the_permalink() ?>"></a></li> <!-- LinkedIN --> <li><script type="IN/Share" data-counter="top" data-url="<?php the_permalink() ?>"></script></li> <!-- facebook like --> <li><div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-href="<?php the_permalink() ?>"></div></li> <!-- g+ --> <li><g:plusone size="tall" data-href="<?php the_permalink() ?>"></g:plusone></li> <!-- pinterest --> <li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li> </ul> <?php endwhile; ?> <?php endif; ?>
此外，还有两个专门的 JavaScript 库来帮助我们实现异步加载，一个是 ControlJS，一个叫 HeadJS，有兴趣的朋友可以关注一下。
