1.preload
preload
是浏览器的一种预加载资源模式,它的作用是将资源率先加载,然后等到需要的时候再去使用,是一种资源的加载和解析解耦的方法。它有如下特点:
- 具有优先级,但是并不会阻塞
onload
事件:preload
在网页中具有强制加载的功能,所以它的加载具有优先级,不过它仅仅是加载资源而已,并不会执行,还需要script
资源进行加载。 - 它设计的目的是为当前页面的资源进行预加载,跳转页面的时候就不会使用到。
- 使用as字段来进行设定优先级,如
as=style
则为最高优先级。优先级顺序为:HTML/CSS>Images>JS
2.prefetch
相比于preload
,prefetch
的是在浏览器空闲的时候再进行加载,它更关注网页初始化完毕后进行加载的资源或者打开另外一个网页的时候加载的资源。不过prefetch要加载跨域资源的时候需要有crossorigin
字段
- 它可能是一件坏事,因为加载的内容可能不会使用到
- 利用空闲时间再进行加载
- 也是实现加载和解析相反的功能
相比于preload
,prefetch
有更多中选择,有dns-prefetch
、prerender
。
dns-prefet