如何利用预加载（preload）和预连接（preconnect）技术提升关键资源加载速度？

当需要优先加载影响首屏渲染的关键资源时，合理使用预加载（preload）和预连接（preconnect）技术可有效提升资源加载速度。preload用于指定提前加载当前页面必需的关键资源，而preconnect则用于提前建立与跨域资源服务器的连接，减少后续请求的握手延迟。 关键资源类型： - 首屏CSS/JS：对渲染至关重要的样式表或脚本，使用`<link rel="preload" href="critical.css" as="style">`提前加载，避免阻塞渲染。 - 字体文件：通过preload指定`as="font"`并设置`crossorigin`，解决字体加载延迟导致的文本闪烁（FOIT）。 - 跨域资源：对于CDN、第三方API等跨域资源，用`<link rel="preconnect" href="https://cdn.example.com">`提前建立TCP连接和SSL握手，缩短后续请求耗时。 建议结合页面性能分析工具（如Lighthouse）识别关键资源，避免过度预加载导致资源浪费。优先对加载链较长或体积较大的资源使用preload，对高频跨域域名使用preconnect，以平衡加载效率与资源消耗。