首屏加载

@Page Load
预加载 preload
提前处理资源 - 在页面生命周期的早期就开始加载的,早于浏览器的主要渲染机制启动。这可以确保它们更早可用,并且不太可能阻塞页面的渲染,从而提高性能
可以预加载的有:样式表 style、脚本 script、字体 font、图像 image、音频 audio、视频 video等
<link>

使用属性 preload,可以将 <link> 标签转变成任何资源预加载器

href:属性中的资源路径

as:属性中的资源类型

使用 media 属性响应式的预加载

更多使用,请访问 MDN - preload响应式开发 - responsive

传统使用

<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>

预加载使用

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />
延迟加载 defer
同步加载 async