静态网页是什么及其优缺点有哪些？

态网页也叫做平面页，是一种简单的网页形式，它的内容在网页创建时就已经被确定，就像是一本已经印刷好的纸张。无论你何时打开这页纸，内容都是一样的。这种网页通常使用HTML编写，可能包含CSS和JavaScript，但不包含像PHP、ASP.net等服务端的动态脚本。包含文本、图像、声音、Flash动画、客户端脚本和ActiveX控件及JAVA小程序等。

静态网页没有后台数据库、没有可交互的网页。做好并上传到服务器上，就不能对网站的内容进行修改，除非把网站文件下载到自己计算机上，再用专业的网站制作软件编辑好上传（修改源代码）。

静态网页不能简单地理解成静止不动的网页，主要指的是网页中没有程序代码，只有HTML，网页URL以.htm、.html、xml等常见形式为后缀。

静态网页也包括一些能动的部分，静态网页上展示的内容并非完全静止的，它也可以有各种视觉上的动态效果，如GIF动图、Flash动画、滚动字幕等。

静态网页优点：

1、静态网页的内容相对稳定，比较安全，数据不会丢失；

2、静态网页的结构清晰，方便搜索引擎爬虫抓取和理解，因此对搜索引擎优化（SEO）更友好；

3、维护简单：静态网页通常比动态网页更容易维护；

4、静态网页被访问的速度快，访问过程中无须连接数据库，开启页面速度快于动态页面。

5、减轻了服务器的负担，工作量减少，也就降低了数据库的成本。

6、静态页面非常适合用于展示固定内容的网站，如企业官方网站、产品介绍页、博客文章等。

静态网页缺点：

没有数据库的支持，不能直接对网站内容进行修改，更新维护比较麻烦，得修改源代码，才能改变网页内容；

静态网页的交互性较差，在功能方面有较大的限制。实现不了会员注册、在线留言、购买交易等功能，只能简单地展示信息；

静态网页的优点包括加载速度快，安全性高，容易维护和优化，适合SEO。然而，对于需要频繁更新或者具有大量用户交互的网站，静态网页可能不是最佳选择。当需要对整个网站的静态页面进行批量的修改时，工作量有可能会比较大。

pring Boot使用freemarker并且生成静态html页面

之前我介绍了在spring boot中使用thymeleaf模板，这次我会给大家介绍在spring boot中使用freemarker模板技术，同时利用freemarker生成静态html页面。生成静态html页面就能实现网站的静态化进而提高网站的访问速度以及提高SEO能力。

首先在pom.xml中添加依赖

添加依赖

<dependency>
 <groupId>org.freemarker</groupId>
 <artifactId>freemarker</artifactId>
 <version>2.3.23</version>
 </dependency>

application配置

在application.properties中添加freemarker的配置参数

##freemarker
spring.freemarker.cache=false
spring.freemarker.charset=UTF-8
spring.freemarker.check-template-location=true
spring.freemarker.content-type=text/html
spring.freemarker.enabled=true
spring.freemarker.suffix=.ftl
spring.freemarker.template-loader-path=classpath:/templates

Controller和ftl模板

下一步我们就建一个基础Controller类和配套的ftl模板

Controller类

package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
 @GetMapping
 public String main(Model model){
 String w="Welcome FreeMarker!";
 Map root = new HashMap();
 root.put("w",w);
 model.addAttribute("w","Welcome FreeMarker!");
 return "test";
 }
}

可以看到很简单，跟之前的thymelefa和jsp的没有区别。

freemarker模板

<html>
<head>
 <title>Welcome!</title>
 <link rel="stylesheet" href="/bootstrap.min.css">
 <script src="/lib/jquery.min.js"></script>
</head>
<body>
<h1>Hello ${w}!</h1>
</body>
</html>

这样之后我们就能完成了基础freemarker的使用，更多的使用参见freemarker官方网站，这里不做过多的描述。

这里我们已经完成了标准的freemarker集成，下面我们将介绍如何利用freemarker生成静态html页面，直接上代码，作为演示我们还是在Controller中完成，在实际应用中我们可以按照自己的实际需要进行封装。

