老文新谈——利用HTML5预加载实现加速

HTML5是个好东西,功能增加了很多,其中一个好用的就是可以实现网页预加载,提高访问速度,当浏览者看你的文章的时候,后台其实已经在加载下一篇文章(好羞耻的赶脚)。它可以通过link标签加载你想要预加载的网页:

<link rel="prefetch prerender"" href="http://www.example.com/">

当然不止可以预加载某个网页,你也可以设置加载某个静态资源。不过只有Chrome和Firefox可以支持,当然你用国产的”双核”浏览器应该也是可以的,IE就不用说了,必须坚定不移地不支持。

于是我们可以用在wordpress上,在游客浏览你的文章的时候预先加载下一篇,让人有”这主机牛”的感觉

zhegediao

<?php if (is_archive() && (paged>1) && (paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } ?>

上面那个是用在首页的,你可以在hearder.php中添加,然后我们可以举一反三,在single.php添加如下代码:

<?php if (is_archive() && (paged>1) && (paged < $wp_query->max_num_pages)) { ?>
<link rel="prefetch prerender" href="<?php echo get_next_posts_page_link(); ?>">
<?php } elseif (is_singular()) { ?>
<link rel="prefetch prerender" href="<?php bloginfo('home'); ?>">
<?php } ?>

用jQuery也可以实现这个功能,在js文件中添加如下代码:

var app = {
    prefetchLinks: function(){
        var hrefs = ("a.prefetch").map(function(index, domElement){
            return(this).attr("href");
        });
        return .unique(hrefs);
    },
    addPrefetchTags: function(){
        this.prefetchLinks().each(function(index,Element){("<link />", {
                rel: "prefetch", href: Element
            }).appendTo("head");            
        });
    },
}
jQuery(function(){
    app.addPrefetchTags();
}

然后在你需要加载的链接上加上

class="prefetch"

原文在这((*・∀・)ゞ→→https://sell.moe/tg5e

下面有评论说用jQuery的方法会污染命名空间,作者说了应该不会的,如果担心的话大不了就不用嘛╮(╯▽╰)╭  对于这个预加载技术,虽然很简单,但上面步骤仅仅是加载了下一页,你不可能像google、baidu一样保证用户一定会点”下一页”,所以最好还是通过 统计程序(比如51la)分析一下用户来源和跳出率等等来决定到底要不要用这项技术。个人建议最好是只加载必须要用到的静态文件,不过这也带来一个矛盾: 用了WP Super Cache这种缓存插件,这个技术貌似就没用了,反而显得多余。

这篇文章有21条评论

  1. kn007 2013/12/10 #1 回复TA

    没想到有沙发,感觉用处暂且很小。。。囧

    • Kagami po主 回复 kn007 2013/12/10 回复TA

      还是要取决于网速吧,不过据说DNS预加载有效果

  2. 小蜜蜂 2013/12/10 #2 回复TA

    网页的字体不错哦,文章标题是什么字体呢

  3. Kacter 2013/12/11 #3 回复TA

    感觉好像挺老的东西了

  4. 千寻 2013/12/11 #4 回复TA

    不明觉厉=-=

  5. Seri 2013/12/12 #5 回复TA

    原来是这样用的。。。。orz 技能get啊!

  6. 这个功能真心不错~~~嘎嘎~~~

  7. 1 2014/1/13 #7 回复TA

    (゚Д゚≡゚Д゚)

    • Kagami po主 回复 1 2014/1/13 回复TA

      (゚Д゚≡゚Д゚) 不说点什么嘛

  8. Ggicci 2014/1/23 #8 回复TA

    哎呀,不错,盗了个图 zhegediao.png ________________________

  9. inlaid harp 2014/4/26 #9 回复TA

    。。。。。。dz肿么用上去QAQ

  10. saber酱 2015/3/30 #10 回复TA

    原来如此,想到了一个应用的场景
    就像是网页上常见的hover效果,有的时候hover之后变换的背景图片是之前未加载的(即没有和变换前的图像放在同一张图上),这时候新的背景图才开始加载,中间加载时往往会有一会儿,背景图片看起来像是没了。貌似这个方法可以改变啊

    • saber酱 回复 saber酱 2015/3/30 回复TA

      额 试了下 用这个标签预加载切换后的图片。特意等了一会儿再去hover,没发现效果,还是hover之后才开始加载图像

发表评论

*

List
Love
00:00