预加载有5种不同的方法，dns-prefetch、preconnect、prefetch、preload、prerender这些方法都适用于不同的目标。以下是这些方法的用途：
- <link rel="dns-prefetch">指示浏览器提前对服务器的IP地址发出DNS请求。这对于CDN，Google字体以及所有其他情况非常有用，当您知道在短时间内需要资源时，知道它所托管的域，但不知道其确切路径。在这种情况下，提前解析服务器的IP地址可以节省50到300毫秒。
- <link rel="preconnect">指示浏览器提前执行与服务器的连接。在同样的情况下，当DNS预取很有用时，但可以建立完整的连接并节省更多时间。这里的缺点是打开新连接是非常耗费资源的，因此您不希望过度使用此优化。
- <link rel="prefetch">以低优先级预加载和缓存后台资源。这很有用。例如为应用程序的下一页预加载JS包。
- <link rel="preload">在后台预加载具有高优先级的资源。这对于在几秒钟内预加载您需要的资源非常有用 - 例如，一个非关键的CSS文件。
- <link rel="prerender">在后台预加载指定的页面并将其呈现在不可见的选项卡中。稍后，当访问者点击指向预渲染页面的链接时，页面会立即显示。这是Google用来预加载其第一个搜索结果的内容。
注意：不要过度使用预取方法。在后台下载内容仍然会消耗访问者的流量 - 这在移动设备上非常糟糕。因此，添加10个额外的预加载可能会使您的应用程序更快一些，但您的访问者将为此付出真正的金钱。每页2-4个预加载可能没问题。
参考：
