网页偶现性崩溃-chrome

简介：

项目前台框架：Angular2 + Bootstrap（日期等组件） + Echarts + 响应式（包括页面、字体缩放：rem）

chrome版本：多个版本测试均有此问题。

表现：

1. 订单详情页面崩溃(喔唷，崩溃啦！显示此网页出了点问题) F12中Network提示：Debugging connection was closed.Reason:Render process gone. Reconnect when ready by reopening DevTools.
2. 查看具体xhr请求，两种状态；a.状态 200 ok,无返回，该页面其他请求也均无返回；b.请求一直在pending，无返回。
3. 控制台无报错。

重现规律：

1. 初步：未支付的订单，从订单列表页面进入到订单详情页会出现此问题。
2. 深度：订单列表页面状态为waiting Payment或者In Process状态的订单。

定位思路：

1. 据表现2，后台定位，无问题，打印数据已查出；
2. filter层定位（是否filter出问题无返回），filter查看打日志，定位，均无报错，无发现问题；
3. 据表现“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?方向应该是前台渲染

1. 查询chrome《网页崩溃原因》，有没有什么导致内存泄露？检查代码
2. 订单详情页面查看代码，没有发现可能导致内存泄露的代码。试着注释掉对于后台返回数据的接收，发现后台有返回了！！！注：是否因为数据量过大（ng2的数据绑定）导致页面渲染出现问题？
3. 对后台返回数据重新进行处理，拆分，及时释放不用的变量。注：问题还是存在，可以确定不是数据量多大，ng2框架渲染问题。排除应该为数据原因触发。
4. postman取出一个订单，未支付、支付两种状态的数据，对比，发现几个字段不同。对于未支付订单，后台接收到数据之后逐一更改，发现status字段改动为支付状态的值，问题会好。注：追踪前台对这一字段做何处理？发现为调用一公共进度条组件导致。
5. 断点跟踪该公共组件，发现其中一段代码该状态下进入死循环。改动此代码，测试waiting Payment或者In Process状态下网页是否ok，确实ok，可确认问题由此死循环导致。