全球最快的JS模板引擎

廢話不多說，先上測試：

?

親測請訪問：【在線測試地址】單次結果不一定準確，請多測幾次。

tppl?的編譯渲染速度是著名的 jQuery 作者 John Resig 開發的?tmpl?的?43?倍！與第二名 artTemplate 也有一倍的差距。

似乎每一個大公司都選擇自己開發模板引擎并將其開源，結果就是社區充斥著數不清的引擎，讓人眼花繚亂無從選擇。隨著時間的流逝，越來越多的功能被添加進去，最終讓一個強悍的發動機變成了一臺臃腫復雜零件生銹的拖拉機。天吶，我就想網頁面里插一段 html，你居然要我往每個js文件里再塞進500行代碼！

不，事情原本應該更簡單。保持代碼的簡潔高效也意味著讓生活更加健康愉悅。

好吧，滿腦子裝著“封裝”或者“模塊化”的讀者估計有不同的看法。

下面我們來談談如何讓引擎更加強勁高效。

模板引擎分為兩大主要陣營：

原生語法

自定義模板語法

此兩種方案各有各的好，自定義語法相比前者的優點在于，看起來和寫起來更加規范簡潔，更“像”是一種模板。也能更好的配合編譯，并且可以避免用戶寫出“性能不佳”的代碼。部分人認為自定義語法對頁面設計人員來說更為友好，這就見仁見智了。而缺點就是通常只能自定義 if else 和 for 循環等簡單而有限的邏輯結構，不夠強大和靈活。

自定義語法的優化方法有隨著語法的不同而不同，但通常最終都是將其轉換為原生的語言邏輯結構。這里主要討論原生語法模板引擎的優化。

對于追求性能的模板引擎來說，有兩個顯而易見的方向：

編譯結果緩存

編譯結果靜態化

緩存很好理解，一次編譯多次渲染。通常是保存初步正則替換后的字符串中間值，重復渲染時直接拿來使用。

靜態指的是，編譯模板字符串生成一個字符串拼接的函數，而不是每次創建函數。渲染操作就相當于一次函數調用，代入變量完成字符串拼接并返回。一般引擎優化到這一步時，渲染方面已經沒有太大的差距和進步的空間。大家都成了字符串拼接函數，只能在微小的語法層面做優化。這里說一下，相信從事過前端開發的朋友，都“聽說”過一個字符串拼接的“快速方法”：將字符串片段 push 進一個數組，最后再 join 返回，性能比直接采用 + 或者 += 字符串要好。注意，這種方法過時了！在現代瀏覽器以及Node.js中已經不再成立。通過數組連接字符串只是一個“臨時解決方案”，隨著各大js編譯器的優化和進步，直接采用 + 字符串操作，給了一個編譯器在語言底層做出優化的機會，大家還是著眼于未來吧。

渲染差距不大時，編譯則還存在很多“水分”可以擠出來。當然，一部分模板引擎集成了諸如文件加載、Ajax等高級功能，對其性能方面有要求太高似乎也不太合理。

一般原生語法模板引擎，都采用類似下面的字符串表示：

<h1> <%=title %> </h1> <% for(var i in content){ %><p>第<%=i%>段：<%=content[i]%></p> <%}%>

而編譯操作就是將這一段字符串轉換成類似下面的函數：

function(data){var str = "<h1> "+data.title+" </h1>";for(var i in data.content){str += "<p>第"+i+"段："+data.content[i]+"</p>";}return str; }

通常情況都是改變字符串結構，去掉模板標簽，再使用 new Function() 創建函數。

傳統傳遞參數的實現通過遍歷數據對象，把對象的名值分離，然后分別把對象成員名稱作為new Function的參數名(即變量名)，然后使用函數的appley調用方式傳給那些參數。

tmpl 則使用了javascript不常用的 with 語句實現。 實現方式很簡潔，省去了var這個關鍵字。tmpl 性能問題就出在 with 上面。javascript 提供的 with 語句，本意是想用來更快捷的訪問對象的屬性。不幸的是，with語句在語言中的存在，就嚴重影響了 javascript 引擎的速度，因為它阻止了變量名的詞法作用域綁定。

而轉換的方法有很多種，一部分采用 split() 截斷分析，一部分采用全正則替換，更有強悍的引擎使用詞法分析，總之各顯神通。

全正則替換的方案只是一長串的 .replace() 鏈式調用，看起來代碼更加美妙，但由于存在中間過渡狀態和方法而導致性能不佳。詞法分析更不必說，大量的正則拖慢編譯速度。編譯優化的重點就在，盡量減少中間態，并減少復雜正則表達式的使用。經過實測，split() 截斷分析能減少一部分正則，性能更好。

tppl?一開始使用“模板尾標簽分割”，即：str.split(”%>”) 的方式，這與 tmpl 的實現方式不謀而合，上面的字符串被分割為6段，然后為每一段使用一次正則替換：

var tpls = ["<h1> <%=title", " </h1>","<% for(var i in content){ ", "<p>第<%=i", "段：<%=content[i]", "</p><%}"];

在后來的性能測試中，發現這種實現方式相比其它引擎，并沒有太大的提升。看來只能另辟蹊徑了。

經過長時間的冥思苦想，終于發現采用“模板頭標簽分割”的方式，能大大減少分割結果的數量，但是需要修改模板標簽：

<h1> [=:title:] </h1> [: for(var i in content){ :]<p>第[=:i:]段：[=:content[i]:]</p> [:}:]

方括號 [ 與冒號 : 組成的模板標簽相比 <% 能更加清晰的區分html代碼與js邏輯代碼。通過 .split(”[:”) 將模板分割為3段：

var tpls = ["<h1> [=:title:] </h1>", " for(var i in content){ :]<p>第[=:i:]段：[=:content[i]:]</p>", "}:]"];

如此一來正則替換從6次下降到3次，性能提升將近一倍！而且隨著代碼邏輯結構的不同，性能提升將會更大。

關鍵的正則表達式：

var line = "'"+"<p>第[=:i:]段：[=:content[i]:]</p>".replace(/\[\=\:(.*?)\:\]/g, "'+$1+'")+"'"; // '<p>第'+i+'段：'+content[i]+'</p>'

tppl?的源碼托管在 Github 上，地址：https://github.com/yangjiePro/tppl

如果你還有更好編譯優化方法，歡迎討論！

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的转载：js模板引擎的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。