傳統的DOM渲染方式？

1.什麼是DOM渲染？

　　DOM渲染指的是對於瀏覽器中展示給用戶的DOM文檔的生成的過程。

2.DOM渲染的演化過程，大體能夠分爲能夠分爲三個階段：

• 純後端渲染：
  • 　　DOM樹的生成徹底是在後端服務器中完成的，後端服務器的程序會把須要的數據拼合成一個相似於前端DOM節點組成的DOM樹，並轉化成字節流做爲HTTP Response的body返回瀏覽器
• 純前端渲染：
  • 　　前端渲染把DOM生成的主體邏輯都放在前端，後端以後返回一個框架的DOM結構，而後由js代碼把頁面的主題渲染到框架中。能夠解決後端渲染中出現的各類體驗問題。
• 服務端的js渲染結合前端渲染:
  • 　　主要是把前兩個階段中，一些交給純後端DOM渲染邏輯分離的很差，可是交給純前端DOM渲染又會形成較高延遲的部分單獨分離出來造成了一獨立DOM渲染階段，保留的代碼中自然的展現層和數據層的分離，又把API請求的累計延遲減小了不少，從SEO角度來講渲染結果對搜索引擎也很友好。固然，這樣的作法須要給總體的架構增長一個獨立的單元，給開發和部署都帶來了更高複雜性。

（1）.純後端渲染：採用這樣的渲染方式，就是每個頁面中，在Chrome中展開獲得的DOM，和服務器返回的DOM是基本一致的（能夠經過查看網頁源代碼來獲得服務器返回的DOM）。固然，這裏是「基本」一致，由於實際操做中，頁面或多或少仍是會帶有一些js代碼，而且在瀏覽器端中運行這些js代碼來對DOM進行的渲染，不過這一部分js代碼並不影響DOM的主體是由服務端返回的。純後端的DOM渲染，DOM樹的生成徹底是在後端服務器中完成的，至關於後端服務器的程序會把各類的數據拼成一個DOM樹，並轉換成一個字節流做爲HTTP Response的body返回給瀏覽器。

（2）純前端渲染：純前端渲染能夠解決純後端渲染中出現的各類體驗問題。純前端渲染把DOM生成的主題邏輯都放在了前端，這時後端只會返回一個框架的DOM結構，好比只帶一個容器元素的的DOM，而後由js代碼把頁面的主題渲染到這個容器元素中。

（3）服務端的js渲染結合前端渲染：目前是最適於提供最優的使用體驗，但不必定開發中最好的方式，在不一樣的地方，根據不一樣的方法來解決。

瀏覽器會解析三個東西：

（1）一個是HTML/SVG/XHTML，事實上，Webkit有三個C++的類對應這三類文檔。解析這三種文件會產生一個DOM Tree。
CSS，解析CSS會產生CSS規則樹。
Javascript，腳本，主要是經過DOM API和CSSOM API來操做DOM Tree和CSS Rule Tree.
 （2）解析完成後，瀏覽器引擎會經過DOM Tree 和 CSS Rule Tree 來構造 Rendering Tree。注意：
Rendering Tree 渲染樹並不等同於DOM樹，由於一些像Header或display:none的東西就不必放在渲染樹中了。
CSS 的 Rule Tree主要是爲了完成匹配並把CSS Rule附加上Rendering Tree上的每一個Element。也就是DOM結點。也就是所謂的Frame。
而後，計算每一個Frame（也就是每一個Element）的位置，這又叫layout和reflow過程。
 （3）最後經過調用操做系統Native GUI的API繪製。