靜態網頁是什么及其優缺點有哪些？

態網頁也叫做平面頁，是一種簡單的網頁形式，它的內容在網頁創建時就已經被確定，就像是一本已經印刷好的紙張。無論你何時打開這頁紙，內容都是一樣的。這種網頁通常使用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小時內與您取得聯系。

整合營銷服務商