JavaScript 執(zhí)行的時候可能會修改 DOM，影響頁面的展現(xiàn)，默認情況下，先加載執(zhí)行 JavaScript，再加載執(zhí)行后面的代碼才是安全的，加載執(zhí)行 JavaScript 代碼的時候，會停止后面代碼的加載執(zhí)行，這個行為叫做阻塞，這個模式就是同步加載。如果我們可以讓這些 JavaScript 下載執(zhí)行的同時，不影響后續(xù)頁面代碼的執(zhí)行，頁面載入速度就會有一定的提升。下面我們以社交網(wǎng)絡代碼為例，演示一下如何在 WordPress主題中異步加載社交媒體共享按鈕，提高頁面載入速度。

什么是 JavaScript 異步加載？

異步加載就是瀏覽器下載執(zhí)行 JavaScript 的時候，不會影響后面代碼的加載和執(zhí)行。實現(xiàn)異步加載有很多方法，本文中介紹的方法是最常用的，這種方法是在頁面中<script>標簽內，用JS 創(chuàng)建一個 Script 元素并插入到 Document 中。這樣就做到了非阻塞的下載 JavaScript 代碼。

異步加載的好處:

• 將提高頁面速度（減少加載時間）。加載執(zhí)行下面頁面的同事不需要等待來自其他（社交網(wǎng)絡）服務器的響應。
• 網(wǎng)站內容是相對獨立的，如果社交網(wǎng)絡的服務器加載超市，網(wǎng)站的內容不會受影響。
• 有助于減少用戶等待時間，降低跳出率，對 SEO 有一定的幫助。
• 如果用戶在我們的網(wǎng)站上停留了比較長的時間，他們將更有可能分享我們的文章。

下面是在 WordPress 實現(xiàn)異步加載社交網(wǎng)絡代碼的方法，三步即可實現(xiàn)，我們可以根據(jù)需要修改下面的代碼，來加載自己需要的文件。

第一步: 創(chuàng)建 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);
  	   };
   
       // 加載社交網(wǎng)絡分享代碼
  	   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'));

如果有朋友關注過百度統(tǒng)計或谷歌 Analytics 的異步加載統(tǒng)計代碼，會發(fā)現(xiàn)他們的代碼個上面的代碼有類似的地方，

第二步: 加載 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 代碼到主題的模板中

最后一步，在主題的模板中插入“占位符”，腳本執(zhí)行后將在插入“占位符” 的地方填充共享按鈕，最好在循環(huán)中使用。代碼示例如下：

<?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="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>
</ul>

<?php endwhile; ?>
<?php endif; ?>

此外，還有兩個專門的 JavaScript 庫來幫助我們實現(xiàn)異步加載，一個是 ControlJS，一個叫 HeadJS，有興趣的朋友可以關注一下。