使用php輸出頁面,如果頁面的內容很多,使用者需要等待頁面所有內容載入後才可以看到頁面內容,使用者體驗不好。
我們可以把頁面內容分成幾塊,非同步並發請求加載,當任何一塊內容加載成功後即時顯示,而不需要等待其他分塊的內容載入。
這樣只要有任何一塊內容載入成功,使用者就可以馬上看到,提升使用者體驗。
因此頁面中只需要保留js內容,使用ajax請求api載入內容顯示。
<!-- 分块1 --><p id="result1"></p><script type="text/javascript">$(function() { $.get("api.php?id=1", {}, function(ret) { $("#result1").html(ret["html"]); },"json"); });</script><!-- 分块2 --><p id="result2"></p><script type="text/javascript">$(function() { $.get("api.php?id=2", {}, function(ret) { $("#result2").html(ret["html"]); },"json"); });</script><!-- 分块3 --><p id="result3"></p><script type="text/javascript">$(function() { $.get("api.php?id=3", {}, function(ret) { $("#result3").html(ret["html"]); },"json"); });</script>...
非同步並發載入內容,可以大幅加快頁面輸出速度。
如果使用非同步並發載入方式輸出頁面,對於搜尋引擎不友好,搜尋引擎會採集不到內容,因為內容都是使用ajax來載入。
因此我們需要判斷如果是搜尋引擎機器人存取時,則直接輸出頁面內容,而不使用非同步並發輸出頁面。
判斷是否搜尋引擎機器人存取方法
<?php// 判断是否搜索引擎机器人访问function isRobot() { $agent= strtolower(isset($_SERVER['HTTP_USER_AGENT'])? $_SERVER['HTTP_USER_AGENT'] : ''); if(!empty($agent)){ $spiderSite= array( "TencentTraveler", "Baiduspider+", "BaiduGame", "Googlebot", "msnbot", "Sosospider+", "Sogou web spider", "ia_archiver", "Yahoo! Slurp", "YoudaoBot", "Yahoo Slurp", "MSNBot", "Java (Often spam bot)", "BaiDuSpider", "Voila", "Yandex bot", "BSpider", "twiceler", "Sogou Spider", "Speedy Spider", "Google AdSense", "Heritrix", "Python-urllib", "Alexa (IA Archiver)", "Ask", "Exabot", "Custo", "OutfoxBot/YodaoBot", "yacy", "SurveyBot", "legs", "lwp-trivial", "Nutch", "StackRambler", "The web archive (IA Archiver)", "Perl tool", "MJ12bot", "Netcraft", "MSIECrawler", "WGet tools", "larbin", "Fish search", ); foreach($spiderSite as $val){ $str = strtolower($val); if(strpos($agent, $str) !== false){ return true; } } } return false; } ?>
index.php 用來被存取
<?phprequire 'server.php';// 获取内容$data1 = getData(1);$data2 = getData(2);$data3 = getData(3);// 调用模版include dirname(__FILE__).'/template.php';?>
#template.php 頁面模版內容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="jquery-1.11.0.min.js"></script> <title>内容模版</title> </head> <body> <?php echo $data1; ?> <?php echo $data2; ?> <?php echo $data3; ?> </body></html>
server.php 取得內容主要方法
<?php//获取数据,正常情况应该读取db,演示只用数组代替function getData($id){ // 数据 $data = array( 1 => '很久很久以前,在某个地方,有个很可爱的女孩。不幸的是,她父母双亡,而且家徒四壁,屋里除了一张可供歇息的床以外,就别无长物了。除此之外,她全身上下只剩下身上所穿的衣裳,还有一片好心人施舍给她有面包而已。这个小姑娘,是个心地善良、信心坚定的好女孩。不论境遇有多么凄惨不幸,她仍然深信,慈爱的上帝会默默地庇护着她。', 2 => '有一天,她只身上原野上去玩。她走着走着,忽然遇到一个衣衫褴褛的男子。他向女孩哀求道:“求求你!施舍一点东西给我这个可伶人吧!我实在是饿得快要受不了了啊!”听到这话,女孩便把自己仅有的那片面包拿出来,说道:“这是上帝的恩 典喔!”说完后, 女孩就继续上路了。走了一会儿,路旁突然出现了一个啼泣不已的男孩。“鸣——我的头好冷呀!就快冻僵了……你能不能施舍一点可以让我挡风的东西啊!”女孩便把自己头上那顶帽子脱了下来, 为男孩戴上。走了不久,她又碰到一个小孩。那孩子没有穿棉背心,冷得直打哆嗦。于是,好心的女孩便把自己的背心送给那个小孩。她继续往前走,突然又遇见另一个小孩。她再次答应对方的乞求,把上衣施舍给他。女孩再往前走,走进森林里。林深日尽,四周一下子变暗了起来。这时,又出现一个可怜的小男孩, 央求女孩把内衣脱给她。这个时候,虔诚又善良的女孩想:“现在天色已经暗下来了,任谁也看不清楚我的模样,就算脱掉内衣,应该无所谓吧!”因此,女孩脱下了内衣,送给乞讨的女孩。', 3 => '这个时候的女孩,真的是浑身赤裸、再无他物了。忽然间,天上闪烁的星星纷纷坠落,落在女孩的面前。天啊!它们都化成了闪亮耀眼的金币——货真价实的金币!而原先一丝不挂的孩,不知什么时候,竟裹上了一套细致、上等的亚麻衫!于是,这个好心的女孩,把金币捡回家,从此过着富足、快乐的生活。' ); $ret = ''; // 判断是否搜索引擎机器人 $is_robot = isRobot(); // 搜索引擎机器人访问 if($is_robot || defined('FORCE_SYNC_RESPONSE') && FORCE_SYNC_RESPONSE==true){ $ret .= '<p>'.$data[$id].'</p>'.PHP_EOL; // 普通用户访问,异步请求 }else{ $ret = '<p id="result'.$id.'"></p> <script type="text/javascript"> $(function() { $.get("api.php?id='.$id.'", {}, function(ret) { $("#result'.$id.'").html(ret["html"]); },"json"); }); </script>'.PHP_EOL.PHP_EOL; } return $ret; }// 判断是否搜索引擎机器人访问function isRobot() { $agent= strtolower(isset($_SERVER['HTTP_USER_AGENT'])? $_SERVER['HTTP_USER_AGENT'] : ''); if(!empty($agent)){ $spiderSite= array( "TencentTraveler", "Baiduspider+", "BaiduGame", "Googlebot", "msnbot", "Sosospider+", "Sogou web spider", "ia_archiver", "Yahoo! Slurp", "YoudaoBot", "Yahoo Slurp", "MSNBot", "Java (Often spam bot)", "BaiDuSpider", "Voila", "Yandex bot", "BSpider", "twiceler", "Sogou Spider", "Speedy Spider", "Google AdSense", "Heritrix", "Python-urllib", "Alexa (IA Archiver)", "Ask", "Exabot", "Custo", "OutfoxBot/YodaoBot", "yacy", "SurveyBot", "legs", "lwp-trivial", "Nutch", "StackRambler", "The web archive (IA Archiver)", "Perl tool", "MJ12bot", "Netcraft", "MSIECrawler", "WGet tools", "larbin", "Fish search", ); foreach($spiderSite as $val){ $str = strtolower($val); if(strpos($agent, $str) !== false){ return true; } } } return false; } ?>
api.php 非同步請求使用的api介面
<?phpdefine('FORCE_SYNC_RESPONSE', true); // 强制同步输出require 'server.php';// 获取分块内容$id = isset($_GET['id'])? $_GET['id'] : 1;$data = getData($id);// 输出header('content-type:application/json;charset=utf8');$ret = json_encode( array( 'html' => $data ) );echo $ret;?>
<?php$url = 'http://localhost/index.php'; // 访问index.php$header = array();$data = doCurl($url, array(), $header);echo '<meta http-equiv="content-type" content="text/html;charset=utf-8">';echo '<xmp>';echo $data;echo '</xmp>';/** * curl请求 * @param String $url 请求地址 * @param Array $data 请求参数 * @param Array $header 请求header * @param Int $timeout 超时时间 * @return String */function doCurl($url, $data=array(), $header=array(), $timeout=30){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_TIMEOUT, $timeout); $response = curl_exec($ch); if($error=curl_error($ch)){ die($error); } curl_close($ch); return $response; } ?>
輸出頁面內容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="jquery-1.11.0.min.js"></script> <title>内容模版</title> </head> <body> <p id="result1"></p> <script type="text/javascript"> $(function() { $.get("api.php?id=1", {}, function(ret) { $("#result1").html(ret["html"]); },"json"); }); </script> <p id="result2"></p> <script type="text/javascript"> $(function() { $.get("api.php?id=2", {}, function(ret) { $("#result2").html(ret["html"]); },"json"); }); </script> <p id="result3"></p> <script type="text/javascript"> $(function() { $.get("api.php?id=3", {}, function(ret) { $("#result3").html(ret["html"]); },"json"); }); </script> </body></html>
使用了非同步並發加載,提高頁面輸出速度。
<?php$url = 'http://localhost/index.php'; // 访问index.php$header = array( 'user-agent: Googlebot' // 加入搜索引擎关键字);$data = doCurl($url, array(), $header);echo '<meta http-equiv="content-type" content="text/html;charset=utf-8">';echo '<xmp>';echo $data;echo '</xmp>';/** * curl请求 * @param String $url 请求地址 * @param Array $data 请求参数 * @param Array $header 请求header * @param Int $timeout 超时时间 * @return String */function doCurl($url, $data=array(), $header=array(), $timeout=30){ $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HTTPHEADER, $header); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_TIMEOUT, $timeout); $response = curl_exec($ch); if($error=curl_error($ch)){ die($error); } curl_close($ch); return $response; } ?>
#輸出頁面內容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="jquery-1.11.0.min.js"></script> <title>内容模版</title> </head> <body> <p>很久很久以前,在某个地方,有个很可爱的女孩。不幸的是,她父母双亡,而且家徒四壁,屋里除了一张可供歇息的床以外,就别无长物了。除此之外,她全身上下只剩下身上所穿的衣裳,还有一片好心人施舍给她有面包而已。这个小姑娘,是个心地善良、信心坚定的好女孩。不论境遇有多么凄惨不幸,她仍然深信,慈爱的上帝会默默地庇护着她。</p> <p>有一天,她只身上原野上去玩。她走着走着,忽然遇到一个衣衫褴褛的男子。他向女孩哀求道:“求求你!施舍一点东西给我这个可伶人吧!我实在是饿得快要受不了了啊!”听到这话,女孩便把自己仅有的那片面包拿出来,说道:“这是上帝的恩 典喔!”说完后, 女孩就继续上路了。走了一会儿,路旁突然出现了一个啼泣不已的男孩。“鸣——我的头好冷呀!就快冻僵了……你能不能施舍一点可以让我挡风的东西啊!”女孩便把自己头上那顶帽子脱了下来, 为男孩戴上。走了不久,她又碰到一个小孩。那孩子没有穿棉背心,冷得直打哆嗦。于是,好心的女孩便把自己的背心送给那个小孩。她继续往前走,突然又遇见另一个小孩。她再次答应对方的乞求,把上衣施舍给他。女孩再往前走,走进森林里。林深日尽,四周一下子变暗了起来。这时,又出现一个可怜的小男孩, 央求女孩把内衣脱给她。这个时候,虔诚又善良的女孩想:“现在天色已经暗下来了,任谁也看不清楚我的模样,就算脱掉内衣,应该无所谓吧!”因此,女孩脱下了内衣,送给乞讨的女孩。</p> <p>这个时候的女孩,真的是浑身赤裸、再无他物了。忽然间,天上闪烁的星星纷纷坠落,落在女孩的面前。天啊!它们都化成了闪亮耀眼的金币——货真价实的金币!而原先一丝不挂的孩,不知什么时候,竟裹上了一套细致、上等的亚麻衫!于是,这个好心的女孩,把金币捡回家,从此过着富足、快乐的生活。</p> </body></html>
頁面內容直接輸出,對搜尋引擎友善。
本文說明了相容搜尋引擎機器人存取的實例,更多相關內容請關注php中文網。
相關推薦:
##
以上是關於php 最佳化頁面輸出,相容於搜尋引擎機器人存取的實例的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!