[笔记] 前端静态化和伪静态

ELI_He999

已于 2024-06-12 10:49:01 修改

阅读量3.6k

点赞数

分类专栏：笔记文章标签：静态化伪静态 2019

于 2019-06-17 09:49:02 首次发布

原文链接：https://www.cnblogs.com/gaogaoxingxing/p/6080779.html

版权

笔记专栏收录该内容

78 篇文章 0 订阅

订阅专栏

先看看别人对静态化的理解。

网页静态化有很多含义，在WEB开发中，静态网页一般理解为网站中大部分超级链接所引用的页面是单独的HTML静态页面文件（如*.htm、*.html等页面文件）。在ASP.NET中（ASP、PHP或JSP也一样），页面都是通过运行库（其他语言也有相应的解释器或运行环境）动态生成HTML代码，然后发送到浏览器端的，而不是直接将页面文件发送。通过一定的技术手段，将浏览用户通过超级链接可能浏览到的页面内容预先转换为单独的HTML静态页面，当用户浏览时，服务器直接将该页面文件发送到浏览器端解析。
网页静态化的好处具体有以下几点。
q 在某些情况下，用户请求浏览页面时，由于服务器不需要运行库动态生成HTML、访问数据库等操作，可以明显提高页面浏览的速度，减轻服务器的运行负担。所以网页静态化特别适用于大型网站，大量用户请求页面时，服务器不需要ASP.NET运行库的工作及数据库的访问，减少了大量的页面输出工作。不过某些情况也不适合网页静态化，因为网页静态化本身就是ASP.NET程序动态生成HTML代码并存储为单独的物理文件到磁盘，这个过程过于频繁将导致服务器压力过大。在这方面，编程者要根据WEB项目的实际需要，权衡是否需要使用网页静态化技术。
q 有利于搜索引擎收录网站页面信息。商业运营网站特别渴求Google、百度之类的搜索引擎能尽量多地收录站点中页面的信息，HTML页面能使网站页面收录的可能性增加很多。还有一种类似的技术也可以完成类似的功能，即网页伪静态化，即通过URL重写等技术使超级链接所指向的静态HTML地址转向动态页面（如*.aspx页面）。因为搜索引擎很多时候首先搜索页面中的超级链接，超级链接所指向的是HTML静态页面，所以可以很轻易地直接搜索到所对应的动态页面内容。
【分析】
本题主要考查面试者对网页静态化技术的理解。一些浏览量比较大的门户网站，特别是新闻网站，大量采用了网页静态化技术。当网站编辑将新文章通过后台管理系统添加到数据库中，相应的静态化程序即开始运行，并生成一个该文章的HTML静态文件。对静态化技术的理解，对于大型网站开发特别重要，很多企业招聘时开始重视这方面知识点的考查，面试者一定要从本质上理解静态化的必要性，用自己的语言征服面试考官。

一个是从seo的角度，一方面是避免频繁的交互数据库。节约服务器资源。

另一个博主：

页面静态化分两种：一种是利用程序将动态页面抓取并保存为实际静态页面，页面实际存在于服务器的硬盘中；一种是通过web服务器的URL Rwrite方式，它是通过web服务器内部模块按照一定的规则将外部的URL请求转化为内部的文件地址也就是把外部请求的静态地址转化为实际的动态页面地址，而静态页面实际是不存在的。

第一种方式实现过程基本可以分解为:1、通过mybatis框架或herbnate框架或原生的jdbc从数据库拿到数据，2、通过set方法注入到封装了相应数据属性的对象data中，3、使用quarz调度器框架设置定时任务，按照设定的时间生成对应data的json文件，4、通过javascript方法读取生成后存放在服务器硬盘中的json文件里面的数据，5、前端展示的实现是在模板页面中调用读取到对应json文件的.js文件中的function()将数据加载到模板页面中对应需要填充该数据的位置。

