聊聊prefetch和preload。

IT工程 • 2024年7月13日 18:54 • 网站搭建 • 阅读 1

prefetch和preload都是浏览器提供的资源指令，用于优化网页的性能。preload是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源；而prefetch是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。

性能优化之 preload、prefetch、preconnect 的区别与使用

在网络应用开发中，性能优化是一个非常重要的环节，为了提高应用的性能，我们需要关注很多方面，其中包括资源预加载、预获取和预连接等技术，本文将详细介绍 preload、prefetch 和 preconnect 这三种技术的区别与使用方法。

preload

preload 是一种资源预加载技术，它允许我们在浏览器加载一个网页时，同时下载该网页中的一些资源，如图片、脚本等，这样一来，当我们打开这个网页时，这些资源已经提前加载到本地，从而提高了页面的加载速度。

preload 有两种形式：

1、自动模式(auto):浏览器会根据用户的浏览习惯，自动选择要预加载的资源，如果用户经常访问一个包含大量图片的网站，浏览器可能会自动为该网站的图片预加载。

2、提示模式(metadata):用户可以通过查看网页的元数据(如 HTML 中的 <link> 标签)来指定要预加载的资源，这种方式需要用户手动操作，但可以为不同类型的网页提供更精确的预加载策略。

prefetch

prefetch 是一种资源预获取技术，它允许我们在浏览器当前活跃的标签页中，预先获取一些即将访问的资源，如下一页的内容、链接指向的页面等，这样一来，当我们点击这些资源的链接时，它们已经在本地缓存中，从而减少了延迟时间。

prefetch 主要针对以下几种资源：

1、链接指向的页面：当用户点击一个链接时，浏览器会自动预获取该链接指向的页面，这可以避免用户点击链接后，因为等待资源加载而导致的延迟。

2、下一页的内容：当用户浏览一个长篇文章或博客时，浏览器可以预获取下一页的内容，以便在用户翻页时能够快速显示出来。

3、图片：当用户浏览一个网站时，浏览器可以预获取一些图片，以便在需要显示这些图片时能够快速加载。

preconnect

preconnect 是一种资源预连接技术，它允许我们在浏览器启动时，就与一些关键的服务器建立持久性的 TCP 连接，这样一来，当我们需要访问这些服务器上的资源时，连接已经建立好，从而减少了建立连接所需的时间。

preconnect 主要针对以下几种场景：

1、HTTPS 网站：由于 HTTPS 协议需要进行加密和解密操作，因此建立连接的速度相对较慢，通过使用 preconnect 技术，我们可以在浏览器启动时就与服务器建立持久性的 TCP 连接，从而加快 HTTPS 网站的访问速度。

2、CDN 加速：CDN(内容分发网络)可以将网站的内容分发到全球各地的服务器上，以便用户能够从离自己最近的服务器上获取资源，通过使用 preconnect 技术，我们可以在浏览器启动时就与 CDN 上的服务器建立连接，从而提高后续访问 CDN 上的资源的速度。

preload、prefetch 和 preconnect 都是提高网络应用性能的有效技术，它们分别关注了不同的方面：preload 关注于页面内部的资源加载；prefetch 关注于用户可能访问的资源；preconnect 关注于与服务器建立持久性的连接，在使用这些技术时，我们需要根据实际需求和场景进行选择和配置。