提高Web性能之预加载5种不同的方法

2019-05-1158次阅读其它

预加载有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个预加载可能没问题

参考:

Preload, prefetch and other <link> tags

Web Performance 101

上一篇: script标签async、defer属性及其区别  下一篇: Webpack4内置development开发模式  

提高Web性能之预加载5种不同的方法相关文章