为什么要静态化页面?

当面对大流量或者页面执行业务比较多的是时候,可以从动态查询数据库到直接不用查数据,直接访问静态页面,可以数据库和服务器的压力。让用户访问速度更快。

一般生成静态化页面两种方式: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