在浏览器中可以看到资源加载的优先级:

• 使用预加载提高优先级, <link rel="preload">

• 使用<script async src="">, 异步加载js, 不阻塞

• 使用<script defer src="">, 文档解析完成后加载, 延迟加载

• 提前建立连接, <link rel="preconnect">

• 提前DNS 查找, <link rel="dns-prefetch">

• 有空闲时提前加载资源 <link rel="prefetch">

• 使用media 尽量只加载当前需要的css

• Intersection Observer API, 监控元素是否进入可视窗口, 可以用来延迟加载图片等资源

• 参考