服務端渲染和客戶端渲染的一些理解

服務端渲染 (SSR)

　　服務端在返回 html 以前，在特定的區域，符號裏用數據填充，再給客戶端，客戶端只負責解析 HTML 。

客戶端渲染(CSR)

　　html 僅僅做爲靜態文件，客戶端端在請求時，服務端不作任何處理，直接以原文件的形式返回給客戶端客戶端，而後根據 html 上的 JavaScript，生成 DOM 插入 html。

二者本質區別 

　　客戶端渲染和服務器端渲染的最重要的區別就是到底是誰來完成html文件的完整拼接，若是是在服務器端完成的，而後返回給客戶端，就是服務器端渲染，而若是是前端作了更多的工做完成了html的拼接，則就是客戶端渲染。

二者異同

• 1.渲染本質同樣，都是字符串拼接，將數據渲染進一些固定格式的html代碼中造成最終的html展現在用戶頁面上。

• 2.拼接字符串必然引發性能的消耗。

• 3.服務端渲染性能消耗在服務端，當用戶量比較多時，緩存部分數據以免過多數據重複渲染。

  4.客戶端渲染，如當下火熱的 spa 框架，Angular、React、Vue，在首次渲染時，大可能是將原 html 中的數據標記（如 {{ text }} ）替換。客戶端渲染較難的一點是數據更新之後，頁面響應式更新時如何節省資源，直接 DOM 的讀寫，是很消耗性能的。 Vue 2.0 + 有 Vnode，進行 diff 後，渲染到頁面上。

服務器端渲染的優缺點是怎樣的？

優勢：

1. 前端耗時少。由於後端拼接完了html，瀏覽器只須要直接渲染出來。
2. 有利於SEO。由於在後端有完整的html頁面，因此爬蟲更容易爬取得到信息，更有利於seo。
3. 無需佔用客戶端資源。即解析模板的工做徹底交由後端來作，客戶端只要解析標準的html頁面便可，這樣對於客戶端的資源佔用更少，尤爲是移動端，也能夠更省電。
4. 後端生成靜態化文件。即生成緩存片斷，這樣就能夠減小數據庫查詢浪費的時間了，且對於數據變化不大的頁面很是高效 。

缺點：

1. 不利於先後端分離，開發效率低。使用服務器端渲染，則沒法進行分工合做，則對於前端複雜度高的項目，不利於項目高效開發。另外，若是是服務器端渲染，則前端通常就是寫一個靜態html文件，而後後端再修改成模板，這樣是很是低效的，而且還經常須要先後端共同完成修改的動做； 或者是前端直接完成html模板，而後交由後端。另外，若是後端改了模板，前端還須要根據改動的模板再調節css，這樣使得先後端聯調的時間增長。
2. 佔用服務器端資源。即服務器端完成html模板的解析，若是請求較多，會對服務器形成必定的訪問壓力。而若是使用前端渲染，就是把這些解析的壓力分攤了前端，而這裏確實徹底交給了一個服務器。

客戶端渲染的優缺點是怎樣的？

優勢：　　

1. 先後端分離。前端專一於前端UI，後端專一於api開發，且前端有更多的選擇性，而不須要遵循後端特定的模板。
2. 體驗更好。好比，咱們將網站作成SPA或者部份內容作成SPA，這樣，尤爲是移動端，可使體驗更接近於原生app。

缺點：

1. 前端響應較慢。若是是客戶端渲染，前端還要進行拼接字符串的過程，須要耗費額外的時間，不如服務器端渲染速度快。
2. 不利於SEO。目前好比百度、谷歌的爬蟲對於SPA都是不認的，只是記錄了一個頁面，因此SEO不好。由於服務器端可能沒有保存完整的html，而是前端經過js進行dom的拼接，那麼爬蟲沒法爬取信息。 除非搜索引擎的seo能夠增長對於JavaScript的爬取能力，這才能保證seo。

使用服務器端渲染仍是客戶端渲染？

　　盲目選擇使用何種渲染方式都是耍流氓。如企業級網站，主要功能是展現沒有複雜的交互，而且須要良好的SEO，則這時咱們就須要使用服務器端渲染；而相似後臺管理頁面，交互性比較強，不須要seo的考慮，那麼就可使用客戶端渲染。

　　另外，具體使用何種渲染方法並非絕對的，好比如今一些網站採用了首屏服務器端渲染，即對於用戶最開始打開的那個頁面採用的是服務器端渲染，這樣就保證了渲染速度，而其餘的頁面採用客戶端渲染，這樣就完成了先後端分離。

首屏服務器端渲染

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

　　1.加速或減小HTTP請求損耗：使用CDN加載公用庫，使用強緩存和協商緩存，使用域名收斂，小圖片使用Base64代替，使用Get請求代替Post請求，設置 Access-Control-Max-Age 減小預檢請求，頁面內跳轉其餘域名或請求其餘域名的資源時使用瀏覽器prefetch預解析等；

　　2.延遲加載：非重要的庫、非首屏圖片延遲加載，SPA的組件懶加載等；

　　3.減小請求內容的體積：開啓服務器Gzip壓縮，JS、CSS文件壓縮合並，減小cookies大小，SSR直接輸出渲染後的HTML等；

　　4.瀏覽器渲染原理：優化關鍵渲染路徑，儘量減小阻塞渲染的JS、CSS；

　　5.優化用戶等待體驗：白屏使用加載進度條、loading圖、骨架屏代替等；

一些相關技術:

　　1.強緩存和協商緩存強緩存是利用http頭中的Expires和Cache-Control兩個字段來控制的，用來表示資源的緩存時間

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

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

　　4.DNS 預解析：瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行DNS的解析，減小用戶等待時間，提升用戶體驗。

　　5.<link rel="dns-prefetch" href="www.ytuwlg.iteye.com" />

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