queueing 优化_简单聊聊网页的资源加载优化

移动开发中很重要的一块是资源的加载优化。移动开发由于网速低带宽，高延迟，移动设备小内存，低处理器性能的原因，因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期。

前段时间做了相关方面的优化，发现网上的中文教程比较少，都是照着chrome开发者网站上一步一步看下来，找问题来解决，因此将部分有用的网页整理翻译了一下。

一、查看网页加载速度

网页加载时长受到网速影响，一般采用浏览器模拟一个特定网速进行测试，这样优化前与优化后的结果会有一个较准确的对比。

方法：打开调试面板—选择网速，一般我们移动测试用的是regular 3g.然后刷新页面，开始查看页面加载时间。

资源加载顺序与耗时就会依次显示出来，红线表示DOM加载的时间。

二、资源加载的顺序与说明

资源请求的生命周期如下：

重定向 - 应用程序缓存 - DNS - TCP - 请求 - 响应

对于某一个资源，点击资源加载进度条可以看到具体每一阶段的加载时间。或者可以在console面板中，通过timing api获取。

performance.getEntriesByType('resource').filter(item => item.name.includes("style.css"))

具体解