html渲染和模板的使用

們可以使用以下的方式去渲染html

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
	//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
	router.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.tmpl", gin.H{
			"title": "Main website",
		})
	})
	router.Run(":8080")
}

在html中我們可以使用特殊的雙花括號來渲染title這個值

<html>
	<h1>
		{{ .title }}
	</h1>
</html>

值得注意的是這種方式并不是gin特有的，而是golang特有的，它還有其他的模板語法。

模板語法：

定義變量：

{{$article := "hello"}}

也可以給變量賦值

{{$article := .ArticleContent}}

函數的調用：

{{funcname .arg1 .arg2}}

判斷語法：

{{if .condition}}
{{end}}

{{if .condition1}}
{{else if .contition2}}
{{end}}

not 非

{{if not .condition}}
{{end}}

and 與

{{if and .condition1 .condition2}}
{{end}}

or 或

{{if or .condition1 .condition2}}
{{end}}

eq 等于

{{if eq .var1 .var2}}
{{end}}

ne 不等于

{{if ne .var1 .var2}}
{{end}}

lt 小于

(less than){{if lt .var1 .var2}}
{{end}}

le 小于等于

{{if le .var1 .var2}}
{{end}}

gt 大于

{{if gt .var1 .var2}}
{{end}}

ge 大于等于

{{if ge .var1 .var2}}
{{end}}

循環：

{{range $i, $v := .slice}}
{{end}}

引入一個模板：

{{template "navbar"}}

使用vue2.0的過程，有時看API很難理解vue作者的思想，這促使我想要去深入了解vue底層的思想，了解完底層的一些思想，才能更好的用活框架，雖然網上已經有很多源碼解析的文檔，但我覺得只有自己動手了，才能更加深印象。

一、Vue與模板

對于沒使用過Vue的，這里我們來說下Vue的使用步驟：

1. 編寫頁面模板

a. 直接在HTML標簽中寫

b. 使用template

c. 使用單文件（<template />）

2. 創建Vue的實例

a. 在Vue的實例中(或者說在Vue 的構造函數中)

b. 里面為我們提供了：data，methods，computed，watch，props….等屬性

3. 講Vue掛載到頁面中

二、數據驅動模型

1. Vue的頁面渲染原理

a. 獲得模板，以及頁面中的數據

b. 將數據放到模板中

c. 將渲染好的HTML加載到頁面

重點:Vue 利用我們提供的數據和頁面中模板生成了一個新的 HTML 標簽 ( node 元素 ), 替換到了頁面中放置模板的位置.

這里我們分步來看一下代碼：

第一步：

注意：因為今天對Vue源碼的初步學習，這里我們就直接寫出來了，在Vue項目中是需要方法獲取到的，我們在下面的課程中也會給大家詳細講解！記得來聽課哦！

第二部：

第三步：

前期為了方面同學們理解，對Vue的源碼很多地方進行了簡化。我們剛才的模板是直接寫出來的，而Vue是通過Vue函數渲染出來的

來看一下代碼：

我們在Vue源碼中都是將渲染部分掛載到Vue的prototype上通過上面的代碼實現頁面的渲染，這里怕同學們誤會，所以借用了JGVue函數。

但我們平時在工作中對象里面如果還有對象

像上面這個一樣，我們要獲取到元素中的e的值，要通過obj.a.b.c.d.e才能獲取到，在Vue中我們又是怎么獲取到的呢？

我們來看一下：

我們通過createGetValueBuPath函數進行遍歷獲取到當前打點的元素的值，這里用到了函數柯里化，減少了我們的參數，這個算法對于工作時間短的同學可能有點難度，想學習的同學可以加一下老師的VX。

2. 數據驅動的好處

在之前使用jquery開發的年代，我們關注的往往是如何對節點進行操作，所以我們開發組件時候，可能需要提供一些復雜的API接口文檔給用戶，這些組件的API往往非常復雜，使用者需要了解每個接口傳參定義，很細微的界面變化也需要通過調用API進行操作。

在vuejs框架當中這些問題的考慮就沒有那么重要，因為我們實現了以數據的形式去驅動頁面的變化，當我們改變數據時，頁面就會自動發生變化，所以用vuejs所實現的組件往往API非常簡潔，因為我們只關注數據本身而不需要定義大量接口方法了。

小結：

Vue 源碼本身比較復雜, 對于沒有接觸過源碼的開發者來說入手比較困難. 這里我們準備了手寫過程進行過渡, 對 Vue 使用的探討進行手寫部分簡約的邏輯, 這樣在后面直接分析源碼的時候更加容易掌握源碼的思想. Vue 的渲染采用的是以字符串為模板, 然后進行編譯生成抽象語法樹, 最后得到虛擬 DOM 來進行的頁面渲染. 我們一開始不進行這么復雜的處理, 也方便進行一個理解，雖然學習起來可能有些難度，但相信你堅持下來的話，不管是對以后工資的提升以及對業務的需求都會有一個質的提升。加油！！

