我們都知道模板都是需要渲染的，最近在使用react，它是後端渲染的，而angular是前端渲染的。要弄清前後端渲染的區別，先來看看瀏覽器在完整展示乙個頁面前做了哪些工作：
① 載入：根據請求的url進行網域名稱解析，向伺服器發起請求，接收檔案（html、js、css、圖象等）
② 解析：從html解析出dom tree，解析css產生css規則樹（計算css樣式），js，通過dom api和css api操作dom tree和css ruletree。
③ 渲染：解析完成後，瀏覽器引擎會通過dom tree和css ruletree來構造rendering tree（渲染樹）（不包含header等不需要顯示的東西），也 就是將css rule加到每乙個dom結點上（或者叫做frame）。定位座標和大小，是否換行等。
④ 繪製：最後呼叫作業系統的native gui的api繪製。
前後端渲染的區別：
前端渲染：
指的是後端返回json資料，前端利用預先寫的html模板，迴圈讀取json資料，拼接字串，並插入頁面。
好處：網路傳輸資料量小。不占用服務端運算資源（解析模板），模板在前端（很有可能僅部分在前端），改結構變互動都前端自己來了，改完自己調就行。
壞處：前端耗時較多。占用（一部分、少部分）客戶端運算資源（解析模板）。前端**多點，畢竟包含模板**了麼。
後端渲染：
前端請求，後端用後台模板引擎直接生成htm，前端接受到資料之後，直接插入頁面。
好處：前端耗時少，即減少了首屏時間，模板統一在後端。前端（相對）省事，不占用客戶端運算資源（解析模板）
壞處：占用伺服器資源。
前後端渲染詳解
訪問網頁時，先請求到 html 內容，並渲染出來。然後根據需要傳送 ajax 請求獲取後台返回的資料來更新頁面。區域性重新整理。無需每次都進行完整頁面請求 懶載入。如在頁面初始時只載入可視區域內的資料，滾動後rp載入其它資料，可以通過 react lazyload 實現 富互動。使用 js 實現各種...
nginx渲染動態頁面實現前後端分離
之前偶然聽人提起使用nginx渲染頁面而不是使用freemarker渲染，有些不理解nginx是如何渲染的，於是做了乙個簡單的嘗試。以下是本次嘗試的demo。服務端就是乙個正常的spring介面 controller user slf4j public class usercontroller 前端...
後端渲染資料到頁面
1 在建立的資料夾下建好相應檔案，如html，js，json等 2 在資料夾下開啟終端，輸入命令 npm init y，初始化生成package.json檔案 3 使用express包建立介面，安裝express,命令為 npm i express d4 在js檔案中引入express，語句為 co...