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

小强有个dream

已于 2024-05-17 10:30:39 修改

阅读量309

点赞数 1

文章标签： webpack 性能优化前端

于 2024-05-17 10:26:37 首次发布

本文链接：https://blog.csdn.net/qq_36413371/article/details/138994138

版权

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>

在chrome-network下禁用缓存，然后看nerwork的type有没有prefetch的资源，然后来前后对比加载时间，当然不是那么容易复现的

与浏览器自动预取资源不同，你需要手动在Webpack生成的HTML文件中添加prefetch链接

小强有个dream

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
现代浏览器性能优化示例-提前加载prefetch：

（如代码压缩、图片优化、使用CDN等）。不要为所有资源都添加 prefetch滥用 prefetch 可能会导致不必要的带宽浪费和服务器压力。不同的用户可能有不同的网络连接速度。对于使用慢速连接的用户，预取大量资源可能会对他们的体验产生负面影响。有些网站使用了按需加载这个时候就没有必要使用prefetch了。
复制链接

扫一扫