項目開發的時候,在請求后端接口時遇到 Caution: request is not finished yet!
一:Content Download有值時
當Caution: request is not finished yet!出現在Content Download有值時(如上圖值為0.84ms),就與后端和網速沒關系了,這個純屬於前端JS代碼的問題,是前端處理后端返回的數據之后耗費的時間太長了導致的。
當然這種情況大部分會出現在數據量很大的時候,解決方案:
A:分頁,減少一次拿到數據量的大小(很常規的解決方案);
B:對傳輸的數據做壓縮,可以在nginx上面進行配置;
C:當前兩種方法還是不管用的時候,就需要去優化具體的方法了。可以使用Chrome自帶的performance來定位具體是哪一個方法導致的。如下圖所示:
performance錄屏結束后打開Call Tree這個選項,找到耗時最多的一項,不斷的找下一級,排除掉vue框架自帶的耗時就可以找到耗時最多的具體方法了,然后修改 它就可以了。如果到最后查到的原因是頁面渲染導致的,就需要使用別的方法去優化了,如:大數據渲染優化,可以使用clusterize.js這個插件。
我遇到的這個問題是因為element-ui中table的屬性cell-class-name導致的,當使用cell-class-name配合方法時,內容中有大量的表格,分頁加載,從而導致每次加載 新的表格時候這個方法會重新遍歷,最終導致加載新的第二頁的時候會消耗5s,第三頁消耗15s左右,當加載到十幾頁的時候就會消耗幾分鍾。
二: Content Download沒有值時
當 Content Download還沒有值時,出現了Caution: request is not finished yet!這個就是后端接口的問題。這里就不展開描述了。