为什么要静态化页面?
当面对大流量或者页面执行业务比较多的是时候,可以从动态查询数据库到直接不用查数据,直接访问静态页面,可以数据库和服务器的压力。让用户访问速度更快。
一般生成静态化页面两种方式:1.主动(服务器主动生成)。2.被动(客户端访问生成)。
说到页面静态化,不得不先了解一个东西,叫buffer,那么buffer是啥?英文译过来的意思是缓冲。
buffer其实就是缓冲区,一个内存地址,主要用于储存数据区域
打比方说,我打开个编辑器或者PS也行,让我们运行软件工作的时候,数据没有保存的时候,我们的正在操作的代码和数据在哪里,其实就在buffer里,当我们把buffer空间写满了,或者保存的时候,就会把数据写入磁盘中,当然PHP的这个buffer和这个不完全一样。
先说一下PHP脚本输出流程 echo/print -(数据) -> php buffer -> tcp buffer -> 客户端浏览器
为什么这么说下面看一下示例:
先介绍个函数叫 ob_get_contents() 说明 返回输出缓冲区的内容
<?php
$a= "这是第一次!<br/>";
echo $a;
echo ob_get_contents() ; //获取当前缓冲区内容
//页面结果
这是第一次!
这是第一次!这说明$a经过了缓冲区。打开php.ini查找output_buffering,有的是on有的是4096(缓冲区的大小)等于4k,我的是php7.0.9是4096,5.3版本的是on。我在关掉缓冲区做个示例(如果是低版本的php可以直接把output_buffering = on注释掉)
函数介绍 ob_end_clean() 说明 清空(擦除)缓冲区并关闭输出缓冲
<?php
ob_end_clean();//关闭缓冲区
$a= "这是第一次!<br/>";
echo $a;
echo ob_get_contents() ; //获取当前缓冲区内容
//页面结果
这是第一次!再次证明了数据的输出顺序
为什么说写满buffer才输出呢在看一个例子
<?php
for ($i = 0; $i < 10; $i++) {
echo $i ."-->".date('H:i:s')."<br/>";
sleep(1); //
}
//网页输出结果是等待网页响应了10秒输出的
0-->13:54:26
1-->13:54:27
2-->13:54:28
3-->13:54:29
4-->13:54:30
5-->13:54:31
6-->13:54:32
7-->13:54:33
8-->13:54:34
9-->13:54:35下面是写满了一个buffer就是4K输出的
<?php
for ($i = 0; $i < 10; $i++) {
//随便创建一个文本里面写一下字符串使内容超过4KB
echo file_get_contents('./1.txt') . $i . '<br/>';
sleep($i +1);
}
//页面输出结果
断断续续可以看到间断性输出,浏览器界面不会一直保持空白。
证明每写满一个php buffering,数据就会发送到客户端浏览器。
?>下面在介绍个函数ob_start() 说明 打开输出控制缓冲 (当然还有一个功能官方手册上没有说,我在实际应用中在output_buffering默认开启的情况下使用ob_start()能把缓冲区扩展到无限大)。
同样刚才的示例
<?php
ob_start();
for ($i = 0; $i < 10; $i++) {
//随便创建一个文本里面写一下字符串使内容超过4KB
echo file_get_contents('./1.txt') . $i . '<br/>';
sleep($i +1);
}
//页面输出结果
是等待页面时间,执行页面结束后,一次性显示出全部结果
?>
下面看一下thinkphp5框架中的fetch()方法
public function fetch($template = '', $vars = [], $replace = [], $config = [], $renderContent = false)
{
// 模板变量
$vars = array_merge(self::$var, $this->data, $vars);
// 页面缓存
ob_start();
ob_implicit_flush(0);
// 渲染输出
$method = $renderContent ? 'display' : 'fetch';
$this->engine->$method($template, $vars, $config);
// 获取并清空缓存
$content = ob_get_clean();
// 内容过滤标签
Hook::listen('view_filter', $content);
// 允许用户自定义模板的字符串替换
$replace = array_merge($this->replace, $replace);
if (!empty($replace)) {
$content = strtr($content, $replace);
}
return $content;
}输出模板的方法也用到了ob也就是说,框架中的缓存页面也靠着个东西。当然了页面静态化并非这一种方法(常用的是模板技术,和output_buffering)。
是模板技术,(模板引擎smarty)。
以下观点来自于我本人。
模板技术来源于MVC设计模式的产物,最早的开发模式是html和PHP混编,这样不美观、也不好维护、不利于分工合作。其他的先不提,就是百度百科中smarty中的一点,来源于优点3 .缓存技术:Smarty选用的一种缓存技术,它可以将用户最终看到的HTML文件缓存成一个静态的HTML页,当设定Smarty的cache属性为true时,在Smarty设定的cachetime期内将用户的WEB请求直接转换到这个静态的HTML文件中来,这相当于调用一个静态的HTML文件。
先写一个静态化的页面的小例子,当然模板技术比这个复杂
<?php
$link=mysqli_connect("127.0.0.1","root","123456");
mysqli_select_db($link,'dongli');
$sql="select * from k_article limit 0,10";
$resouce=mysqli_query($link,$sql);
$news=[];
while ($res=mysqli_fetch_assoc($resouce)){
$news[]=$res;
}
ob_start();
require_once("default.html");
$b=file_put_contents("index.html",ob_get_clean());
if($b){
echo "成功";
}else{
echo "失败";
} //以上在补充个文件修改时间就可以了如果拿nginx做实验(nginx属于tcp端)关闭两个选项
gzip off;
proxy_buffering off;
fastcgi_keep_conn on;php配置文件则需要关闭buffering
output_buffering=off;
注意一般先是:ob_flush();然后是flush();
案例页面:
<?php
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>页面</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/css/common.css">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<link rel="icon" href="/static/img/icon.ico">
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.slideshow.js"></script>
<script type="text/javascript" src="/static/js/jquery.smimgslide.js"></script>
<script type="text/javascript" src="/static/js/jquery.countdown.js"></script>
<script type="text/javascript" src="/static/js/main.js"></script>
</head>
<body>
<div class="header">
<div class="header-nav common-container">
<ul class="header-nav-list">
<li><h3><a href="#">秒杀</a></h3></li>
<li><h3><a href="#">优惠券</a></h3></li>
<li><h3><a href="#">闪购</a></h3></li>
<li><h3><a href="#">拍卖</a></h3></li>
<li><h3><a href="#">服装城</a></h3></li>
<li><h3><a href="#">京西超市</a></h3></li>
<li><h3><a href="#">生鲜</a></h3></li>
<li><h3><a href="#">全球购</a></h3></li>
<li><h3><a href="#">京西金融</a></h3></li>
</ul>
</div>
</div>
<div class="lovelife">
<div class="common-container clearfloat lovelife-box">
<div class="common-title">
<i></i>
<h2>爱生活</h2>
<i></i>
</div>
<ul class="lovelife-list clearfloat">
<?php
sleep(1);
ob_flush();
flush();
echo <<<EOF
<li class="lovelife-list-item1 lovelife-list-col2 sidebarpointer" >
<div class="lovelife-list-title">
<h3>爱逛 </h3>
<ul>
<li><a href="#aiguang">奢侈品</a></li><li><a href="#aiguang">保暖羽绒服</a></li><li><a href="#aiguang">功能箱包</a></li><li><a href="#aiguang">时尚手表</a></li><li><a href="#aiguang">珠宝首饰</a></li>
</ul>
</div>
<div class="lovelife-list-content">
<div class="lovelife-list-content-box">
<div class="lovelife-list-content-leimg">
<a href="#"><img src="/static/img/lovelife/lovelife-list-content-leimg-img1.jpg"></a>
</div>
<ul class="lovelife-list-content-riimg">
<li><a href="#"><p>型男衣橱</p><p>抢大额神券</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img1.jpg"></a></li><li><a href="#"><p>摩登女装</p><p>满299减100券</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img2.jpg"></a></li><li><a href="#"><p>内衣精选</p><p>每满50减12</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img3.jpg"></a></li><li><a href="#"><p>时尚女鞋</p><p>跨店199减100</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img4.jpg"></a></li>
</ul>
<ul class="lovelife-list-content-mdimg">
<li><a href="#"><p>珠宝大卖场</p><p>单品低至99元</p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img1.jpg"></a></li><li><a href="#"><p>设计师推荐</p><p>给你喜欢的</p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img2.jpg"></a></li><li><a href="#"><p>打牌好货</p><p>限时特惠</p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img3.jpg"></a></li>
</ul>
</div>
</div>
<div class="lovelife-list-smimg">
<span class="lovelife-list-smimg-leftarrow"><</span>
<span class="lovelife-list-smimg-rightarrow">></span>
<div class="lovelife-list-smimg-box">
<ul>
<li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img1.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img2.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img3.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img4.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img5.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/loveshopping/img6.jpg"></a></li>
</ul>
</div>
</div>
</li>
EOF;
sleep(2);
ob_flush();
flush();
?>
<?php
echo <<<EOF
<li class="lovelife-list-item2 lovelife-list-col2 sidebarpointer" >
<div class="lovelife-list-title">
<h3>爱美丽 </h3>
<ul>
<li><a href="#aimeili">套装</a></li><li><a href="#aimeili">乳液面霜</a></li><li><a href="#aimeili">面膜</a></li><li><a href="#aimeili">洁面</a></li><li><a href="#aimeili">宝洁洗护</a></li><li><a href="#aimeili">身体护理</a></li>
</ul>
</div>
<div class="lovelife-list-content">
<div class="lovelife-list-content-box">
<div class="lovelife-list-content-leimg">
<a href="#"><img src="/static/img/lovelife/lovelife-list-content-leimg-img2.jpg"></a>
</div>
<ul class="lovelife-list-content-riimg">
<li><a href="#"><p>美妆馆</p><p>满199-100</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img5.jpg"></a></li><li><a href="#"><p>面部护肤</p><p>低至199-100</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img6.jpg"></a></li><li><a href="#"><p>香水彩妆</p><p>满199-100</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img7.jpg"></a></li><li><a href="#"><p>洗发护发</p><p>满199-100</p><img src="/static/img/lovelife/lovelife-list-content-riimg-img8.jpg"></a></li>
</ul>
<ul class="lovelife-list-content-mdimg">
<li><a href="#"><p>个护大牌</p><p></p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img4.jpg"></a></li><li><a href="#"><p>纸品清洁</p><p></p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img5.jpg"></a></li><li><a href="#"><p>丝倍绮</p><p></p><img src="/static/img/lovelife/lovelife-list-content-mdimg-img6.jpg"></a></li>
</ul>
</div>
</div>
<div class="lovelife-list-smimg">
<span class="lovelife-list-smimg-leftarrow"><</span>
<span class="lovelife-list-smimg-rightarrow">></span>
<div class="lovelife-list-smimg-box">
<ul>
<li><a href="#"><img src="/static/img/lovelife/smimg/lovebeauty/img1.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/lovebeauty/img2.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/lovebeauty/img3.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/lovebeauty/img3.jpg"></a></li><li><a href="#"><img src="/static/img/lovelife/smimg/lovebeauty/img4.jpg"></a></li><li><a href="##"><img src="/static/img/lovelife/smimg/lovebeauty/img5.jpg"></a></li>
</ul>
</div>
</div>
</li>
EOF;
sleep(2);
ob_flush();
flush();
?>
<?php
echo <<<EOF
<li class="lovelife-list-item3 lovelife-list-col2 sidebarpointer" >
<div class="lovelife-list-title">
<h3>家电馆 </h3>
<ul>
<li><a href="#jiadian">电视家影</a></li><li><a href=&qu