页面静态化技术演进

文章主要包含四部分：

• 传统MVC开发：JSP和Thymeleaf的弊端
• 动静请求分离：异步请求
• 静态请求缓存效率化：CDN
• 动态请求缓存效率化：Nginx shared dic
• 全页面静态化技术：无头浏览器

1 SpringBoot Thymeleaf模板

原理：服务端渲染、模版变量替换。与 Spring Boot，MVC方言完美结合。

优势

• 传统J2E使用JSP方式开发，但 Spring Boot对JSP支持不好。JSP规范与Servlet规范紧密耦合，使用JSP需要唤起servlet进程。

• Thymeleaf支持HTML原型，可静态使用。

劣势

• 传统模板页面基于服务端，需要唤起servlet容器，走springmvc全套流程。
• 模板渲染IO操作
• 较难缓存。用户请求在访问到springboot server时，还会经过nginx，如果使用模板渲染，很难在nignx上做缓存。

2 动静请求分离

动静分离的设计原理：区分动静态请求。

• 动态请求:每次都从服务端获取数据请求。

• 静态请求:不必每次从服务端获取的页面展示请求。

优势

• 架构分离：分层优化

• 缓存策略分离：例如前端做nginx、浏览器、cdn等缓存。

• 研发框架分离：提高研发效率。

静态资源服务器，例如nignx；动态请求服务器，例如Tomcat；前后端采用Ajax等前端异步化交互技术发起请求，获取数据，填充静态页面。

实现技术

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Nginx可以用作动态请求反向代理，也可以用作静态请求使用html resources。

3 静态请求缓存效率化

主要是CDN分发技术和Nginx proxy cache文件缓存。

CDN是内容分发网络，具有高性能、高可用、高扩展性的优点。

• CDN是带有缓存性质的网络节点。即CDN是web服务器，提供了静态资源缓存机制。
• 分发能力，请求分发到最近的节点。
• 具有负载均衡能力，没有单点问题。
• 需要专门运营维护CDN网络。

未使用CDN技术

使用CDN技术缓存静态资源。

客户端发起请求到DNS，查询ip地址，根据CNAME返回CDN管控节点域名，实现DNS解析权移交。管控节点根据请求ip地址分发到最近的CDN节点（负载均衡与分发）。如果在CDN节点命中缓存，直接返回，否则请求静态资源并备份。

运营厂商CDN实现原理中，HTTP 缓存头起到了重要作用。

Http缓存头 cache-ctrol

private:客户端可以缓存.

public:客户端和代理服务器都可以缓存。

max-age=xxx:缓存的内容将在XXX秒后失效。

no- cache:强制向服务端再验证一次，判断是否生效。

no-store:不缓存请求的任何返回内容。

有效性判断（验证时带上如下参数）

ETag:资源唯一标识

If-None-Match:客户端发送的匹配Etag标识符

Last- modified:资源最后被修改的时间

If- Modified- Since:客户端发送的匹配资源最后修改时间的标识符

4 动态请求缓存

4.1 动态请求前置缓存

前置缓存的使用，提高查询速度，减少数据库访问量。

• Redis集中式缓存
• 本地缓存：Tomcat缓存

包括主动失效、被动失效，需要解决缓存击穿、降级等问题。

4.2 使用Nginx proxy cache

Nginx Lua脚本编程定制化：

在nginx生命周期中，Lua通过协程机制在某些环节实现钩子机制。例如master进程创建worker进程时，运行初始化脚本；检测到某个url请求时，直接调用Redis返回response，从而省掉springboot webmvc流程。

Nginx proxy cache使用较少，因为再快的文件读写速度也比不上内存的读写速度。

4.3 Nginx shared dic 本地缓存

原理：nginx服务器的内存缓存，所有worker进程共享，通过lua操作。


lua脚本

获取缓存空间，从中获取list缓存。如果为空则转发请求，获取响应数据并缓存。

5 全页面静态化技术

原理：服务端通过类似爬虫的技术直接完成动态请求加载完成后的静态页面，将HTML、CSS、JS资源全部加载完后的页面生成后部署到CDN上。

我们访问页面，发起静态请求从CDN中获取html资源文件，发起动态请求访问nginx、tomcat获取响应数据，然后在客户端渲染页面。需要三步操作。

如果将渲染好的页面直接放到CDN上，则客户端可以直接获取。

优势：无需加载、无需动态请求、可全部CDN化

实现：

• 类似爬虫的技术

• 无头浏览器：类似浏览器，加载HTML文件，运行JavaScript，执行Ajax请求，获取数据，填充到DOM，输出静态资源文件。

HtmlUnit

Httpclient无法搞定动态请求，HtmlUnit可用于爬虫，测试自动化工具等

HtmlUnit是一个无界面浏览器Java程序。为HTML文档建模，提供了调用页面、填写表单、单击链接等操作的APl。提供了对 Javascript的支持，甚至可以使用相当复杂的Ajax库，根据配置的不同模拟 Chrome、 Firefox等浏览器。

上图.test.html书写错误