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

发布于 2013年12月10日
by
归档于 收藏分享

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. 馒头饭madfan 2014/1/7 #6 回复TA

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

  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之后才开始加载图像

发表评论

(`・ω・´)

CAPTCHA

*

List
Love
00:00