全栈静态化

Posted 2021-05-01 程序员之路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了全栈静态化相关的知识，希望对你有一定的参考价值。

全栈静态化

一、全栈静态化

在大型网站中，比如主流电商商品页，访问者看到的页面基本上是静态页面。为什么都要把页面静态化呢？其实把页面静态化，好处有很多。例如：访问速度快，更有利于搜索引擎收录等。

目前主流的静态化主要有两种：

这两种方法都达到了实现URL静态化的效果，但是也各有各自的特点。

二、优缺点对比

对比项	动态	伪静态	纯静态
网站打开速度	中等	中等	快（无DB查询，CPU计算消耗）
搜索引擎抓取和索引	不利	有利	有利（速度快，权重高）
安全性	低	低	高（不适用程序、DB，攻击目标少）
稳定性	低	低	高（不受程序、DB故障影响）
硬盘容量	低	低	高（静态化网页文件需要存储在硬盘中）
服务器压力	高	高	低（无DB查询、CPU计算消耗）
实时性	高	高	低（数据变更后，需要手动触发静态化；静态化难度随网站复杂度提升而提升）

1、应用场景

动态页面静态化处理的应用场景非常多，例如：

•大型网站的头部和底部，静态化之后统一加载；•媒体网站，内容经过渲染，直接转为html网页；•高并发下，CDN边缘节点代理的静态网页；•电商网站中，复杂的产品详情页处理；

静态化技术的根本：提示服务的响应速度，或者说使响应节点提前，如一般的流程，页面(客户端)请求服务，服务处理，响应数据，页面装载，一系列流程走下来不仅复杂，而且耗时，如果基于静态化技术处理之后，直接加载静态页面，好了请求结束。

三、流程分析

静态页面转换是一个相对复杂的过程，其中核心流程如下：

流程

•开发一个页面模板，即静态网页样式；•提供接口，给页面模板获取数据；•页面模板中编写数据接口返参的解析流程；•基于解析引擎，把数据和页面模板合并；•页面模板内容加载完成后转换为HTML静态页面；•HTML静态页面上传到文件服务器；•客户端(Client)获取静态页面的url加载显示；

主流程大致如上，如果数据接口响应参数有变，则需要重新生成静态页，所以在数据的加载实时性上面会低很多。

四、Freemarker实现Html全栈静态化（基于SpringBoot）

1、引入Maven依赖

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId></dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.16</version></dependency><dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-commons</artifactId></dependency><dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version></dependency>

2、freemarker静态化

（1）application.yml增加配置

server: port: 8088 servlet: # 应用的访问路径 context-path: /freemarkerspring: application: name: test-freemarker freemarker: #关闭模板缓存，方便测试 cache: false settings: #检查模板更新延迟时间，设置为0表示立即检查，如果时间大于0会有缓存不方便进行模板测试 template_update_delay: 0 #一定要配置 太坑了 suffix: .ftl

（2）输出静态文件模板my-page.ftl

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>PageStatic</title></head><body>主题：${myTitle}<br/><#assign text="{'auth':'RedAnts','date':'2020-11-09'}" /><#assign data=text?eval />作者：${data.auth} 日期：${data.date}<br/><table class="table table-striped table-hover table-bordered" id="editable-sample"> <thead> <tr> <th>规格描述</th> <th>产品详情</th> </tr> </thead> <tbody> <#list tableList as info> <tr class=""> <td>${info.desc}</td> <td><img src="${info.imgUrl}" height="80" width="80"></td> </tr> </#list> </tbody></table><br/><#list imgList as imgIF> <img src="${imgIF}" height="300" width="500"></#list></body></html>

（3）核心Java代码

@Servicepublic class PageServiceImpl implements PageService { private static final Logger LOGGER = LoggerFactory.getLogger(PageServiceImpl.class) ; private static final String PATH = "/templates/" ; @Override public void ftlToHtml() throws Exception { // 创建配置类 Configuration configuration = new Configuration(Configuration.getVersion()); // 设置模板路径 String classpath = this.getClass().getResource("/").getPath(); configuration.setDirectoryForTemplateLoading(new File(classpath + PATH)); // 加载模板 Template template = configuration.getTemplate("my-page.ftl"); // 数据模型 Map<String, Object> map = new HashMap<>(); map.put("myTitle", "页面静态化(PageStatic)"); map.put("tableList",getList()) ; map.put("imgList",getImgList()) ; // 静态化页面内容 String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); LOGGER.info("content:{}",content); InputStream inputStream = IOUtils.toInputStream(content,"UTF-8"); // 输出文件 FileOutputStream fileOutputStream = new FileOutputStream(new File("D:/page/newPage.html")); IOUtils.copy(inputStream, fileOutputStream); // 关闭流 inputStream.close(); fileOutputStream.close(); } private List<TableInfo> getList (){ List<TableInfo> tableInfoList = new ArrayList<>() ; tableInfoList.add(new TableInfo(Constant.desc1, Constant.img01)); tableInfoList.add(new TableInfo(Constant.desc2,Constant.img02)); return tableInfoList ; } private List<String> getImgList (){ List<String> imgList = new ArrayList<>() ; imgList.add(Constant.img02) ; imgList.add(Constant.img02) ; return imgList ; }}@Controllerpublic class FreemarkerTestController { /** * 路由 /index * 返回 index 这里默认配置自动映射到 templages/index */ @RequestMapping("/") public String index(Model model) { model.addAttribute("welcome", "hello RedAnts"); return "index"; } @Autowired private PageService pageService; @GetMapping("/ftlToHtml") @ResponseBody public String ftlToHtml() throws Exception { pageService.ftlToHtml(); return "success"; }}

（4）测试

访问：http://127.0.0.1:8088/freemarker/ftlToHtml，生成对应的xxx.html

引用链接

---------------------------------------------------------

轻轻按住下面的它，让我们结伴，共同成长！

以上是关于全栈静态化的主要内容，如果未能解决你的问题，请参考以下文章

Python全栈开发-Day7-面向对象编程2

全栈编程系列SpringBoot整合Shiro（含KickoutSessionControlFilter并发在线人数控制以及不生效问题配置启动异常No SecurityManager...）(代码片段

python全栈开发第十七篇面向对象反射和内置方法

创建片段而不从 java 代码实例化它

如何在 python 中并行化以下代码片段？

支持动态或静态片段的不同屏幕尺寸？