package com.hw.myp2c.common.controller;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.annotation.Resource;
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("")
public class MainController {
 @Resource
 Configuration cfg;
 @GetMapping
 public String main(Model model){
 String w="Welcome FreeMarker!";
 Map root = new HashMap();
 root.put("w",w);
 freeMarkerContent(root);
 model.addAttribute("w","Welcome FreeMarker!");
 return "test";
 }
 private void freeMarkerContent(Map<String,Object> root){
 try {
 Template temp = cfg.getTemplate("test.ftl");
 //以classpath下面的static目录作为静态页面的存储目录，同时命名生成的静态html文件名称
 String path=this.getClass().getResource("/").toURI().getPath()+"static/test.html";
 Writer file = new FileWriter(new File(path.substring(path.indexOf("/"))));
 temp.process(root, file);
 file.flush();
 file.close();
 } catch (IOException e) {
 e.printStackTrace();
 } catch (TemplateException e) {
 e.printStackTrace();
 } catch (URISyntaxException e) {
 e.printStackTrace();
 }
 }
}

利用freemarker生成静态页面我理解的流程是这样的

1.利用Configuration读取想生成静态页面的模板，这里是test.ftl

2.解析模板文件，并将模板中的${}!包含的参数替换成真实的数据

3.最终将读取了真实数据的模板生成相应的html文件，并写入指定目录

这样我们就完成了spring boot中使用freemarker模板，并且利用freemarker生成静态html文件

迎关注头条号：老顾聊技术

精品原创技术分享，知识的组装工

前言

我们小伙伴们在访问淘宝、网易等大型网站时有没有考虑到，网站首页、商品详情页以及新闻详情页面是如何处理的？怎么能够支撑这么大流量的访问呢？

很多小伙伴们就会提出他们都采用了静态化的方案，这样用户请求直接获取静态数据html，就不需要访问数据库了，性能就会大大提高；而且提高网站SEO优化。那今天老顾就带着大家聊一下静态化。把老顾之前工作场景中静态化方案遇到的问题，以及如何演变的，分享给小伙伴。

关于相关的静态文件的CDN技术，老顾就不在这边讲了。这个大型网站肯定都会用到的，什么是CDN，小伙伴们可以在网上查询看一下，比较简单；我们这边注重看技术方案。

方案一：网页静态HTML化

这个方案是老顾最早使用的方案，我们就拿CMS系统举例，类似网易的新闻网站；核心流程图

上图的核心思想：

1）管理后台调用新闻服务创建文章成功后，发送消息到消息队列
2）静态服务监听消息，把文章静态化，也就是生成html文件
3）在静态服务器上面安装一个文件同步工具，此工具的功能可以做到只同步有变动的文件，即做增量同步（老顾用久没用了，忘了工具的名称）
4）通过同步工具把html文件同步到所有的web服务器上面

这样的话就达到了，用户访问一些变化不大的页面时，是直接访问的html文件，直接在web服务器那边直接返回，不需要在访问数据库了，系统吞吐量比较高。

这个方案的问题：

1、网页布局样式僵化，无法修改

如果产品经理觉得新闻详情页面的布局要调整一下，现在的不够美观，或者加个其他模块，那就坑爹了，我们需要把所有的已经静态html化的文章全部重新静态化。这个是不现实的，因为像网易这么大的体量，新闻量是很大的，会被搞死。

2、页面会出现暂时间不一致

会出现用户刚刚再看最新的新闻，刷新一下又不存在了。这个是因为同步工具在同步到web服务器是要有时间的，同步到web服务器A上面了，但web服务器B还没有来得及同步。用户在访问的时候通过nginx进行负载均衡，随机把请求分配给web服务器的导致的。当然可以调整nginx负载均衡策略去解决。

3、Html文件太多，无法维护

这个是很明显的问题，html文件会越来越多，对存储空间要求很大，而且每台web服务器都一样，浪费磁盘空间；将来迁移维护也会带来很大的麻烦。

4、同步工具的不稳定

因为文件一旦多之后，同步工具稳定性就出现了问题

这个方案应该是比较传统的（不推荐）

方案二：伪静态化

什么是伪静态？

举个例子：我们一般访问一个文章，一般的链接地址为：http://www.xxx.com/news?id=1代表请求id为1的文章。不过这种链接方式对SEO不是太友好（SEO对网站来说太重要了）；所以一般进行改造：http://www.xxx.com/news/1.html 这样看上去就是个静态页面。一般我们可以采用nginx对url进行rewrite。小伙伴如何有兴趣可以自行了解，比较简单。

之所以是伪静态其实也是需要动态处理的。

针对方案一上面问题，方案进一步的演化，如下图

此方案的核心思想

1）管理后台调用新闻服务创建文章成功后，发送消息到消息队列
2）缓存服务监听消息，把文章内容缓存到缓存服务器上面
3）用户发起请求，web服务器根据id，直接查询缓存服务器
4）获取数据返回给用户

