现代浏览器性能优化示例-提前加载prefetch：

prefetch就是在核心代码加载完成后，浏览器有空闲就会帮我们prefetch预取资源

请注意，prefetch 是一种优化手段，而不是必须使用的功能。在决定是否使用它之前，请确保你的应用程序已经进行了其他必要的性能优化（如代码压缩、图片优化、使用CDN等）。不要为所有资源都添加 prefetch滥用 prefetch 可能会导致不必要的带宽浪费和服务器压力。不同的用户可能有不同的网络连接速度。对于使用慢速连接的用户，预取大量资源可能会对他们的体验产生负面影响。
虽然大多数现代浏览器都支持prefetch，但仍有一些旧版浏览器或非主流浏览器可能不支持该特性。 有些网站使用了按需加载这个时候就没有必要使用prefetch了

哪些资源需要用prefetch

分析用户的行为模式，找出他们经常访问的页面或资源。这些资源是 prefetch 的好候选，因为它们在未来被访问的可能性很高。
较大的资源（如JavaScript库、CSS文件或图片）可能更适合使用 prefetch，因为它们需要更长的时间来下载。通过预取这些资源，你可以确保在用户需要它们时它们已经缓存好了。
一些资源虽然不是当前页面所必需的，但对于用户体验来说很重要（如用户反馈表单、评论框、聊天窗口等）。这些资源可以通过 prefetch 提前加载，以确保在用户需要时能够迅速显示。

使用Lighthouse、WebPageTest或其他性能监控工具来评估添加 prefetch 后页面的加载速度和性能。

index.html
<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Prefetch Example</title>  <script>  // 在页面加载完成后执行  window.addEventListener('load', function() {  console.log('加载了')// 假设我们预测用户可能会访问 /next-page.html  // 因此，我们预取那个页面的资源  var prefetchLink = document.createElement('link');  prefetchLink.rel = 'prefetch';  prefetchLink.as = 'document'; // 指定预取资源的类型  prefetchLink.href = '/next-page.html'; // 指定要预取的资源的URL  // 将预取链接添加到HTML文档的<head>部分  document.head.appendChild(prefetchLink);  // 注意：这里只是预取了HTML文档，如果你还知道/next-page.html需要的其他资源（如CSS、JS文件），  // 你也可以为它们添加类似的<link rel="prefetch">标签。  console.log('Prefetch link added for /next-page.html');  });  </script>  
</head>  
<body>  <!-- 页面内容 -->  <h1>Prefetch Example</h1>  <p>This page demonstrates how to use prefetch with native JavaScript.</p>  <a href="/next-page.html">Go to Next Page</a>  
</body>  
</html>

next-page.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./next-page.css">
</head>
<body>next-page.html**请注意，prefetch 是一种优化手段，而不是必须使用的功能。在决定是否使用它之前，请确保你的应用程序已经进行了其他必要的性能优化**（如代码压缩、图片优化、使用CDN等）。不要为所有资源都添加 prefetch滥用 prefetch 可能会导致不必要的带宽浪费和服务器压力。不同的用户可能有不同的网络连接速度。对于使用慢速连接的用户，预取大量资源可能会对他们的体验产生负面影响。
</body>
</html>