在网页开发中，如果遇到页面加载缓慢，可以通过分析Chrome浏览器F12 Network面板中的Timing参数来定位问题。若大部分时间消耗在Content Download阶段，可能是因为API返回的数据量过大。例如，118KB在网络上传输，而页面加载了1.4MB的资源。这提示我们需要检查API返回的数据是否都有用，考虑进行数据字段的优化，减少不必要的传输，以提升页面加载效率。
在文章chrome浏览器F12 Network中Timing参数含义中介绍了network中的
timing各属性的含义
在实际开发中，如果页面上刷新好久还没有数据，可以看一下时间都消耗在哪个阶段，如下图，可以看到请求中大部分的时间都消耗在了content download阶段，这一点从请求后的参数中size的情况也能看出来：
接下里看一下API请求后的参数情况：
正如图中所示，118KB transferred over network和1.4MB resources loaded by the page；由此可以判断API中返回的数据是比较大的，需要确认返回的数据是否都能用上，是否需要对返回数据的字段进行优化，去掉一些不必要的数据。
resources loaded by the page统计的是前端页面加载的所有资源经过解压之后的原始大小；
transferred over network统计的为压缩后的资源总量
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
