明确什麼是服務端渲染？
頁面上的内容是由伺服器生産的
正常頁面渲染面臨的問題：
1、腳本依賴，加載耗時
藍色(
Loading
)：網絡通信和HTML解析
黃色(
Scripting
)：
JavaScript執行
紫色(
Rendering
)：樣式計算和布局，即重排
綠色(
Painting
)：重繪
灰色(
other
)：其它事件花費的時間
白色(
Idle
)：空閑時間
事件總結：
Loading事件
事件描述
Parse HTML
浏覽器執行HTML解析
FinishLoading
網絡請求完畢事件
ReceiveData
請求的響應資料到達事件，如果響應資料很大（拆包），可能會多次觸發該事件
ReceiveResponse
響應頭封包到達時觸發
SendRequest
發送網絡請求時觸發
Scripting事件
事件描述
Animation Frame Fired
一個定義好的動畫幀發生并開始回調處理時觸發
Cancel Animation Frame
取消一個動畫幀時觸發
GC Event
垃圾回收時觸發
DOMContentLoaded
當頁面中的DOM内容加載并解析完畢時觸發
Evaluate Script
A script was evaluated.
Event
js事件
Function Call
隻有當浏覽器進入到js引擎中時觸發
Install Timer
建立計時器（調用setTimeout()和setInterval()）時觸發
Request Animation Frame
A requestAnimationFrame() call scheduled a new frame
Remove Timer
當清除一個計時器時觸發
Time
調用console.time()觸發
Time End
調用console.timeEnd()觸發
Timer Fired
定時器激活回調後觸發
XHR Ready State Change
當一個異步請求為就緒狀态後觸發
XHR Load
當一個異步請求完成加載後觸發
Rendering事件
事件描述
Invalidate layout
當DOM更改導緻頁面布局失效時觸發
Layout
頁面布局計算執行時觸發
Recalculate style Chrome
重新計算元素樣式時觸發
Scroll
内嵌的視窗滾動時觸發
Painting事件
事件描述
Composite Layers
Chrome的渲染引擎完成圖檔層合并時觸發
Image Decode
一個圖檔資源完成解碼後觸發
Image Resize
一個圖檔被修改尺寸後觸發
Paint
合并後的層被繪制到對應顯示區域後觸發
典型場景
首屏渲染，資源過重，加載慢
多層次優化方案：
1，建構層模闆編譯
，即将模闆編譯拆分出runtime,在建構層面作模闆編譯，提升runtime速度
2，公共資料的prerender
，即将公用的頁面在建構時進行資料渲染且編譯出靜态模闆，提升runtime速度
3，服務端渲染(ssr)，
如服務端采用nodejs服務，同樣的js執行環境，可以在Node服務端執行vue架構，編譯出靜态頁面，使用者請求可以直接傳回在服務端已經編譯生成的html靜态模闆，省去了用戶端，加載編譯執行等過程，提升互動體驗（
優點：
提升互動體驗，平衡前後端的運算壓力。
缺點：
提升公司内部系統架構的複雜度，降低了開發效率，增加了服務端的負載）
案例demo01
- 1、建立檔案夾，初始化一個項目：
npm init
- 2、安裝生産依賴架構，以express為例:
cnpm install express
- 3、建立
src
server
index.js
- 4、index.js 看響應資料就是服務端直接傳回的靜态模闆
web性能優化系列(5)react-ssr
看源碼跟index.js傳回的靜态模闆一模一樣
總結：這就是所謂的服務端渲染，對于浏覽器來說，隻需要将請求回來的資料渲染出來即可，不用進行任何的腳本計算，不會對浏覽器造成額外的加載負擔（如scripting，loading，Painting），提升體驗
那麼什麼是用戶端渲染呢？
即依賴浏覽器的解析能力，通過解析之後進行渲染，這個過程依賴浏覽器各種能力力，如：
此時重新整理浏覽器會出現WORD
但是此時如果你把浏覽器
禁用js
，那麼WORD就不會渲染出來，這說明頁面渲染以來了浏覽器自身解析js的能力。
以上是一個原生js的demo=============邪惡的分割線
基于reactjs的ssr的基礎使用
- 1，安裝reactjs ：
cnpm install react react-dom -S
- 2，安裝打包工具：
cnpm install webpack webpack-cli -D
- 3，安裝轉碼工具：
cnpm install babel-loader @babel/core @babel/preset-env @babel/preset-react -D
- 4，然後在src下建立containers檔案夾，用于存放組建demo
- 5，然後建立第一個組建：建立Home檔案并建立index.js
containers/Home/index.js
在服務端使用renderTostring将元件轉換成字元串一起渲染到用戶端
打包測試：建立webpack.config.js檔案
坑：
在打包server端js檔案時，比如fs,path…這些引入的檔案，是nodejs的核心子產品，node環境提供直接引入，打包不了也不需要打包，是以我們要在打包是聲明直接排除這些不用打包的檔案
是以安裝一個webpack打包時檢測核心子產品的插件：
cnpm install webpack-node-externals -D
使用watch方法監聽檔案webpack.config.js的變化，一旦變化就會重新執行打包
結果檢視源代碼：元件渲染出來了
也是服務端直接響應過來了
優化啟動流程：
隻監聽了webpack，文檔變化重新打包，但是重新整理頁面并不生效，原因是node此時并未重新執行新打包的檔案
解決：1、安裝node管理器：cnpm i nodemon -g
2、安裝 npm-run-all:cnpm i npm-run-all -g //批量執行腳本
3、修改package.json
此時：修改代碼直接‘重新整理頁面即時生效’
以上隻是一個靜态渲染，那麼SSR的事件是怎麼回事呢？？？
1、接上面代碼在containers裡面建立元件Counter,并在Counter建立index.js
2、安裝将類屬性文法轉成es5的插件：
cnpm install @babel/plugin-proposal-class-properties
并将其配置到
webpack.config.js
的
plugins
中如：
Counter/index.js
/server/index.js
此時并沒有執行計數功能…服務端渲染居然搞不定頁面事件綁定…
注意：服務端渲染處理什麼？單頁面應用的首屏dom結構渲染，而事件綁定都是用戶端在處理，核心是什麼？renderToString（）
那麼真的要綁定事件我們應該怎麼做呢？
- 伺服器端運作React代碼渲染出HTML
- 伺服器把渲染出的HTML頁面發送給了浏覽器
- 浏覽器接受到HTML會渲染到頁面上
- 浏覽器發現頁面引用的index.js檔案會去下載下傳
- 浏覽器下載下傳得到的index.js檔案并在浏覽器端執行
- 浏覽器中的代碼接管了頁面的所有内容，後面和用戶端渲染是一樣
- 建立client檔案夾并添加Index.js
- 建立webpack.client.js用來添加client的打包規則
- 建立變更原webpack.config.js為webpack.server.js
- 建立webpack.base.js 用來存放用戶端和服務端的公用的打包規則
web性能優化系列(5)react-ssr /client/index.js
webpack.base.js
此時問題，既然有base公用檔案，那麼怎麼引用呢？安裝：webpack-merge 指令：cnpm install webpack-merge
/webpack.client.js
/webpack.server.js
修改package.json的運作指令
那如何讓服務端渲染出來的頁面和引入的client端寫好的事件包産生關系呢？ 靜态檔案中間件
運作項目：此時事件綁定成功
…未完待續…