第二种方式的实现则是在前端提交请求后通过在struts或springMVC框架下配置或者直接调用原生的servlet的request方法将请求通过HTTP协议发送到服务器，服务器将请求转发获取对应的内容，然后将拿到内容的路径通过写方法设置规则来重写从而将拿到的内容在前端展示并改变其在前端页面的路径显示。
---------------------
作者：追风少年16
来源：CSDN
原文：https://blog.csdn.net/sinat_35046733/article/details/51512955
版权声明：本文为博主原创文章，转载请附上博文链接！

另一个评论：

1.关于seo，不知道为什么lz说百度，Google喜欢静态页？但是我认为这肯定是误读，因为最早说对动态页支持不好，是因为URL中有？传参问题，而对于搜索引擎可能会误认为这是同一个URL.这个问题可以通过url rewriter解决。

2. 关于静态页面，其优势主要在于当浏览器请求时，如果发现这个页面没有修改过，则直接从缓存中获取，而动态页面通过程序生成内容，所以会损失一部分性能，但是动态页面通过页面缓存技术也可以很好的解决。

3.关于动态页面和静态页连接数据库等问题，静态页第一次访问时，需要从硬盘中读取文件，I/O操作是最耗时的。如果是仅根据ID查询数据库（不涉及复杂运算），由于使用索引，以及存储更集中等特点，读取数据库应该更快。如果使用NOSQL数据库，通过ID查询效果更好的。

4.静态文件在分布式系统中有很多瓶颈，当使用负载均衡，服务器增加时，一个静态文件将需要在多台服务器存在副本，每修改一个地方，就需要将文件同步到多个服务器中。管理相当麻烦。

因此，我认为使用静态文件来达到提高效率的时代在web2.0的平台中已经不适用。当然，仅是CMS的文章发布系统还在使用，但是肯定也在多服务器的同步问题中花费不菲。

搜索一下前端框架，angular、vue、react等，说白了就是把动态网页中从服务器获取数据部分用ajax方式请求服务器接口获得，再通过angular、vue、react等前端框架渲染出来。这样的优势：

1、服务器不必把动态网页转换为静态网页了，全都是静态网页，服务器基本都是数据接口访问了，可以说没有web服务了，只有服务于web接口的服务中间件。

2、无动态网页，静态网页可以通过CDN就近访问以最快的速度被打开、渲染。

3、前后端松耦合，业务变更后端仅需改变中间件接口，前端的事完全可以不管了，前后端工作任务更明确。

暂时就总结这么多了，一下子想不出太多。

Q: 那什么是伪静态：

A: 伪静态即是网站本身是动态网页如.php、.asp、.aspx等格式动态网页有时这类动态网页还跟“?”加参数来读取数据库内不同资料。很典型的案例即是discuz论坛系统，后台就有一个设置伪静态功能，开启伪静态后，动态网页即被转换重写成静态网页类型页面，通过浏览器访问地址和真的静态页面没区别。前提服务器支持伪静态重写URL Rewrite功能。

PHP 页面静态化/纯静态化/伪静态化

个人博客迁移至独立博客：https://blog.plcent.com/，欢迎大家访问

概念

PHP静态化分为：纯静态化和伪静态化；纯静态化又分为：局部静态化和完全静态化

纯静态化：是把PHP生成的动态页面保存成静态的html文件，用户访问该静态页面，而不是用户每一次访问都重新生成一张相同的网页，优点就是减小服务器开销，

　　局部静态化：是生成的静态文件中，有局部的数据还是通过ajax技术动态获取的；

　　完全静态化：即不存在动态获取数据的情况，所以内容都来自静态的html页面

伪静态化：其实还是动态访问，其实质是动态生成数据，你访问的网址类似于"http://yourhost,com/index/post/12",是一个静态地址，该地址多见于博客地址，但伪静态化中，你访问的网址实际上经过服务器解析，还是会解析成类似于"http://yourhost,com/?c=index&a=post&id=12"的地址，所以称之为伪静态化

　　伪静态的优点：美观；便于搜索引擎收录

纯静态化的实现

利用php内置的ob函数实现页面的静态化，大概步骤如下：

<?php ob_start();//开启缓存 
?>

<p>我是要生成的静态内容，也可以在该处链接数据库生成动态内容于此</p>

