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

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

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

JavaScript 执行的时候可能会修改 DOM,影响页面的展现,默认情况下,先加载执行 JavaScript,再加载执行后面的代码才是安全的,加载执行 JavaScript 代码的时候,会停止后面代码的加载执行,这个行为叫做阻塞,这个模式就是同步加载。如果我们可以让这些 JavaScript 下载执行的同时,不影响后续页面代码的执行,页面载入速度就会有一定的提升。下面我们以社交网络代码为例,演示一下如何在 WordPress 主题中异步加载社交媒体共享按钮,提高页面载入速度。

什么是 JavaScript 异步加载?

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

异步加载的好处:

  • 将提高页面速度(减少加载时间)。加载执行下面页面的同事不需要等待来自其他(社交网络)服务器的响应。
  • 网站内容是相对独立的,如果社交网络的服务器加载超市,网站的内容不会受影响。
  • 有助于减少用户等待时间,降低跳出率,对 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,有兴趣的朋友可以关注一下。

本站提供 WordPress 主题定制开发服务

本站长期承接WordPress主题、插件、基于 WooCommerce 的商店商城开发业务。 我们有7年 WordPress 开发经验, 如果你想用 WordPress 开发网站, 请联系 QQ: 470266798 或邮箱: 4626395@gmail.com 咨询。

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

  1. 不错,有点用处,以前不知道百度统计的代码是啥原理,看完这个,一下子就明白了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*