预加载preload应该怎么使用？

Question

网上说：preload是用来预加载的，什么资源应该使用preload?

如果页面需要使用style.css来加载页面的整体样式，那么下面使用方法有什么区别（使用preload和正常引入有什么区别）？

<link rel="preload" href="style.css" as="style">

<link rel="stylesheet" href="style.css">

Answer 1

style.css这样的样式文件，正常引入只会在浏览器解析到link标签时才开始加载，而使用preload则可以在页面开始渲染前预加载该资源，这样就可以提升一些用户体验，至于提升多少就不一定了 毕竟现在的网络与硬件资源整体不错

Answer 2

在Web开发中，预加载(preload)是在主资源加载时提前请求某些资源，以便在稍后的时间节省时间。在HTML链接(rel)属性中，可以使用preload指令指示在主文档加载时优先获取资源。具体方法如下：

HTML preloading的语法如下：

<link rel="preload" href="fonts/custom.ts-w0336-regular.woff2" as="font" type="font/woff2">

您只需要将链接元素添加到页面头部，并设置as属性来指定资源类型，使浏览器可以开始预加载它们。

as属性可以设置以下值：

• media
• script
• style
• font
• image

例如，在一个包含多个图片的页面中，使用预加载可以加快页面加载。例如，您可以使用以下链接元素来预加载所有图片：

<link rel="preload" href="image1.jpg" as="image">
<link rel="preload" href="image2.jpg" as="image">
<link rel="preload" href="image3.jpg" as="image">

这样，浏览器就会在主资源加载时自动预加载这些图片，并在需要时加载它们，从而提高了Web应用程序的性能。