如何使用Preload进行网站优化的预加载

使用预加载

使用元素的 rel 属性的属性值preload可以让HTML页面中元素内部书写一些声明式的资源获取请求,使得资源可以更早地得到加载。可以预加载css和js文件,这些文件不会立即加载但会提前获取,等到页面需要时就可以直接使用了。

支持预加载的资源类型

许多不同类型的内容都可以被预加载,一些主要支持的as属性值包括:

audio、document、embed、fetch、font、image、object、script、style、track、worker、video文件。

响应式预加载

link元素支持media属性,可以实现响应式预加载。例如根据屏幕宽度加载不同图片资源。

跨域获取

对跨域资源如字体通过添加crossorigin="anonymous"支持跨域获取。

其他预加载机制

link元素的rel="prefetch"属性也可以预加载资源,但对当前页面影响不大,给这些资源较低优先级。可以查看Link prefetching FAQ了解更多细节。

以上内容根据网络资料整理,仅用于传达信息,不代表本站立场。

常见问答(FQAS)

许多不同类型的内容都可以被预加载,一些主要可用的as?属性值列举如下:audio、document、embed、fetch、font、image、object、script、style、track、worker、video。

预加载资源能够让这些资源在实际需要时变得更快地可用,从而优化页面加载速度和用户体验。

可以给元素添加media属性,实现根据不同屏幕宽度加载不同的资源,提高资源利用效率。

给需要跨域加载的资源比如字体文件添加crossorigin="anonymous"属性,支持跨域预加载。

相比prefetch,preload对当前页面有利,并且给预加载资源设置较高优先级。prefetch更侧重将资源提前获取以备下一个页面使用。