优化网页资产加载 (preload, prefetch, dns-prefetch, preconnect)

先前面试时被问到早期制作的一个 SPA 网站在换页后图片加载体验不太好的问题，当时把脑袋能想的所有答案都提出来了 😅，最终有答到一点，但太少用所以回答的不是很确定，当时回答：

• 图片应设置宽高以避免 CLS （累积布局偏移）
• 图片可以添加 Skeleton 或 Loader 示意加载中
• 首先显示较小的图，适当时机再替换实际大张的图
• 图片可以使用 fetchpriority 安排资源加载优先程度
• 图片内嵌使用 inline SVG 或 data URI
• 使用 Preload 预先加载关键图片……？

所以重新翻了一下相关文件，了解浏览器如何通过以下方法来优化资源的加载：

• preload
• prefetch
• dns-prefetch
• preconnect

延伸阅读：

• 使用 preload、prefetch、dns-prefetch、preconnect 最佳化资源加载顺序！🔗
• 图片是性能的重灾区，先前写过图片的性能优化研究也可以看看：所有优化网页图片的技巧都写在这了！🔗