關於頁面靜態化

時間 2019-11-12

標籤關於頁面靜態欄目網站開發简体版

原文原文鏈接

頁面靜態化

頁面靜態化就是將頁面模版和數據經過技術手段將兩者合二爲一，生成一個html網頁文件html

頁面靜態化也是網站性能優化的一個方向之一，其餘的網站優化好比：緩存、分佈式分散請求、數據庫讀寫分離等數據庫

頁面靜態化的優點/劣勢

訪問速度加快，不須要或者減小去訪問數據庫的頻率，使用緩存瀏覽器直接加載渲染html網頁便可瀏覽器
爬蟲或者搜索引擎更喜歡靜態的頁面（容易被命中）緩存
安全、穩定安全
隨着時間的推移或者產品的升級，靜態化產生的頁面日漸增多，須要的容積不可小覷性能優化

大體瞭解靜態化技術

製做模版 + 獲取模版數據 -----通過頁面靜態化-------> 生成html，存放到文件系統中 -------->通常使用Nginx的靜態代理向外提供服務網絡

目前靜態化頁面都是經過模板引擎來生成的，而來保存到Nginx來部署，經常使用的模版引擎如：app

Freemarker（比較熟悉）分佈式
Thymeleaf（瞭解）函數
Velocity（不明白，不清楚，不曉得！）

這裏咱們就對前兩種模板引擎作一個簡單的介紹吧，第三種之後遇到再作補充

Freemarker模版引擎

Freemarker入門

首先freemarker得入個門吧，看看之前的學習筆記：http://www.javashuo.com/article/p-vqxzlqaz-a.html

基於模版文件靜態化

這種方式，須要咱們在resources文件中建立一個templates文件夾，再建立一個模版文件，

在下方這個Demo中，咱們得建立一個test1.ftl的模版文件，

@Test public void GenerathHtml() throws IOException, TemplateException { //建立配置類，這個類:import freemarker.template.Configuration;
        Configuration configuration = new Configuration(Configuration.getVersion()); //設置模版路徑
        String path = this.getClass().getResource("/").getPath(); System.out.println("模版路徑爲 :" + path); configuration.setDirectoryForTemplateLoading( new File(path + "/templates/")); //設置字符集
        configuration.setDefaultEncoding("UTF-8"); //加載模版
        Template template = configuration.getTemplate("test1.ftl"); //數據模型
        Map<String,Object> map = new HashMap(); map.put("song", "你臉巴兒已經皺得像條魚擺擺"); //靜態化
        String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); System.out.println("咱們打印一下靜態化的內容 :" + content); //轉化爲流
        InputStream inputStream = IOUtils.toInputStream(content); //輸出文件
        FileOutputStream fileOutputStream = new FileOutputStream(new File("F:\\test1.html")); int copy = IOUtils.copy(inputStream, fileOutputStream); System.out.println(copy);//209
    }

模板文件test1.ftl的內容爲：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>FreemarkerTest1</title>
</head>
<body>
   小夥子，你不要拽，${song}！ 
</body>
</html>

關於測試的總體結構以下

最後會給咱們生成一個靜態的html:咱們打開看看：

這個時候咱們就能夠把這個頁面部署到Nginx服務上，向外提供服務

基於模版字符串靜態化

上面這一種方式，咱們是將模版寫在資源文件下的templates下的，而基於模版字符串的靜態化是字節在代碼中寫死了的，

 @Test public void GenerathHtmlByString() throws IOException, TemplateException { //建立配置類
        Configuration configuration = new Configuration(Configuration.getVersion()); //模版內容
        String templateString = "<html>\n" +
                "<head>\n" +
                "    <meta charset=\"UTF-8\">\n" +
                "    <title>FreemarkerTest1</title>\n" +
                "</head>\n" +
                "<body>\n" +
                "   老同志，你也不要拽，${song}！\n" +
                "   \n" +
                "</body>\n" +
                "</html>"; //模版加載器
        StringTemplateLoader loader = new StringTemplateLoader(); loader.putTemplate("template", templateString); configuration.setTemplateLoader(loader); //獲得模版
        Template template = configuration.getTemplate("template", "UTF-8");  //定義數據模型
        Map<String,Object> map = new HashMap<>(); map.put("song", "你一個月的工資才二十來塊"); //靜態化
        String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map); System.out.println("咱們打印一下靜態化的內容 :" + content);  //轉化爲流
        InputStream inputStream = IOUtils.toInputStream(content); //輸出文件
        FileOutputStream fileOutputStream = new FileOutputStream(new File("F:\\test2.html")); int copy = IOUtils.copy(inputStream, fileOutputStream); System.out.println(copy);//209
    }

隨後也會在咱們指定的位置問咱們生成一個靜態化頁面，咱們能夠去看看：

Thymeleaf模版引擎

Thymleaf入門

首先freemarker得入個門吧，看看之前的學習筆記：http://www.javashuo.com/article/p-qvlyhdqm-a.html

咱們先對幾個概念進行一下闡述：

Context：運行上下文

用來保存模型數據，當模板引擎渲染時，能夠從Context上下文中獲取數據用於渲染。

當與SpringBoot結合使用時，咱們放入Model的數據就會被處理到Context，就會做爲模板渲染的數據使用。
TemplateResolver：模版解析器

用來讀取模板相關的配置，例如：模板存放的位置信息，模板文件名稱，模板文件的類型等等。

當與SpringBoot結合時，TemplateResolver已經由其建立完成，而且各類配置也都有默認值，好比模板存放位置，其默認值就是：templates。好比模板文件類型，其默認值就是html。
Templateengine：模版引擎
用來解析模板的引擎，須要使用到上下文、模板解析器；

分別從二者中獲取模板中須要的數據，模板文件。而後利用內置的語法規則解析，從而輸出解析後的文件。

模版引擎處理的函數：
```
//三個參數分別是模版名稱、上下文、輸出目的地的流對象
templateEngine.process("模板名", context, writer);
```
經過對第三個參數的設定，若是目的地是Response的流，那就是網絡響應。若是目的地是本地文件，那就實現靜態化了。

而在SpringBoot中已經自動配置了模板引擎，所以咱們不須要關心這個。如今咱們作靜態化，就是把輸出的目的地改爲本地文件便可！