此方案就解决了方案一的一个大问题，就是html文件多的问题，因为不需要生成html，而且用缓存的方式，解决不需要访问数据库，提升系统吞吐量。

不过此方案的问题：

1、网页布局样式维护成本比较高，因为此方案照样是把所有的内容放到了缓存中，如果需要修改布局，需要重新设置缓存。
2、分布式缓存压力比较大，一旦缓存故障就导致所有请求会查询数据库，导致系统崩溃

还有个小问题，就是实时数据处理，就是页面中如价格，库存需要到后台读取的。当然小伙伴也许就会说，也可以处理啊，用户把商品内容请求到后，然后在用浏览器发送异步的ajax请求获得商品数量就好了啊。这样就是无形的增加了一次请求。（此问题可以忽略）

此方案类似很多公司都在使用，如：同程旅游等

方案三：布局样式模板化

针对方案二的问题，我们可以采用openresty技术方案进行，利用http模板插件lua脚本进行解决，这里老顾不会介绍openresty+lua技术，有兴趣的小伙伴，可以到访问https://www.roncoo.com/view/139 这个视频课程。

如下图：

这里说明一下上图中我们小伙伴不需要全部都要了解，这个是比较全的商品详情页的解决方案，涉及到了三级缓存这个概念，在这里老顾就不深入讲三级缓存了。

我们主要看的是上面怎么会有两层ngnix，分发层和应用层，这个是什么意思？

应用层nginx

老顾先介绍一下应用层nginx是什么意思？nginx一般被用做负载均衡，其实nginx还有很多的功能，尤其他的openresty扩展 + lua脚本语言结合起来可以完成很多功能，小伙伴可以理解为lua脚本语言就是类似java语言，可以动态处理业务，如：本地缓存处理，远程http访问，访问redis等。

应用层nginx就是利用了http模板 + 缓存通过lua脚本完成的网页渲染

http模板

1）应用层nginx通过lua脚本语言先获取本地商品数据，然后和http模板进行渲染，形成最终商品详情页返回给用户
2）如果应用层nginx本地的缓存没有此商品数据，就通过lua脚本发起http请求访问web服务器，获取商品数据。
3）web服务器会向redis或本机的ehcache请求商品数据（这里涉及三级缓存概念），如果存在此商品数据，直接返回给用户；如果不存在则请求微服务访问数据库

这个思路就是通过http模板，解决了方案二中的布局样式的问题，如果需要调整布局，只要改一下模板就行了，非常方便。也解决了实时性问题。这边涉及到的nginx本地缓存其实就是为了保证不需要访问数据库，提升系统吞吐量。小伙伴只要了解一下思路，如果不了解openresty和lua可以自行上网了解，也可以联系老顾。

分发层ngnix

为什么上面还有一层分发层呢？这个是因为大型网站的商品数太多了，应用层nginx的本地缓存是有限的，不可能把所有的商品数据缓存在同一个服务器的本地缓存；一台应用层nginx只能缓存部分商品数据，说到这里小伙伴是不是应该就知道为什么了吧？就是利用hash一致性算法，根据商品id路由分发到同一个应用层ngnix服务器。

分发层ngnix的作用就是hash策略的负载均衡，保证了商品id路由到固定的应用层服务器。

三级缓存保证了系统的稳定性，即使redis缓存崩溃，还有其他2个缓存保障。

总结：

方案三是比较完整的方案，很多大厂都在使用，能够承受亿级流量，但系统比较复杂。
如果对实时性要求不高，布局样式调整不频繁，可以考虑方案二，系统比较简单

-End-

如有收获，请帮忙转发，您的鼓励是作者最大的动力，谢谢！

10几年的经验实战分享

相关微服务，分布式，高并发，高可用，企业实战，干货等原创文章正在路上

欢迎关注头条号：老顾聊技术

精品原创技术分享，知识的组装工

推荐阅读
1、你知道如何保障生产端100%消息投递成功吗？
2、你知道如何更新缓存吗？如何保证缓存和数据库双写一致性？
3、你知道怎么解决DB读写分离，导致数据不一致问题吗？
4、DB读写分离情况下，如何解决缓存和数据库不一致性问题？
5、你真的知道怎么使用缓存吗？
6、如何利用锁，防止缓存击穿？重构思想的重要性
7、海量订单产生的业务高峰期，如何避免消息的重复消费？

在线咨询

上一篇：经典范例：7个JavaScript最佳实践
下一篇：纳米材料真的是危害健康的隐形杀手吗？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商