簡介：
項目前台框架：Angular2 + Bootstrap（日期等組件） + Echarts + 響應式（包括頁面、字體縮放：rem）
chrome版本：多個版本測試均有此問題。
表現：
- 訂單詳情頁面崩潰(喔唷，崩潰啦！顯示此網頁出了點問題) F12中Network提示：Debugging connection was closed.Reason:Render process gone. Reconnect when ready by reopening DevTools.
- 查看具體xhr請求，兩種狀態；a.狀態 200 ok,無返回，該頁面其他請求也均無返回；b.請求一直在pending，無返回。
- 控制台無報錯。
重現規律：
- 初步：未支付的訂單，從訂單列表頁面進入到訂單詳情頁會出現此問題。
- 深度：訂單列表頁面狀態為waiting Payment或者In Process狀態的訂單。
定位思路：
- 據表現2，后台定位，無問題，打印數據已查出；
- filter層定位（是否filter出問題無返回），filter查看打日志，定位，均無報錯，無發現問題；
- 據表現“Debugging connection was closed.Reason:Render process gone. Reconnect when ready by reopening DevTools”查詢，可能是文件大小，或者什么導致，與后台確認，返回json不是特別大。
https://stackoverflow.com/questions/46855911/getting-error-debugging-connection-was-closed-reason-render-process-gone中 render process ended給了思路，是什么導致render process ended?方向應該是前台渲染
- 查詢chrome《網頁崩潰原因》，有沒有什么導致內存泄露？檢查代碼
- 訂單詳情頁面查看代碼，沒有發現可能導致內存泄露的代碼。試着注釋掉對於后台返回數據的接收，發現后台有返回了！！！注：是否因為數據量過大（ng2的數據綁定）導致頁面渲染出現問題？
- 對后台返回數據重新進行處理，拆分，及時釋放不用的變量。注：問題還是存在，可以確定不是數據量多大，ng2框架渲染問題。排除應該為數據原因觸發。
- postman取出一個訂單，未支付、支付兩種狀態的數據，對比，發現幾個字段不同。對於未支付訂單，后台接收到數據之后逐一更改，發現status字段改動為支付狀態的值，問題會好。注：追蹤前台對這一字段做何處理？發現為調用一公共進度條組件導致。
- 斷點跟蹤該公共組件，發現其中一段代碼該狀態下進入死循環。改動此代碼，測試waiting Payment或者In Process狀態下網頁是否ok，確實ok，可確認問題由此死循環導致。