请问静态资源如何先渲染？

Question

课件中老师提到不是先获取后渲染，而是先渲染的。
这里的先渲染怎么理解呢？

Answer 1

大能老师 2022-05-23 09:56:06

“先渲染”的意思就是提前把动态数据和前端静态资源提前渲染成结果页面，以此来提升前端访问的速度。业界主流使用页面静态化技术来进行处理，静态化就是指把原本动态生成的html页面变为静态内容保存，用户客户端请求的时候，直接返回静态页面，不用再经过服务渲染，不用访问数据库，可以大大的减小数据库的压力，显著的提高性能。。

页面静态化技术主要经历一下几个阶段：

传统MVC开发

一开始，是使用模版变量替换。也就是传统的MVC开发，想JSP这些技术，存在的问题是：

• 传统模板页面基于服务端，需要唤起servlet容器，走springmvc全套流程。

• 较难缓存。用户请求在访问到springboot server时，还会经过nginx，如果使用模板渲染，很难在nignx上做缓存。

动静请求分离：异步请求

第二个阶段是，动静分离。设计原理：区分动静态请求。

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

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

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

静态请求缓存效率化

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

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

• CDN是带有缓存性质的网络节点。即CDN是web服务器，提供了静态资源缓存机制。

• 分发能力，请求分发到最近的节点。

• 具有负载均衡能力，没有单点问题。

全页面静态化技术

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

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

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

实现：

• 类似爬虫的技术

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

总结：

缓存不是万能的，所以我们在一些场景下就选择使用静态化来解决，比如，商品详情页、网站首页、新闻详情这些页面，我们就可以通过静态化，将静态化的页面保存在nginx和CDN服务器来部署。

简单理解就是：后台把动态数据和前端页面提前做好，放在cdn或nginx上，来提高页面响应速度

• 提问者 Jining0909 #1

  谢谢老师的回复。之前这些技术其实也都听过或者用过，但是很难区分出他们的区别以及设计思想。老师讲完感觉清楚透彻了许多。

• 大能老师 #2

  由于课程篇幅和时长的限制，有些概念在视频里面我们没有进行详细展开，同学后面学习过程中如果遇到类似问题，欢迎随时提出来一起交流哦