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

一：ssr：服務端渲染（server side render）

將元件或頁面通過伺服器生成html字串，再傳送到瀏覽器，簡單理解下來，發了乙個請求，伺服器返回的不是介面資料，而是一整個頁面的html結構，再結合介面之前定義的css把頁面展示出來；vue 伺服器渲染文件。

ssr優點

例如seo–因為訪問乙個請求，返回的就是頁面全部的html結構，包含所需要呈現的所有資料，於是有利於搜尋引擎或者爬蟲的資料抓取；

目前使用mvvm架構的專案，大都是前後端分離，資料都是動態生成，不利於seo優化；

利於首屏渲染效能高–首屏的頁面載入來自於伺服器，不依賴與服務端的介面請求再資料處理；

ssr缺點

效能全都依賴於伺服器

前端介面開發可操作性不高

通常伺服器的資源瓶頸主要有下面幾個：

通過介面請求資料，前端通過js動態處理和生成頁面需要的結構和頁面展示

csr 優點

fp最快

客戶端體驗較好，因為在資料沒更新之前，頁面框架和元素是可以在dom生成的

在csr的fp術語之間，和fp相類似的術語還有：fcp和fmp；

fcp：包含頁面的基本框架，但沒有資料內容。以vue為例，每個template中的div框架，對應vue生命週期的mounted

fmp：包含頁面所有元素及資料。以vue為例，通過介面更新到頁面的資料後完整的頁面展示；對應vue的生命週期中的updated

不利於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的解析，減少使用者等待時間，提高使用者體驗。

gzip頁面壓縮，像伺服器傳送壓縮檔案，同時伺服器需要設定解析

摘錄自：