你有没有遇到过这种情况？点开一个网页，图片一张张慢慢浮现，按钮点不动，等得人直挠头。其实很多时候不是网速太慢，而是浏览器没提前准备好需要的资源。这时候，预加载就能派上用场。
什么是预加载
预加载（preload）是一种告诉浏览器“这个资源待会肯定要用，现在就帮我下载”的方式。它不会改变页面结构，但能显著提升关键资源的加载优先级，比如重要的CSS、JS、字体或首屏图片。
举个例子，你去餐厅吃饭，服务员提前把筷子、杯子、菜单都摆好，你一坐下就能点菜。预加载就像这个准备过程，让用户“坐下”后能立刻看到内容，而不是干等。
怎么用预加载
在HTML中使用 <link rel="preload"> 标签就能实现。比如你想提前加载首页的主样式表和大图：
<link rel="preload" href="styles/main.css" as="style">
<link rel="preload" href="images/hero-banner.jpg" as="image">
<link rel="preload" href="fonts/custom.woff2" as="font" type="font/woff2" crossorigin>注意几个关键属性：
- href 是资源地址；
- as 指明资源类型，比如 style、script、image、font 等，这能让浏览器正确设置加载优先级和缓存策略；
- 字体资源要加 crossorigin，否则可能加载失败。
别乱 preload
不是所有资源都适合预加载。如果你把一堆暂时用不上的JS文件都 preload，反而会挤占关键资源的带宽，拖慢页面。建议只对首屏核心资源下手，比如主导航的JS、首屏轮播图、自定义字体这类“没有它们页面就不完整”的内容。
另外，preload 的资源如果太久没被用到，浏览器还会发出警告。在开发者工具里能看到类似“Preload resource wasn’t used within 3 seconds”的提示，这就是在提醒你：这个预加载可能白忙了。
结合其他优化一起用
预加载不是万能药。搭配合理的资源压缩、CDN加速、懒加载非首屏图片，效果才更明显。比如首屏大图用 preload，下面滚动区域的图片就用懒加载，各司其职。
还有个小技巧：用媒体查询控制预加载。比如你知道某个大图只在大屏幕上显示，就可以这样写：
<link rel="preload" href="images/wide-banner.jpg" as="image" media="(min-width: 1024px)">这样小屏幕设备就不会浪费流量去下载它。
网页加载速度直接影响用户体验，特别是手机访问时。花几分钟加上几个 preload 标签，可能就让页面快了一拍。用户不一定知道发生了什么，但他们会觉得：“这网站真利索。”