• Typecho HTML5预加载


    天下文章一大抄,你通过搜索引擎搜索 HTML5预加载,估计只能找到诸如“ WP实现HTML5预加载”的方法。
    不知道的还以为只有WP可以实现HTML5预加载呢~
    火狐下引入的预加载使用方法
    <link rel="prefetch" href="http://www.example.com/">

    文档 http://en.wikipedia.org/wiki/Link_prefetching
    谷歌下预加载使用方法
    <link rel="prerender" href="http://example.org/index.html">

    文档https://developers.google.com/chrome/whitepapers/prerender

    代码如下:

    <!–[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]–> <?php if ($this->is('index')): ?><!-- 页面为首页时 --> <link rel="prefetch" href="<?php $this->options->siteUrl(); ?>"> <!-- firefox --> <link rel="prerender" href="<?php $this->options->siteUrl(); ?>"> <!-- chrome --> 	<?php elseif ($this->is('post')): ?><!-- 页面为文章单页时 --> <link rel="prefetch" href="<?php $this->permalink() ?>"> <!-- firefox --> <link rel="prerender" href="<?php $this->permalink() ?>"> <!-- chrome --> 	<?php else: ?><!-- 页面为其他页时 --> 	<!-- 啥都木有 --> 	<?php endif; ?>

    上面的代码有错误。

    我仔细查找了国外的一些文档。

    例如 客户正在阅读 http://henmang.net/DNSprefetching.cgi ,我们这里认为这是第一篇文章
    那么 客户很可能会去阅读 http://henmang.net/html5prefetch.cgi 我们认为这是第二篇文章。

    也就是我们post中的上一页下一页。

    因此,我们假设当前页面为B,上一页为A,下一页为C

    我们需要插入代码
    <link rel="prefetch" href="A"> <!-- firefox -->
    <link rel="prerender" href="A"> <!-- chrome -->
    <link rel="prefetch" href="C"> <!-- firefox -->
    <link rel="prerender" href="C"> <!-- chrome -->

    那么,在客户访问B页面的时候,浏览器会偷偷的加载 A和C的页面,如果索性客户点击了A和B页面,就是秒开了。。。

    但是我并不知道这个功能会不会降低 B页面的速度,如果会降低,显然是没有任何意义的,反而起了反作用。

    如果一定要做

    首页,预加载 最新一片日志

    文章页 ,预加载 上一页和下一页。

    因为考虑到效率等问题,做了下舍取,我只在post做预加载。

    代码如下,分为2部分

    第一部分,将以下代码加入functions.php ,代码来自 http://jakc.net/post/444 有修改

    <?php function xmPrevNext($method,$t,$isLink)          {          $xdb = Typecho_Db::get();                switch($method){              case "pre":                  $xrs = $xdb->fetchRow($xdb->select()->from('table.contents')                         ->where('table.contents.created < ?', $t->created)                      ->where('table.contents.status = ?', 'publish')                      ->where('table.contents.type = ?', $t->type)                      ->where('table.contents.password IS NULL')                      ->order('table.contents.created', Typecho_Db::SORT_DESC)                      ->limit(1));                   if(sizeof($xrs)==0){                      switch($isLink){                          case 0:                              echo "这已经是第一篇了亲~";                              break;                          case 1:                              echo "http://henmang.net";  //注意把这里修改为你本人的网址                             break;                      }                   }                  break;              case 'next':                  $xrs = $xdb->fetchRow($xdb->select()->from('table.contents')                         ->where('table.contents.created > ?',$t->created)                      ->where('table.contents.status = ?', 'publish')                      ->where('table.contents.type = ?', $t->type)                      ->where('table.contents.password IS NULL')                      ->order('table.contents.created', Typecho_Db::SORT_ASC)                      ->limit(1));                      if(sizeof($xrs)==0){                      switch($isLink){                          case 0:                              echo "木有下一篇了~";                              break;                          case 1:                              echo "http://henmang.net";  //注意把这里修改为你本人的网址                             break;                      }                   }                  break;          }              if($xrs){              $xrs = $t->filter($xrs);              if($isLink==0){                  echo $xrs['title'];              }else{                  echo $xrs['permalink'];                  }              }          } 

    然后在header.php加入

    <?php if ($this->is('post')): ?> <!–-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]–> <link rel="prefetch" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- firefox --> <link rel="prefetch" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- firefox --> <link rel="prerender" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- chrome --> <link rel="prerender" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- chrome --> <?php endif; ?>

    如果你一定要在首页预加载第一篇日志,可以试试下面的代码,很蛋疼

    <!–-[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> <![endif]–> <?php if ($this->is('index')): ?><!-- 页面为首页时 --> <link rel="prefetch" href="<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=1')->parse('{permalink}'); ?>"> <!-- firefox --> <link rel="prerender" href="<?php $this->widget('Widget_Contents_Post_Recent', 'pageSize=1')->parse('{permalink}'); ?>"> <!-- chrome --> 	<?php elseif ($this->is('post')): ?><!-- 页面为文章单页时 --> <link rel="prefetch" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- firefox --> <link rel="prefetch" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- firefox --> <link rel="prerender" href="<?php xmPrevNext("pre",$this,1); ?>"> <!-- chrome --> <link rel="prerender" href="<?php xmPrevNext("next",$this,1); ?>"> <!-- chrome --> 	<?php else: ?><!-- 页面为其他页时 --> 	<!-- 啥都木有 --> 	<?php endif; ?>
  • 相关阅读:
    让sublime text3支持Vue语法高亮显示
    让sublime text3支持Vue语法高亮显示
    flutter中使用redux之多界面互动
    flutter中使用redux之多界面互动
    flutter中使用redux之多界面互动
    flutter中使用redux之多界面互动
    普通视频转高清:10个基于深度学习的超分辨率神经网络
    javaweb学习总结(二十七)——jsp简单标签开发案例和打包
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
  • 原文地址:https://www.cnblogs.com/shihao/p/2524957.html
Copyright © 2020-2023  润新知