前后端分離指的是什么意思

這篇文章主要介紹前后端分離指的是什么意思，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

前后端分離的意思是：前后端分離并非僅僅只是一種開(kāi)發(fā)模式，而是一種架構(gòu)模式，前后端分離已成為互聯(lián)網(wǎng)項(xiàng)目開(kāi)發(fā)的業(yè)界標(biāo)準(zhǔn)使用方式，通過(guò)【nginx+tomcat】的方式，也可以中間加一個(gè)nodejs，有效的進(jìn)行解耦。

前后端分離的意思是：

一.前后端混合的開(kāi)發(fā)模式（SSR）

1.SSR的優(yōu)勢(shì)

1、更好的 SEO，由于搜索引擎爬蟲(chóng)抓取工具可以直接查看完全渲染的頁(yè)面。

2、更快的內(nèi)容到達(dá)時(shí)間 (time-to-content)，特別是對(duì)于緩慢的網(wǎng)絡(luò)情況或運(yùn)行緩慢的設(shè)備。無(wú)需等待所有的 JavaScript 都完成下載并執(zhí)行，才顯示服務(wù)器渲染的標(biāo)記，所以你的用戶將會(huì)更快速地看到完整渲染的頁(yè)面。通?？梢援a(chǎn)生更好的用戶體驗(yàn)，并且對(duì)于那些「內(nèi)容到達(dá)時(shí)間(time-to-content) 與轉(zhuǎn)化率直接相關(guān)」的應(yīng)用程序而言，服務(wù)器端渲染 (SSR) 至關(guān)重要。

3. 流程：

1）客戶端給服務(wù)器發(fā)送請(qǐng)求，服務(wù)器返回頁(yè)面的html和數(shù)據(jù)（模板引擎）。

2.SSR的局限

1.服務(wù)端壓力較大

本來(lái)是通過(guò)客戶端完成渲染，現(xiàn)在統(tǒng)一到服務(wù)端node服務(wù)去做。尤其是高并發(fā)訪問(wèn)的情況，會(huì)大量占用服務(wù)端CPU資源；

2.開(kāi)發(fā)條件受限

在服務(wù)端渲染中，只會(huì)執(zhí)行到componentDidMount之前的生命周期鉤子，因此項(xiàng)目引用的第三方的庫(kù)也不可用其它生命周期鉤子，這對(duì)引用庫(kù)的選擇產(chǎn)生了很大的限制；

3.學(xué)習(xí)成本相對(duì)較高

除了對(duì)webpack、React要熟悉，還需要掌握node、Koa2等相關(guān)技術(shù)。相對(duì)于客戶端渲染，項(xiàng)目構(gòu)建、部署過(guò)程更加復(fù)雜。

二.衰弱前端+后端分離(利用ajax)

1.優(yōu)勢(shì)

前端不會(huì)嵌入任何后臺(tái)代碼，前端專(zhuān)注于HTML、CSS、JS的開(kāi)發(fā)，不依賴于后端。自己還能夠模擬Json數(shù)據(jù)來(lái)渲染頁(yè)面。發(fā)現(xiàn)Bug，也能迅速定位出是誰(shuí)的問(wèn)題

2.局限

1）JS存在大量冗余，在業(yè)務(wù)復(fù)雜的情況下，頁(yè)面的渲染部分的代碼，非常復(fù)雜；

2）在Json返回的數(shù)據(jù)量比較大的情況下，渲染的十分緩慢，會(huì)出現(xiàn)頁(yè)面卡頓的情況；

3）SEO（ Search Engine Optimization，即搜索引擎優(yōu)化）非常不方便，由于搜索引擎的爬蟲(chóng)無(wú)法爬下JS異步渲染的數(shù)據(jù)，導(dǎo)致這樣的頁(yè)面，SEO會(huì)存在一定的問(wèn)題；

4）資源消耗嚴(yán)重，在業(yè)務(wù)復(fù)雜的情況下，一個(gè)頁(yè)面可能要發(fā)起多次HTTP請(qǐng)求才能將頁(yè)面渲染完畢?？赡苡腥瞬环?，覺(jué)得PC端建立多次HTTP請(qǐng)求也沒(méi)啥。那你考慮過(guò)移動(dòng)端么，知道移動(dòng)端建立一次HTTP請(qǐng)求需要消耗多少資源么？

3.流程

1、打開(kāi)web，加載基本資源，如CSS，JS等；

2、發(fā)起一個(gè)Ajax請(qǐng)求再到服務(wù)端請(qǐng)求數(shù)據(jù)，同時(shí)展示loading；

3、得到j(luò)son格式的數(shù)據(jù)后再根據(jù)邏輯選擇模板渲染出DOM字符串；

4、將DOM字符串插入頁(yè)面中web view渲染出DOM結(jié)構(gòu)；

三.組件化開(kāi)發(fā)前端+后端分離（SPA）

1.優(yōu)勢(shì)

1.提升頁(yè)面切換體驗(yàn)

2.降低切換時(shí)間

3.易于部署&前后端分離

4.但是也帶來(lái)一系列性能問(wèn)題：

2.局限

1.初始加載腳本較大

2.首屏空白時(shí)間較長(zhǎng)

3.頁(yè)面返回時(shí)，數(shù)據(jù)被動(dòng)重新拉取

3.流程

1）瀏覽器請(qǐng)求服務(wù)器端的NodeJS；

2）NodeJS再發(fā)起HTTP去請(qǐng)求JSP；

3）JSP依然原樣API輸出JSON給NodeJS；

4）NodeJS收到JSON后再渲染出HTML頁(yè)面；

5）NodeJS直接將HTML頁(yè)面flush到瀏覽器；

總結(jié)：

從經(jīng)典的JSP+Servlet+JavaBean的MVC時(shí)代，到SSM（Spring + SpringMVC + Mybatis）和SSH（Spring + Struts + Hibernate）的Java 框架時(shí)代，再到前端框架（KnockoutJS、AngularJS、vueJS、ReactJS）為主的MV*時(shí)代，然后是Nodejs引領(lǐng)的全棧時(shí)代，技術(shù)和架構(gòu)一直都在進(jìn)步。雖然“基于NodeJS的全棧式開(kāi)發(fā)”模式很讓人興奮，但是把基于Node的全棧開(kāi)發(fā)變成一個(gè)穩(wěn)定，讓大家都能接受的東西還有很多路要走。創(chuàng)新之路不會(huì)止步，無(wú)論是前后端分離模式還是其他模式，都是為了更方便得解決需求，但它們都只是一個(gè)“中轉(zhuǎn)站”。前端項(xiàng)目與后端項(xiàng)目是兩個(gè)項(xiàng)目，放在兩個(gè)不同的服務(wù)器，需要獨(dú)立部署，兩個(gè)不同的工程，兩個(gè)不同的代碼庫(kù)，不同的開(kāi)發(fā)人員。前端只需要關(guān)注頁(yè)面的樣式與動(dòng)態(tài)數(shù)據(jù)的解析及渲染，而后端專(zhuān)注于具體業(yè)務(wù)邏輯。

以上是前后端分離指的是什么意思的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！