服務端渲染（SSR）和客戶端（CSR）渲染的區別

SSR：Server side render

將組件或頁面經過服務器生成html字符串，再發送到瀏覽器，簡單理解下來，發了一個請求，服務器返回的不是接口數據，而是一整個頁面的HTML結構，再結合界面以前定義的CSS把頁面展現出來；VUE 服務器渲染文檔

SSR優勢

例如SEO（搜過引擎優化）–由於訪問一個請求，返回的就是頁面所有的HTML結構，包含所須要呈現的全部數據，因而例如搜索引擎或者爬蟲的數據抓取；
目前使用MV*架構的項目，大都是先後端分離，數據都是動態生成，不利於SEO優化

利於首屏渲染性能高–首屏的頁面加載來自於服務器，不依賴與服務端的接口請求再數據處理；

SSR缺點

性能全都依賴於服務器
前端界面開發可操做性不高

CSR：Client side render

經過接口請求數據，前端經過JS動態處理和生成頁面須要的結構和頁面展現

CSR 優勢

FP最快
客戶端體驗較好，由於在數據沒更新以前，頁面框架和元素是能夠在dom生成的

在CSR的FP術語之間，和FP相相似的術語還有：FCP和FMP；

FP：僅有一個 div 根節點。以VUE爲例，div#app 註冊一個空的div
FCP：包含頁面的基本框架，但沒有數據內容。以VUE爲例，每一個template中的div框架，對應VUE生命週期的mounted
FMP：包含頁面全部元素及數據。以VUE爲例，經過接口更新到頁面的數據後完整的頁面展現；對應VUE的生命週期中的updated

CSR的缺點

不利於SEO–爬蟲數據很差爬呀~~
總體加載完速度慢

優化首屏加載，減小白屏時間，提高加載性能：

加速或減小HTTP請求損耗：使用CDN加載公用庫，使用強緩存和協商緩存，使用域名收斂，小圖片使用Base64代替，使用Get請求代替Post請求，設置 Access-Control-Max-Age 減小預檢請求，頁面內跳轉其餘域名或請求其餘域名的資源時使用瀏覽器prefetch預解析等；
延遲加載：非重要的庫、非首屏圖片延遲加載，SPA的組件懶加載等；
減小請求內容的體積：開啓服務器Gzip壓縮，JS、CSS文件壓縮合並，減小cookies大小，SSR直接輸出渲染後的HTML等；
瀏覽器渲染原理：優化關鍵渲染路徑，儘量減小阻塞渲染的JS、CSS；
優化用戶等待體驗：白屏使用加載進度條、loading圖、骨架屏代替等；

以上優化方案的中的技術術語

強緩存和協商緩存
強緩存是利用http頭中的Expires和Cache-Control兩個字段來控制的，用來表示資源的緩存時間
協商緩存：瀏覽器第一次請求一個資源的時候，服務器返回的header中會加上Last-Modify，Last-modify是一個時間標識該資源的最後修改時間；當瀏覽器再次請求該資源時，request的請求頭中會包含If-Modify-Since，該值爲緩存以前返回的Last-Modify。服務器收到If-Modify-Since後，根據資源的最後修改時間判斷是否命中緩存；其中Etag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識

Access-Control-Max-Age：緩存能夠被緩存的時間

DNS 預解析：瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行DNS的解析，減小用戶等待時間，提升用戶體驗。
<link rel="dns-prefetch" href="www.ytuwlg.iteye.com" />

Gzip頁面壓縮，像服務器發送壓縮文件，同時服務器須要設置解析