什么是preload?
preload是一种技术,用于在页面加载之前预加载资源,例如图片、CSS、JavaScript等,以提高页面加载速度和性能。通过预加载,浏览器可以在页面加载时立即获取这些资源,而不必等到需要它们时再去下载。这可以减少页面加载时间和延迟,并提高用户体验。preload可以通过HTML标签、JavaScript代码或HTTP头文件来实现。
这个指令可以在 中使用,比如 。这不要与浏览器预加载混淆,浏览器预加载只预先加载在HTML中声明的资源。preload 指令事实上克服了这个限制并且允许预加载在 CSS 和JavaScript 中定义的资源,并允许决定何时应用每个资源。
什么是prefetch?
Prefetch 是一个低优先级的资源提示,允许浏览器在后台(空闲时)获取将来可能用得到的资源,并且将他们存储在浏览器的缓存中。一旦一个页面加载完毕就会开始下载其他的资源,然后当用户点击了一个带有 prefetched 的连接,它将可以立刻从缓存中加载内容。有三种不同的 prefetch 的类型,link,DNS 和 prerendering,下面来详细分析。
preload和prefetch的不同之处?
Preload 与 prefetch 不同的地方就是它专注于当前的页面,并以高优先级加载资源,Prefetch 专注于下一个页面将要加载的资源并以低优先级加载。同时也要注意 preload 并不会阻塞 window 的 onload 事件。
使用 Preload 的好处?
- 允许浏览器来设定资源加载的优先级因此可以允许前端开发者来优化指定资源的加载。
- 赋予浏览器决定资源类型的能力,因此它能分辨这个资源在以后是否可以重复利用。
- 浏览器可以通过指定 as 属性来决定这个请求是否符合 content security policy。
- 浏览器可以基于资源的类型(比如 image/webp)来发送适当的 accept 头。