網站的動靜分離實踐(動靜分離)

1. 動靜分離的實現思路

動靜分離是將網站靜態資源（HTML，JavaScript，CSS，img等文件）與後臺應用分開部署，提升用戶訪問靜態代碼的速度，下降對後臺應用訪問。

動靜分離的一種作法是將靜態資源部署在nginx上，後臺項目部署到應用服務器上，根據必定規則靜態資源的請求所有請求nginx服務器，達到動靜分離的目標。

1.1 靜態資源部署至CDN上

咱們的方案是直接將靜態資源所有存放在CDN服務器上。由於以前項目中的JavaScript,CSS以及img文件都是存放在CDN服務器上，將HTML文件一塊兒存放到CDN上以後，能夠將靜態資源統一放置在一種服務器上，便於前端進行維護；並且用戶在訪問靜態資源時，能夠很好利用CDN的優勢——CDN系統可以實時地根據網絡流量和各節點的鏈接、負載情況以及到用戶的距離和響應時間等綜合信息將用戶的請求從新導向離用戶最近的服務節點上。

1.2 後端API提供數據

後端應用提供API，根據前端的請求進行處理，並將處理結果經過JSON格式返回至前端。目前應用主要採用Java平臺開發，所以應用服務器主要是Tomcat服務器，如今也開始有部分應用採用 node進行開發，應用服務器也開始使用node服務器。

1.3 先後端域名

動靜分離由於靜態資源和應用服務分別部署在不一樣的服務器上，所以會面臨域名策略的選擇。

• 相同域名
  採用相同域名下，用戶請求api時能夠避免跨域所帶來的問題，相對開發更爲快速，工做量也相對小一些。

• 不一樣域名
  先後端採用不一樣域名時，須要先後端開發時兼容跨域請求的狀況，開發量相對上一種會稍多一些。解決跨域方式最經常使用的方式就是採用JSONP，還有一種解決方式使用CORS（HTTP訪問控制）容許某些域名下的跨域請求。
  目前在咱們的項目中JSONP方式更多，CORS由於須要瀏覽器支持，所以只會在APP內嵌HTML5，且須要POST方式時中使用。

採用不一樣域名的方式優勢也是很是明顯的，不一樣域名採用兩個域名服務器，不一樣的域名服務器根據請求的不一樣採用不一樣的負載均衡策略；並且不一樣域名也能夠郵箱方式前端攜帶過多的Cookie。

2. 動靜分離的實現優缺點

2.1 優勢

• api接口服務化：動靜分離以後，後端應用更爲服務化，只須要經過提供api接口便可，能夠爲多個功能模塊甚至是多個平臺的功能使用，能夠有效的節省後端人力，更便於功能維護。
• 先後端開發並行：先後端只須要關心接口協議便可，各自的開發相互不干擾，並行開發，並行自測，能夠有效的提升開發時間，也能夠有些的減小聯調時間
• 減輕後端服務器壓力，提升靜態資源訪問速度：後端不用再將模板渲染爲html返回給用戶端，且靜態服務器能夠採用更爲專業的技術提升靜態資源的訪問速度。

2.2 缺點

• 不利於網站SEO（搜索引擎優化）:搜索引擎的網絡爬蟲通常是根據url訪問頁面，獲取頁面的內容後去掉沒用的信息例如：CSS，JavaScript，而後分析剩下的文本內容；動靜分離架構模式前端數據即在是由JavaScript來完成，這就會致使網絡爬蟲獲得的信息部分丟失。在開發中能夠採用前端緩存不常常變化數據的方式來解決，只有哪些常常發生變化的數據才每次向後端請求。

• 開發量變大，先後端交流成本升高：後端api返回的數據，每每是有自身邏輯在內的，好比返回數據中的包含status（1-處理中，2-處理成功，3-處理失敗），前端須要理解status的不一樣含義，對應的前端操做須要理解（如，status =1 or status = 2，不可提交）。

• 在業務高速發展時須要慎重考慮：由於開發量變大，若是在業務開始階段，缺少前端又要求開發速度很快，就須要慎重考慮這種方式的實現成本對業務發展的影響。

3. 實現案例

這個是在公司作的內嵌到app裏的HTML5頁面