你知道早期的開發中，前後端是不分離的嗎？那麼後來它們又為什麼要“分家”呢？分離後又有什麼好處呢？
在前面一篇文章中，產品汪搞懂了前後端的工作分工。但是瞭解過程中，一個程序猿哥哥不經意間的一句話：“現在都是前後端分離的”，讓小汪感到納悶了，以前難道前後端不分離的麼？於是小汪就繼續深究起來。
不溫馨的一家人
在十幾年前，前端的地位其實相對於後端並不那麼強勢，以下是一種經典的編程框架。
MVC：Model View Controller，是模型(model)－視圖(view)－控制器(controller)的縮寫，一種軟件設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼。
有意思的事情出現了，內容是傳給用戶的，前端並不是直接接觸用戶的！前端只是提供了個樣式模板，由後端把內容嵌入進入，再由後端直接傳給用戶。
這個時候，前端的編程要各種順著後端哥哥的心意，而且前端要是出bug了，還得拉上後端一起研究，誰讓你往我的模板裡插了內容，出了么蛾子你就得負責到底。
這個時期前後端高度耦合，從編程環境、到開發調試，都必須“在一起”，對於前端來說，其實自主權就不高，對後端來說，也要懂一些前端的知識。
於是前端程序猿對後端程序猿說，要不……你只管你的業務和數據，把結果給我，我來負責組裝與呈現，這樣大家都輕鬆些。於是前後端就分離了。
當初是你要分開，分開就分開
前後端分離帶來的好處：
（1）編程更輕鬆
前後端分離之後，後端更專注於實現業務邏輯，形成一套標準化的“API接口”，例如需要創建商品，前端將商品信息傳給後端創建商品的接口，後端就會完成商品的創建，並返回創建結果。如果前端給的創建商品信息缺了標題或者價格，後端還能返回創建失敗的結果，並且提示缺失了哪些信息等。
前端除了負責界面樣式和交互，還接管了獲取和展示數據的權利，從此前端開發就自由多了，如果遇上bug，也能很輕鬆定位到是前端還是後臺的事情。
（2）更高的可複用性
前後端分離，更是順應了互聯網發展多樣化的潮流。後端通過提供一系列可以實現不同業務功能的接口，就可以讓不同的前端、甚至外部系統過來對接。
這樣方便了公司不斷推廣自己的產品，今天推出手機網頁版、明天推出APP版、後天推出小程序版本等。而後端只需要提供一次接口，無需每增加一類客戶端，後端就要新寫過。
用戶訪問網站的過程小知識：
- 瀏覽器先下載HTML的內容
- 根據HTML裡的內容，下載並加載對應的CSS，讓網頁漂亮起來
- 根據HTML裡的內容，下載並加載對應的JavaScript，讓網站具備交互動效，其中部分JavaScript代碼負責向服務器上的後端請求數據，並展示在頁面上。
但是久而久之，前後端分離在web網頁上也遇到了一些問題，最明顯的是以下兩點：
- JavaScript的請求在用戶瀏覽器中進行，當一個網站需要展示非常多的內容時，JavaScript就要向後臺多個接口請求數據，然後再在用戶瀏覽器上完成頁面組裝，這過程中就會給用戶設備的網速、設備的運行速度（CPU、內存等）帶來一定的壓力。
- 搜索引擎，如百度、搜狗、谷歌等，想爬取網頁的內容時，就會用到爬蟲。爬蟲會抓取網頁HTML裡面的內容，然後讓其他網友可以搜索到你的網頁。但是此時，HTML文件就是個框架，要依靠JavaScript才能獲取到數據。這就會導致你的網頁難以被搜索引擎收錄，用戶很可能搜不到你的網頁。
前後端分離為用戶設備帶來的影響，可以通過“換臺新手機”、“換臺新電腦”解決，但是搜索引擎爬不到網頁的數據，對很多重度依賴搜索引擎流量的產品來講，打擊可就大了。
例如你需要找一個菜譜的時候，可能會在百度搜索“芥藍怎麼炒好吃？”，然後再從搜索結果裡面訪問各種美食網站。又或者你想去哪裡玩，就會在百度搜索“土耳其旅遊攻略”等等。對於這類重搜索引擎流量的網站而言，如果爬蟲爬不到自己的數據，客流損失就比較嚴重。
運行在後面的前端
考慮到上訴問題，聰明的網頁前端程序猿就想到了一個新的辦法，那我們先把後臺的數據跟HTML內容整合好，再呈現給用戶吧，得力於一種叫做Node.JS的、可以使用網頁前端熟悉的JavaScript編程的工具，於是有了2.0版本的前後端分離。
前端程序猿跟服務器上的後端說，讓一讓，給我騰個地兒，然後把Node.JS放在了服務器上。等用戶或者爬蟲需要訪問網頁時，這個運行在服務器上的程序，先請求後端獲得數據，並整合到HTML中，然後再返回給用戶。
這樣一來，用戶的設備就少了JavaScript多次請求後端的煩惱，加快了運行速度，而爬蟲也可以爬取到填充好內容的HTML網頁了。
看到這裡，小汪就想，這麼一來，用戶體驗、爬蟲的問題確實解決了，但是讓本來本該發生在用戶瀏覽器上的事情，都在服務器上做了嘛，如果訪問量大的話，咱服務器的壓力不就很大了？
前端程序猿哥哥呵呵一笑，其實不然，你想想，很多用戶都是在訪問同一個網頁，看同一個商品、讀同一篇文章，這些請求，要是服務器的前端就請求後臺一次，然後把整合好的HTML保存起來，下次再有人再來訪問，就把這個生成好的HTML展示給用戶，這樣不就服務器輕鬆了、用戶訪問也快了麼！
小汪又問了，那咋們頁面多了，不就要每個頁面都保存一份HTML文件麼，服務器儲存的空間不就越來越少了麼？
前端程序猿哥哥繼續答道：久而久之，HTML文件在服務器積累多了，就把好久都沒人訪問的HTML刪了，給其他新保存的HTML文件讓位置，通過“緩存”技術，讓服務器永葆活力。
小汪恍然大悟，原來這就是緩存啊！這下子，小汪終於明白了前後端分離是什麼回事，以及為什麼要前後端分離。
現在隨著很多大型產品的形成、獨立運行，新的“信息孤島”正在形成。例如微信的公眾號-小程序-朋友圈-圈子，然後通過搜一搜進行統一搜索，內部造血，而不再依賴傳統的搜索引擎為他引流。
又例如淘寶，很多年前就拒絕了讓百度爬蟲爬取他的商品信息，只允許在淘寶內進行搜索。你在百度上搜不到淘寶的商品，在微信上也找不淘寶的任何信息、無法訪問淘寶任何的鏈接，如果你要淘寶購物，就只能去淘寶網站或者下載淘寶APP。新的互聯網格局的形成，肯定會進一步影響著前後端的關係。
本文由 @iCheer 原創發佈於人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。
閱讀更多 人人都是產品經理 的文章
