前后端分離這個概念是什么呢？
前后端分離並非僅僅只是一種開發模式，而是一種架構模式（前后端分離架構）。千萬不要以為只有在擼代碼的時候把前端和后端分開就是前后端分離了，需要區分前后端項目。前端項目與后端項目是兩個項目，放在兩個不同的服務器，需要獨立部署，兩個不同的工程，兩個不同的代碼庫，不同的開發人員。前后端工程師需要約定交互接口，實現並行開發，開發結束后需要進行獨立部署，前端通過ajax來調用http請求調用后端的restful api。前端只需要關注頁面的樣式與動態數據的解析&渲染，而后端專注於具體業務邏輯。
在前后端分離的時代，前端工作人員主要負責什么工作呢？
1、拿到UI給的設計圖用HTML進行高度還原
2、與后端約定接口&數據&參數
3、前后端集成，請求后端提供的API接口獲取數據
4、前端頁面調整
這些是我在前端工作過程中，需要負責的事。用一句話來總結前端的工作就是：前端追求的是，頁面表現，速度流暢，兼容性，用戶體驗等等。
既然目前已經做到了前后端分離，那么對於前端工程師需要把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多線程，模塊化，面向切面編程，設計模式，瀏覽器兼容性，性能優化等等。
前后分離的優勢
1、可以實現真正的前后端解耦，前端服務器使用nginx。前端/WEB服務器放的是css，js，圖片等等一系列靜態資源（甚至你還可以css，js，圖片等資源放到特定的文件服務器，例如阿里雲的oss，並使用cdn加速），前端服務器負責控制頁面引用&跳轉&路由，前端頁面異步調用后端的接口，后端/應用服務器使用tomcat（把tomcat想象成一個數據提供者），加快整體響應速度。（這里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）
2、發現bug，可以快速定位是誰的問題，不會出現互相踢皮球的現象。頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本錯誤，頁面樣式等問題，全部由前端工程師來負責。接口數據出錯，數據沒有提交成功，應答超時等問題，全部由后端工程師來解決。雙方互不干擾，前端與后端是相親相愛的一家人。
3、在大並發情況下，我可以同時水平擴展前后端服務器，比如淘寶的一個首頁就需要2000+台前端服務器做集群來抗住日均多少億+的日均pv。（去參加阿里的技術峰會，聽他們說他們的web容器都是自己寫的，就算他單實例抗10萬http並發，2000台是2億http並發，並且他們還可以根據預知洪峰來無限拓展，很恐怖，就一個首頁。。。）
4、減少后端服務器的並發/負載壓力。除了接口以外的其他所有http請求全部轉移到前端nginx上，接口的請求調用tomcat，參考nginx反向代理tomcat。且除了第一次頁面請求外，瀏覽器會大量調用本地緩存。
5、即使后端服務暫時超時或者宕機了，前端頁面也會正常訪問，只不過數據刷不出來而已。
6、也許你也需要有微信相關的輕應用，那樣你的接口完全可以共用，如果也有app相關的服務，那么只要通過一些代碼重構，也可以大量復用接口，提升效率。（多端應用）
7、頁面顯示的東西再多也不怕，因為是異步加載。
8、nginx支持頁面熱部署，不用重啟服務器，前端升級更無縫。
9、增加代碼的維護性&易讀性（前后端耦在一起的代碼讀起來相當費勁）。
10、提升開發效率，因為可以前后端並行開發，而不是像以前的強依賴。
11、在nginx中部署證書，外網使用https訪問，並且只開放443和80端口，其他端口一律關閉（防止黑客端口掃描），內網使用http，性能和安全都有保障。
12、前端大量的組件代碼得以復用，組件化，提升開發效率，抽出來！
原文鏈接：https://blog.csdn.net/qq_40128701/article/details/91360639