当前位置：首页 > news >正文

前端性能优化：预加载和预获取最佳实践

news 2026/5/8 8:26:39

前端性能优化：预加载和预获取最佳实践

前言

预加载和预获取是前端性能优化的重要技术，它们可以提前加载资源，减少用户等待时间，提升用户体验。今天，我就来给大家讲讲预加载和预获取的最佳实践，让你的应用加载更快。

预加载和预获取简介

什么是预加载和预获取？

预加载（Preload）：提前加载当前页面需要的关键资源
预获取（Prefetch）：提前加载未来可能需要的资源

预加载和预获取的优势

减少加载时间：提前加载资源，减少用户等待时间
提升用户体验：页面加载更快，交互更流畅
优化资源使用：合理利用浏览器空闲时间加载资源
减少阻塞：避免资源加载阻塞页面渲染

基本用法

1. 预加载（Preload）

<!-- 预加载CSS --> <link rel="preload" href="style.css" as="style"> <!-- 预加载JavaScript --> <link rel="preload" href="script.js" as="script"> <!-- 预加载字体 --> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> <!-- 预加载图像 --> <link rel="preload" href="image.jpg" as="image"> <!-- 预加载音频 --> <link rel="preload" href="audio.mp3" as="audio"> <!-- 预加载视频 --> <link rel="preload" href="video.mp4" as="video">

2. 预获取（Prefetch）

<!-- 预获取页面 --> <link rel="prefetch" href="next-page.html"> <!-- 预获取JavaScript --> <link rel="prefetch" href="next-script.js"> <!-- 预获取CSS --> <link rel="prefetch" href="next-style.css">

3. 预连接（Preconnect）

<!-- 预连接到域名 --> <link rel="preconnect" href="https://api.example.com"> <!-- 预连接到域名并指定端口 --> <link rel="preconnect" href="https://api.example.com:443"> <!-- 预连接到域名并指定 crossorigin --> <link rel="preconnect" href="https://api.example.com" crossorigin>

4. 预渲染（Prerender）

<!-- 预渲染页面 --> <link rel="prerender" href="next-page.html">

最佳实践

1. 预加载的最佳实践

只预加载关键资源：不要预加载所有资源，只预加载当前页面需要的关键资源
使用合适的as属性：指定资源类型，帮助浏览器优化加载
处理跨域资源：对于跨域资源，添加crossorigin属性
监控预加载：使用浏览器开发工具监控预加载效果

2. 预获取的最佳实践

预测用户行为：根据用户行为预测可能需要的资源
合理使用：不要过度预获取，避免浪费带宽
优先级：预获取的优先级较低，不会影响关键资源的加载
缓存：预获取的资源会被缓存，下次访问时可以直接使用

3. 预连接的最佳实践

预连接到重要域名：预连接到API、CDN等重要域名
减少DNS查找时间：预连接可以减少DNS查找、TCP握手和TLS协商的时间
限制数量：不要预连接到太多域名，避免资源浪费

4. 预渲染的最佳实践

谨慎使用：预渲染会消耗大量资源
只预渲染关键页面：只预渲染用户最可能访问的页面
监控性能：监控预渲染对性能的影响

实际应用案例

案例一：预加载关键资源

<!-- 预加载CSS --> <link rel="preload" href="style.css" as="style"> <link rel="stylesheet" href="style.css"> <!-- 预加载字体 --> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> <!-- 预加载JavaScript --> <link rel="preload" href="app.js" as="script"> <script src="app.js"></script>

案例二：预获取下一页资源

<!-- 预获取下一页 --> <link rel="prefetch" href="page2.html"> <!-- 预获取下一页的JavaScript --> <link rel="prefetch" href="page2.js"> <!-- 预获取下一页的CSS --> <link rel="prefetch" href="page2.css">

案例三：预连接到API域名

<!-- 预连接到API域名 --> <link rel="preconnect" href="https://api.example.com"> <!-- 预连接到CDN域名 --> <link rel="preconnect" href="https://cdn.example.com">

案例四：基于用户行为的预获取

// 当用户悬停在链接上时预获取 document.querySelectorAll('a').forEach(link => { link.addEventListener('mouseenter', () => { const href = link.getAttribute('href'); if (href && !href.startsWith('#')) { const prefetchLink = document.createElement('link'); prefetchLink.rel = 'prefetch'; prefetchLink.href = href; document.head.appendChild(prefetchLink); } }); }); // 当用户滚动到页面底部时预获取下一页 window.addEventListener('scroll', () => { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) { const nextPage = document.querySelector('.next-page'); if (nextPage) { const href = nextPage.getAttribute('href'); if (href) { const prefetchLink = document.createElement('link'); prefetchLink.rel = 'prefetch'; prefetchLink.href = href; document.head.appendChild(prefetchLink); } } } });