项目开发的时候,在请求后端接口时遇到 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!这个就是后端接口的问题。这里就不展开描述了。