如今很多公司為了提高開發效率採用前後端分離的開發模式，這是架構上的分離解耦，前後端各司其職，透過RESTful API來呼叫資料。這樣做的好處也有不少，如：

邏輯分離：業務邏輯放在後端，前端邏輯放在前端，這樣一來，資料及邏輯上都很清晰；

前後端分離部署：減輕了後端伺服器的壓力，後端伺服器不需要負責前端頁面的渲染，只負責資料處理，效能上會有所提高；

複用性較高：前後端分離本質上也是系統分離，可以做到同一個後端系統提供資料給多個前端系統，擴充套件性更高；

並行開發，提高效率：前後端並行開發，提前約定好資料格式即可（mock），提升了專案開發效率。

但是，前後端分離也帶來了一些問題，比如大家比較關注的首屏載入渲染時間的問題。

對於前後端分離會不會影響首屏載入，我想說的是，多少都是有的，但影響程度要看程式碼的質量了，只要最佳化得好，首屏載入時間不會太慢。

我們在進行前後端分離時有一些技巧來縮短首屏載入時間的，分享給大家：

前端與後端分別部署，都走CDN加速；

前端儘可能少的呼叫多個API，建議呼叫一個API閘道器來實現多個API的請求合併；

後端API域名使用單獨域名，禁止cookies傳輸；

部分資料本地快取處理；

不重要的資料惰性請求載入。

綜上，前後端分離在一定程度上是會影響首屏載入時間的，但是也有調優方案，總體上時間不會相差太多。

前後端分離會有白屏時間 這主要是因為spa應用生成首頁的js和資料的傳輸有一定時間 好在發展到現在已經有很多辦法去規避這些問題了

從時間上 就是使用cdn技術 讓資料和js更快的到達使用者端 減少等待時間 如果足夠短 是基本可以消除大部分白屏時間 甚至都感覺不到

從頁面上也有幾種方案

一種是透過service worker這一類快取方案 使得下一次訪問能夠更快拿到資料和js 減少時間

一種是透過內聯css繪製骨架屏 讓頁面有一些定西看起來沒那麼空 一般骨架屏是按照實際頁面繪製成的色塊 會有一種逐漸載入的感覺

一種是直接從伺服器入手 將那種不怎麼和後端互動或者不會因為使用者需要產生個性化的頁面在打包程式碼的同時先生成好 就能返回一個不白屏的頁面了 這稱為預渲染

最後一種是ssr 伺服器端渲染 讓node.js作為伺服器 生成好頁面再返回給瀏覽器 消除白屏

大概流行的就這幾種方案

之前在網上看到過一張調侃前後端分離的搞笑動圖（下圖所示），感覺不能在真實了。迴歸到這道問題，前後端分離是否會影響首屏載入時間？我認為是有一定影響的。

前後端分離應用有一個致命缺點，就是首屏渲染。使用者第一次開啟頁面，要透過ajax載入後端的資料，因為是首次開啟，所以要載入的資料較多，使用者就感知到了延遲；而傳統的後端渲染頁面，直接給瀏覽器返回的是已經包含要填充的資料的HTML頁面，所以幾乎不存在首屏渲染問題。

這麼說吧，伺服器渲染，HTML直出，瀏覽器載入到文件就可以開始渲染。而前後端分離，你得等框架、業務程式碼載入到了才能渲染，所以會在一定程度上影響載入速度。

首先由於前端要與後端通訊才能獲取資料，再渲染到頁面上，這個等待時間在沒有快取的情況下，一定會使首屏載入時間變慢。

我提供以下4個思路給大家分享：

1 在前後端分離的中間層使用node或者php。中間層可以做很多事情，比如路由控制，介面代理，服務端渲染等等，這裡不妨用php來進行服務端渲染，從而加快資料的獲取速度。

2 做一個loading的覆蓋頁，分散使用者的注意力，從而使其忽視載入時間長短。比如目前APP常見的開屏廣告，很多都是在wifi模式下預下載好的，然後等你下次開啟app的時候，作為首屏展示給你，在你等待廣告過去，或者去尋找那個小小的“跳過”按鈕的時候，前後端的通訊已經完成了。對於APP來說，即掙了廣告費，又不會讓使用者感覺到自己載入慢，真的是一舉兩得。

3 使用第三方元件，比如react-placeholder。

4 最佳化網路，包括減少請求數（比如不要開啟首屏的時候就傳送一堆請求給後端），減少傳輸體積（header和body中精簡資料），合理安排請求順序（比如在頁面上方的資料呼叫A介面，下方的資料呼叫B介面，那麼就要先呼叫A介面，再呼叫B介面，儘快把使用者先看到的區域資料載入好）等，透過這些方式，也能夠減少首屏的載入等待時間。