异步加载 CSS 资源
加开页面首屏显示速度使我们前端一直在追求的目标, 而 CSS 资源在这些优化中同样也是不可或缺的.
一个网站可能有一部分 CSS 资源是必须的, 他需要在页面渲染完之前就被加载完, 并和 html 一起解析, 这个暂时无法做手脚, 但是我们可以把一些非关键的 CSS 进行异步化, 也就是异步加载.
市面上有很多工具可以达到这个效果, 比如 loadCSS
这次要说的这个异步加载方式, 其实也是 loadCSS 中所用到的, 代码如下:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
代码很简单, 聪明的你, 一眼就能看懂:
初始化为针对 print 类型, 当加载完毕后, 将 media 设置为全平台应用
但是这个怎么和异步取得关系的呢?
是因为浏览器会根据 media 判断当前资源是否应用, 然后再决定优先级, 由于我们采用的是稀有的 print 类型, 所以浏览器识别后, 会把当前以不影响页面渲染的方式加载: 异步
可能会有人说起 preload,preconnection,prefetch 这类 rel, 但是由于浏览器支持度不一, 所以线上需要更多的操作去弥补他们的兼容性.
并且他们是有区别的, preload 会导致浏览器加载该资源的优先级变为最高, loadCSS 则会改为 low.
(完)
一些常用的操作
disable cache: 模拟用户第一次访问
replay xhr: 重复发送 xhr, 用于调试接口
右键 => clear browser cache: 手动清除缓存 (也有清除 cookies 的选项)
offline: 可以快速调试 pwa
network pane 支持排序, 左键点击 tab 或者右键更多选项选择
initiator: 查看当前资源的发起来源和其依赖资源. 可以使用按住 shift 去查看资源, 绿色代表发起来源, 红色代表依赖资源.
image
DOMContentLoaded & load: 获取页面解析完毕时间和资源加载完毕时间
20191228145523.PNG
蓝色代表 DOMContentLoaded, 红色代表 load
公式: loadTime = Windows.performance.timing.domContentLoadedEventEnd- Windows.performance.timing.navigationStart;
资源总大小和资源总数
20191228145837.PNG
20191228145818.PNG
常用功能字段解释
network pan 的 tab 字段解释:
20191228130037.PNG
waterfall: 每个请求活动期间的可视化分解图示
initiator: 触发当前请求的来源, 下面有几种常见的触发方式
parser: 通过谷歌的 HTML 解析得到的资源, 进而发起请求
redirect:http 重定向
script: 由于执行 JS, 而引入的资源.
other: 一些其他的处理和动作, 比如我们访问一个地址, 这个地址本身对应的域名资源, 就是 other. 这属于常见的两种之一. 一是输入地址访问, 二是点击跳转.
通过 waterfall 我们可以知道我们的页面资源和请求是否是合理的. 一个良好的网站的 waterfall 应该类似于下面这样:
image
waterfall 的时间分解各阶段解释:
queueing: 浏览器把当前请求放入队列的时间.
stalled: 当前请求在队列中, 但是没有执行的搁置时间.
request sent: 请求发送消耗时间.
waiting(TTFB): 浏览器接收到服务端返回的首个字节的时间. TTFB 的意思是首字节时间 (Time to First Byte)
content Download: 浏览器接受返回内容所花费时间
queued at: 理解为准备插入队列时机
started at: 任务开始时机
公式 1: started at = queued at + queueing
公式 1: 当前请求花费总时间 ≈ queueing + stalled + request sent + waiting + content download
阅读文献
浏览器优先级
- loadCSS
- loadCSS GitHub
来源: http://www.jianshu.com/p/6a583d5fed58