要

當我們訪問一個網站的時候，我們通常是在瀏覽器中輸入我們所需要訪問的網址，然后點擊就可以瀏覽我們所需要瀏覽的網站，但瀏覽器在我們輸入域名到返回給我們最后的結果也是經歷了一番繁瑣的操作。

瀏覽器通常的步驟如下
1.瀏覽器的地址欄輸入URL并按下回車。
2.瀏覽器查找當前URL是否存在緩存，并比較緩存是否過期。
3.DNS解析URL對應的IP。
4.根據IP建立TCP連接（三次握手）。
5.HTTP發起請求。
6.服務器處理請求，瀏覽器接收HTTP響應。
7.渲染頁面，構建DOM樹。
8.關閉TCP連接（四次揮手）
接下來我們主要分析第七點，也就是瀏覽器如何根據獲取到的文件渲染出相應的頁面，主要從HTML、CSS、JS這三點來分析

HTML

HTML稱為超文本標簽語言，是一種標識性的語言。普通的txt文檔在加了HTML標簽之后，就變得具有語義了，瀏覽器能根據不同的語義進行不同的解析。目前常見的HTML分為兩種，一種是HTML另一種是XHTML。相較于XHTML的”嚴格“，HTML以其相對較為”寬松“的特效獲得了較為廣泛的喜愛

瀏覽器獲取到HTML文擋的時候，會逐行解析文檔，并根據文檔內容將文檔內容轉化為DOM樹在在瀏覽器中渲染出來

<html>
 <body>
 <h1>
 Hello World
 </h1>
 </body>
</html>
這是一個最基礎的HTML文檔，當瀏覽器獲取到這個文件的時候，通過解析文字中的語義化標簽，通過解析標簽的<(Tag open state：開始標簽)到>(Tag name state：結束標簽)，屬性名稱和相應值，直到文檔結束，并將其轉換為DOM樹并最終在瀏覽器中繪制出來。

DOM樹

CSS

瀏覽器遇到語義解釋性的CSS標簽嵌入文件，那么此時IE的下載過程會啟用單獨連接進行下載，并在下載后繼續進行解析。并且只有在文件解析完成后才會在往下解析（瀏覽器阻塞），瀏覽器對CSS樣式的解析是從左到右的，比如.box .left p,會在頁面中找到所有的p標簽，然后在p標簽中找其父元素有.left類的p元素，再找祖父元素有.box的p標簽

如下圖示，瀏覽器會按照從右向左的順序去讀取選擇器。先找到span然后順著往上找到class為“haha”的div再找到id為“molly”的元素。成功匹配到則加入結果集，如果直到根元素html都沒有匹配，則不再遍歷這條路徑，從下一個span開始重復這個過程

提升渲染效率的幾個點
- 盡量少的去對標簽進行選擇，而是用class
- 不要去用標簽限定ID或者類選擇符
- 減少層級關系，使查詢效率更高
- 盡量少的去使用后代選擇器，降低選擇器的權重值
- 不要放空的class
- 多用繼承屬性，可以通過繼承避免對屬性重復使用

JS

瀏覽器遇到語義解釋性的JS標簽嵌入文件，那么此時IE的下載過程會啟用單獨連接進行下載，并在下載后繼續進行解析。并且只有在JS文件解析完成并且加載完后才會繼續往下解析（瀏覽器阻塞）

預解析

在當前作用域中，JavaScript代碼執行之前，瀏覽器首先會默認的把所有帶var和function聲明的變量進行提前的聲明或者定義（主要指的是ES6之前，由于ES6引了let和const所以會存在不同）

逐行解析代碼

JS代碼在逐行解析代碼的時候，變量賦值表達式是可以修改預解析的值。但如果有多個表達式對相同的變量多次賦值，那么除過函數聲明不能修改上次的賦值，變量賦值和函數表達式都可以修改這個變量的值

總結

整個渲染的過程大致上可以概述為

- 用戶輸入網址，服務器返回html文檔

- 瀏覽器開始解析HTML文檔
- 瀏覽器解析文檔過程中解析到CSS或者JS標簽嵌入文件，這時候瀏覽器優先解析標簽嵌入文件，待標簽嵌入文件解析完成并執行完成后在繼續解析HTML文檔
- 瀏覽器將解析好的DOM進行繪制，在瀏覽器中繪制出來

參考資料

https://segmentfault.com/a/1190000016253407
https://www.jianshu.com/p/b41f1258c044

在線咨詢

上一篇：「PHP基礎知識」在頁面中顯示“Hello World！”
下一篇：VUE前端編程：用Html2Canvas實現html頁面轉圖片

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商