後端渲染html、前端模板渲染html，jquery的html

做者：趙魏璇
連接：https://www.zhihu.com/question/28725977/answer/116177149
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

 

做者：貘吃饃香
連接：https://www.zhihu.com/question/28725977/answer/41877597

區別在於如下幾點

一、後端渲染
實現：後端拼字符串唄…… （理論上後端模板也是字符串）
好處：模板統一在後端。前端（相對）省事，不佔用客戶端運算資源（解析模板），只要不大改結構，文字啥的小修改後端改了就行了。
壞處：佔用（部分、少部分）服務器運算資源、，response 出的數據量會（稍）大點，模板改了前端的交互和樣式什麼的同樣得跟着聯動修改。

二、前端模板
實現：看這個吧……關於模板引擎的工做方式和性能？ - 前端開發 但不只限於正則替換這一招，掃token 生成語法樹，再根據語法樹拼接也行，或者使用 DOM 模板，藉助 DOM API 處理也行，反正招兒多了去了。
好處：不佔用服務端運算資源（解析模板），模板在前端（頗有可能僅部分在前端），改結構變交互都前端本身來了，改完本身調就行。不用麻煩後端再聯調神馬的。
壞處：佔用（一部分、少部分）客戶端運算資源（解析模板）。前端代碼多點，畢竟包含模板代碼了麼。腳本是否是首次下就慢點了（看你在乎不在乎這個畢竟能304和CDN啥的）。可能形成先後兩份模板的狀況，總歸要後端吐出個首屏啥的先讓用戶看見吧。那這部分頁面模板不就是後端拼好了吐出來的麼。

三、jquery的html，append等方法（包括瀏覽器原生相關DOM API）
實現：……這就不說了吧，不就是直接插內容或者DOM節點麼。除非後端是直接吐出拼好的頁面，不然不關後端是經過接口吐的html字符串仍是模板數據，怎麼着不都得是經過這些玩意整頁面裏去麼。
好處：（興許是）靈活…… 還有由於一竿子捅到底了，直接使用（前端可控的）最終API，因此除了是後端直接吐的頁面外，這種方式是（相對）執行效率最高的……
壞處：各類字符串和DOM節點拼來拼去真的很煩……

1.前端渲染是在客戶端完成字符串替換，後端渲染固然在服務器完成，這並不說明前端渲染下載的資源就必定比後端渲染要少，有時候須要下載的東西更多，好比多了模板語法，多了某一種模板js文件，你知道，一個頁面的性能的絕大部分仍是取決於你下載的內容重量。 2.大部分人說前端渲染能夠在客戶端生成代碼而無需下載，可是生成代碼也是很是耗時間的操做，一樣生成代碼也須要根據服務器返回的數據，仍是須要等待數據下載完成才能着手生成代碼。 3.單頁面應用可使用前端渲染，在性能不差的條件下能給服務器減小一點壓力，並且體驗也要好一點，可是除此以外，就要放棄一些東西，好比搜索引擎優化，關鍵字優化。 4.後臺渲染還有一個很是明顯的優勢，就是可能生成緩存片斷，生成靜態化文件，這也能夠減小數據庫查詢的性能，甚至減小渲染頁面的開銷，這對相對數據變化不大的頁面很是高效。這些若是在配合一款內存數據庫，真的能夠很是高效的解決大部分問題 5.從可維護或者工程化來說，前端渲染更好維護，後端也省了不少工做，可是後端省的工做並非不須要作，只是轉給了前端而已，前端這個時候可能須要維護倆套代碼，最後你會發現，原本應該相同的代碼最後不一樣了，這是由於某一天你偷個懶，直接更新了模板而沒有更新你的靜態文件。。。