JavaScript 执行的时候可能会修改 DOM,影响页面的展现,默认情况下,先加载执行 JavaScript,再加载执行后面的代码才是安全的,加载执行 JavaScript 代码的时候,会停止后面代码的加载执行,这个行为叫做阻塞,这个模式就是同步加载。如果我们可以让这些 JavaScript 下载执行的同时,不影响后续页面代码的执行,页面载入速度就会有一定的提升。下面我们以社交网络代码为例,演示一下如何在 WordPress Theme中异步加载社交媒体共享按钮,提高页面载入速度。
什么是 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,有兴趣的朋友可以关注一下。
1 thoughts on “通过异步加载 JavaScript 代码提高页面的载入速度”
不错,有点用处,以前不知道百度统计的代码是啥原理,看完这个,一下子就明白了。