<?php

file_put_contents( 'index.html', ob_get_clean() );//把生成的静态内容保存到index.html文件，而不是输出到浏览器

?>

触发系统生成纯静态化页面

　　方法：页面添加缓存时间；手动触发

页面添加缓存时间

<?php
$file_name = 'index.html';
if(file_exists( $file_name ) &&  filemtime( $file_name ) - time() < 10 ){//如果文件是存在并且最后修改时间小于设定时间 10s
    //filemtime( $file_name );//得到文件最后修改时间
    //time();//当前时间
    require_once( $file_name );//引入文件
}else{
 ob_start( );
 ?>
<p>我是要生成的静态内容</p>
 <?php
file_put_contents( $file_name,  ob_get_contents() )//输出到浏览器
}

　　如果后台数据存在更细，定时刷新不能及时更改静态页面，怎么办？所有引入了手动触发的功能

手动触发

　　手动触发的大概样式就类似于优酷视频评论区，当有新评论时，会后一条屎黄屎黄的小提示框：“有新评论，点击更新”，也类似于app中的下滑刷新的机制，自己去寻找吧。。

除此之外还有Linux下的crontab定时扫描程序

*/5****php/data/static/index.php

局部静态化内容不做叙述

PHP伪静态

// 静态：http://yourhost.com/index.php/12/2.html
// 动态：http://yourhost.com/index.php?type=12&id=2
$pathinfo = $_SERVER['PATH_INFO'];
if( preg_match('/^\/(\d+)\/(\d+)/', $pathinfo,$path) ){
    $type = $path[1];
    $id = $path[2];
    echo 'type=',$type,'&id=',$id;//获得type 和 id 进一步处理
}else{
    //错误处理
    echo "err";
}

Apache服务器rewrite配置

在httpd.conf文件中，找到

#注释：去掉前边的" # "开启rewrite服务，重启服务器生效
#LoadModule rewrite_module modules/mod_rewrite.so

#注释：http-vhosts.conf文件是虚拟域名配置的文件，开启改文件可以配置虚拟域名，一般默认是开启的
#Include conf/extra/httpd-vhosts.conf

如果你不会配置虚拟域名，可以参考我的另外一篇文章：WAMPServer配置修改及问题汇总

rewrite伪静态配置

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "c:/Apache24/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error.log"
    CustomLog "logs/dummy-host.example.com-access.log" common


    #配置规则如下所示
    RewriteEngine on
    RewriteRule ^/vidio/([0-9]*).html$ /vidio.php?id=$1
    
</VirtualHost>

RewriteEngine其他配置规则以后会再添加

现在你访问http://yourhost.com/vidio/12.html时，相当于访问了http://yourhost.com/vidio.php?id=12

问题：配置完上面的内容后，又存在以下问题？如果项目目录下存在该静态页面时，到底是访问我们的静态页面还是访问我们伪静态的文件呢？

　　　　经过测试我们发现，并不会访问静态页面，如果我们想访问我们的静态页面怎么办？

伪静态和静态页面冲突时解决办法：

    #完整的配置规则如下
    RewriteEngine on
    #添加以下两项，!-d  和  !-f  分别表示  目录 和 文件
    #当访问的伪静态和相应的静态目录和文件冲突时，访问静态页面
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-d
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_FILENAME} !-f
    RewriteRule ^/index/([0-9]*).html$ /index.php?id=$1

如果你觉得本文对您有帮助,可以留言或点赞哦!
>>留于文后
如果您发现文中存在错误，欢迎留言指出，提前感谢！
------------------------------------------------------------------------------------------------------------------------------------
本文来自博客：caoruiy - 博客园
------------------------------------------------------------------------------------------------------------------------------------
特别说明：本人博客迁移到独立博客站点：http://www.plcent.com/
转载请注明出处, 以防有错误, 方便后来者追根溯源！做一个有爱的搬运工O(∩_∩)O哈哈~
请勿用于商业用途！

https://www.cnblogs.com/gaogaoxingxing/p/6080779.html