引言
今天木有引言嚶嚶嚶
瀏覽器渲染原理及流程
瀏覽器內核分兩個部分：渲染引擎、JS引擎
解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹
- DOM Tree：瀏覽器將HTML解析成樹形的數據結構。
- CSS Rule Tree：瀏覽器將CSS解析成樹形的數據結構。
- Render Tree: DOM和CSSOM合併後生成Render Tree。
- layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係，從而去計算出每個節點在屏幕中的位置。
- painting: 按照算出來的規則，通過顯卡，把內容畫到屏幕上。
- reflow（迴流）：當瀏覽器發現某個部分發生了點變化影響了佈局，需要倒回去重新渲染，內行稱這個回退的過程叫 reflow。reflow 會從 這個 root frame 開始遞歸往下，依次計算所有的結點幾何尺寸和位置。reflow 幾乎是無法避免的。現在界面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。鼠標滑過、點擊……只要這些行爲引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響着。
- repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變
服務端渲染
主要原因：1、提升頁面性能（首屏渲染） 2、對頁面SEO性能優化
簡而言之就是服務端渲染能夠直接返回比較完整的HTML文件，瀏覽器便能直接渲染出頁面，使得在下載js文件運行react的時候，頁面已經顯示，沒有那麼容易白屏！
不過有三個點需要注意：
-
雖然能夠很快渲染出頁面，但是沒有執行react時頁面無法進行交互
-
獲取第一個字節時會更加慢一點，由於ssr需要將完整的渲染過的文件傳回browser，而csr只需要返回字節相對較少的json文件即可
-
對服務器的吞吐量產生影響，ReactDOMServer.renderToString
例如
ReactDOMServer.renderToString的特點就是： 1>同步方法 2>獨享CPU 3>阻塞事件循環流程
預渲染
就像官網所說的，如果你調研服務端渲染的目的是用來改善少數營銷頁面的SEO，那麼我們需要的可能是預渲染
區別
SSR和預渲染使用場景還是有很大的區別的，預渲染使用場景更多的時我們所說的靜態頁面的形成，預渲染的使用場景更多是我們所說的靜態頁面的形式，而服務端渲染適用於大型的、與服務端有數據交互的功能型網站，一個明顯的使用場景就是電商網站。
如何使用：prerender-spa-plugin