预加载html资源有三种方法：preload、prefetch、preconnect。1. preload用于当前页面必须资源的高优先级预加载，如首屏关键资源和异步模块，需配合as属性使用；2. prefetch适用于未来页面可能需要的资源，优先级低，用于用户可能访问的页面或延迟加载内容；3. preconnect通过提前建立服务器连接（含dns解析、tcp握手等），减少请求延迟，适合cdn和第三方api场景。三者可结合使用以优化性能，且主流浏览器支持良好，可通过开发者工具监控效果并解决资源未使用、优先级冲突、缓存等问题。
预加载HTML资源，简单说就是让浏览器提前下载页面需要的资源，避免在解析HTML时才临时发起请求，从而加速页面渲染。主要通过<link rel>标签实现，有preload、prefetch、preconnect这三种方法。
preload、prefetch、preconnect三种方法
preload：精准预加载，优先级高
preload用于预加载当前页面必须的资源，比如字体、图片、视频、脚本、样式表等。它的优先级非常高，浏览器会尽快下载这些资源。关键在于“必须”，如果资源没有被使用，浏览器可能会发出警告。
立即学习“前端免费学习笔记（深入）”；
<link rel="preload" href="style.css" as="style"> <link rel="preload" href="script.js" as="script"> <link rel="preload" href="image.png" as="image">
as属性是必须的，它告诉浏览器预加载的是什么类型的资源。常见的值包括：style、script、image、font、video、audio等。
使用场景：
- 首屏关键资源：例如，首屏显示的图片、字体，确保它们在页面渲染时已经可用。
-
异步加载的模块：如果你的页面使用了异步加载的JavaScript模块，可以使用
preload提前下载这些模块，提升用户体验。
需要注意的是，preload只是下载资源，并不会自动执行脚本或应用样式。你需要手动将这些资源应用到页面上。
prefetch：低优先级预加载，未来页面资源
prefetch用于预加载未来页面可能需要的资源。它的优先级非常低，浏览器会在空闲时下载这些资源，不会影响当前页面的渲染。
<link rel="prefetch" href="next-page.html"> <link rel="prefetch" href="next-page-style.css" as="style">
使用场景：
-
用户可能访问的页面：例如，如果你的网站有多个页面，用户经常会从当前页面跳转到其他页面，可以使用
prefetch提前下载这些页面的资源。 -
延迟加载的资源：如果你的页面有一些延迟加载的资源，例如图片或视频，可以使用
prefetch提前下载这些资源，减少用户等待时间。
prefetch适用于那些不影响当前页面性能，但能提升用户体验的场景。浏览器会根据自身的资源管理策略来决定是否下载这些资源。
preconnect：提前建立连接，减少延迟
preconnect用于提前建立与服务器的连接，包括DNS解析、TCP握手和TLS协商。它可以减少请求资源时的延迟。
<link rel="preconnect" href="https://example.com"> <link rel="preconnect" href="https://cdn.example.com" crossorigin>
crossorigin属性用于处理跨域请求。如果你的资源是从不同的域名加载的，需要添加crossorigin属性。
使用场景：
-
CDN资源：如果你的网站使用了CDN，可以使用
preconnect提前建立与CDN服务器的连接。 -
第三方API：如果你的网站需要调用第三方API，可以使用
preconnect提前建立与API服务器的连接。
preconnect适用于那些需要与服务器建立连接的场景。它可以减少请求资源时的延迟，提升用户体验。
最佳实践：如何选择合适的预加载方法？
选择哪种预加载方法取决于你的具体需求。
-
preload：用于预加载当前页面必须的资源，优先级高，适用于首屏关键资源和异步加载的模块。 -
prefetch：用于预加载未来页面可能需要的资源，优先级低，适用于用户可能访问的页面和延迟加载的资源。 -
preconnect：用于提前建立与服务器的连接，减少请求资源时的延迟，适用于CDN资源和第三方API。
一般来说，可以结合使用这三种方法，以达到最佳的性能优化效果。例如，可以使用preload预加载首屏关键资源，使用prefetch预加载未来页面可能需要的资源，使用preconnect提前建立与CDN服务器的连接。
浏览器兼容性：不同浏览器对预加载的支持程度如何？
preload、prefetch、preconnect的兼容性都不错，主流浏览器都支持。但是，一些老版本的浏览器可能不支持这些特性。
-
preload：Chrome、Firefox、Safari、Edge等主流浏览器都支持。 -
prefetch：Chrome、Firefox、Edge等主流浏览器都支持。Safari对prefetch的支持较差。 -
preconnect：Chrome、Firefox、Safari、Edge等主流浏览器都支持。
为了兼容老版本的浏览器，可以使用polyfill或降级方案。例如，可以使用JavaScript来模拟preload和prefetch的功能。
性能监控：如何评估预加载的效果？
可以使用浏览器的开发者工具来监控预加载的效果。
- Network面板：可以查看资源的加载时间和优先级。如果资源被成功预加载，它的加载时间会明显缩短。
- Performance面板：可以分析页面的渲染过程，查看预加载对页面性能的影响。
还可以使用一些在线工具来评估预加载的效果，例如WebPageTest和PageSpeed Insights。这些工具可以提供详细的性能报告和优化建议。
常见问题：预加载可能遇到的问题及解决方案
-
资源未被使用：如果使用
preload预加载了资源，但该资源没有被使用，浏览器可能会发出警告。解决方法是确保预加载的资源都是页面必须的。 -
优先级冲突：如果同时使用了
preload和prefetch，可能会出现优先级冲突。解决方法是合理安排资源的加载顺序，避免优先级冲突。 - 缓存问题：预加载的资源可能会被缓存，导致页面更新后仍然加载旧版本的资源。解决方法是使用版本号或缓存清除机制。
总的来说，HTML预加载是一种有效的性能优化手段，可以显著提升页面的加载速度和用户体验。通过合理使用preload、prefetch、preconnect，可以最大限度地发挥预加载的优势。
