页面静态化技术演进

2021年11月22日 阅读数:3
这篇文章主要向大家介绍页面静态化技术演进,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

文章主要包含四部分:html

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

1 SpringBoot Thymeleaf模板

原理:服务端渲染、模版变量替换。与 Spring Boot,MVC方言完美结合。
image
优点前端

  • 传统J2E使用JSP方式开发,但 Spring Boot对JSP支持很差。JSP规范与Servlet规范紧密耦合,使用JSP须要唤起servlet进程。nginx

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

劣势spring

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

2 动静请求分离

动静分离的设计原理:区分动静态请求。数据库

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

  • 静态请求:没必要每次从服务端获取的页面展现请求。后端

优点浏览器

  • 架构分离:分层优化缓存

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

  • 研发框架分离:提升研发效率。

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

实现技术

Ajax是一种在无需从新加载整个网页的状况下,可以更新部分网页的技术。

Nginx能够用做动态请求反向代理,也能够用做静态请求使用html resources。

image

3 静态请求缓存效率化

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

CDN是内容分发网络,具备高性能、高可用、高扩展性的优势。

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

未使用CDN技术
image

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

客户端发起请求到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缓存

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

image

4.2 使用Nginx proxy cache

image
Nginx Lua脚本编程定制化:

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

Nginx proxy cache使用较少,由于再快的文件读写速度也比不上内存的读写速度

4.3 Nginx shared dic 本地缓存

原理:nginx服务器的内存缓存,全部worker进程共享,经过lua操做。
image
image
lua脚本
image

获取缓存空间,从中获取list缓存。若是为空则转发请求,获取响应数据并缓存。

5 全页面静态化技术

原理:服务端经过相似爬虫的技术直接完成动态请求加载完成后的静态页面,将HTML、CSS、JS资源所有加载完后的页面生成后部署到CDN上。

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

若是将渲染好的页面直接放到CDN上,则客户端能够直接获取。

image

优点:无需加载、无需动态请求、可所有CDN化

实现:

  • 相似爬虫的技术

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

HtmlUnit

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

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

image

上图.test.html书写错误