prefetch是什么意思？用法、例句(使用 ProloadPrefetch 优化你的应用)

其实prefetch是什么意思？用法、例句的问题并不复杂，但是又很多的朋友都不太了解使用 Proload/Prefetch 优化你的应用，因此呢，今天小编就来为大家分享prefetch是什么意思？用法、例句的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

1、衡量网站的性能的指标有很多，其中有项重要的指标就是网站的首屏时间，为此前端工程师们都是绞尽脑汁想尽办法进行优化自己的应用，诸如像服务端渲染，懒加载，CDN加速，ServiceWorker等等方法，今天介绍的preload/prefetch是一种简单，但却事半功倍的优化手段。

2、在网络请求中，我们在使用到某些资源比如：图片，JS，CSS等等，在执行之前总需要等待资源的下载，如果我们能做到预先加载资源，那在资源执行的时候就不必等待网络的开销，这时候就轮到preload大显身手的时候了。

3、preload顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。

4、<!--使用link标签静态标记需要预加载的资源-->\n<linkrel="preload"href="/path/to/style.css"as="style">\n<!--或使用脚本动态创建一个link标签后插入到head头部-->\n<script>\nconstlink=document.createElement('link');\nlink.rel='preload';\nlink.as='style';\nlink.href='/path/to/style.css';\ndocument.head.appendChild(link);\n</script>\n

当浏览器解析到这行代码就会去加载href中对应的资源但不执行，待到真正使用到的时候再执行，另一种方式方式就是在HTTP响应头中加上preload字段：

5、Link:<https://example.com/other/styles.css>;rel=preload;as=style\n

这种方式比通过Link方式加载资源方式更快，请求在返回还没到解析页面的时候就已经开始预加载资源了。

6、讲完preload的用法再来看下它的浏览器兼容性，根据http://caniuse.com上的介绍：IE和Firefox都是不支持的，兼容性覆盖面达到73%。

7、prefetch跟preload不同，它的作用是告诉浏览器未来可能会使用到的某个资源，浏览器就会在闲时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源。它的用法跟preload是一样的：

8、<!--link模式-->\n<linkrel="prefetch"href="/path/to/style.css"as="style">\n<!--HTTP响应头模式-->\nLink:<https://example.com/other/styles.css>;rel=prefetch;as=style\n

讲完用法再讲浏览器兼容性，prefetch比preload的兼容性更好，覆盖面可以达到将近80%。

9、当一个资源被preload或者prefetch获取后，它将被放在内存缓存中等待被使用，如果资源位存在有效的缓存极致（如cache-control或max-age），它将被存储在HTTP缓存中可以被不同页面所使用。

10、正确使用preload/prefetch不会造成二次下载，也就说：当页面上使用到这个资源时候preload资源还没下载完，这时候不会造成二次下载，会等待第一次下载并执行脚本。

11、对于preload来说，一旦页面关闭了，它就会立即停止preload获取资源，而对于prefetch资源，即使页面关闭，prefetch发起的请求仍会进行不会中断。

12、preload是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源，而prefetch是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。所以建议：对于当前页面很有必要的资源使用preload，对于可能在将来的页面中使用的资源使用prefetch。

13、用“preload”和“prefetch”情况下，如果资源不能被缓存，那么都有可能浪费一部分带宽，在移动端请慎用。

14、没有用到的preload资源在Chrome的console里会在onload事件3s后发生警告。

15、原因是你可能为了改善性能使用preload来缓存一定的资源，但是如果没有用到，你就做了无用功。在手机上，这相当于浪费了用户的流量，所以明确你要preload对象。

16、用下面的代码段可以检测<linkrel=”preload”>是否被支持：

17、constpreloadSupported=()=>{\nconstlink=document.createElement('link');\nconstrelList=link.relList;\nif(!relList||!relList.supports)\nreturnfalse;\nreturnrelList.supports('preload');\n};\n

不同资源浏览器优先级

18、在Chrome46以后的版本中，不同的资源在浏览器渲染的不同阶段进行加载的优先级如下图所示：

19、一个资源的加载的优先级被分为五个级别，分别是：

20、而script脚本资源就比较特殊，优先级不一，脚本根据它们在文件中的位置是否异步、延迟或阻塞获得不同的优先级：

21、自己网站资源优先级也可以通过Chrome控制台Network一栏进行查看.

22、使用async/defer属性在加载脚本的时候不阻塞HTML的解析，defer加载脚本执行会在所有元素解析完成，DOMContentLoaded事件触发之前完成执行。它的用途其实跟preload十分相似。你可以使用defer加载脚本在head末尾，这比将脚本放在body底部效果来的更好。

23、HTTP/2PUSH功能可以让服务器在没有相应的请求情况下预先将资源推送到客户端。这个跟preload/prefetch预加载资源的思路类似，将下载和资源实际执行分离的方法，当脚本真正想要请求文件的时候，发现脚本就存在缓存中，就不需要去请求网络了。

24、我们假设浏览器正在加载一个页面，页面中有个CSS文件，CSS文件又引用一个字体库，对于这样的场景，

25、若使用HTTP/2PUSH，当服务端获取到HTML文件后，知道以后客户端会需要字体文件，它就立即主动地推送这个文件给客户端，如下图：

26、而对于preload，服务端就不会主动地推送字体文件，在浏览器获取到页面之后发现preload字体才会去获取，如下图：

27、对于ServerPush来说，如果服务端渲染HTML时间过长的话则很有效，因为这时候浏览器除了干等着，做不了其它操作，但是不好的地方是服务器需要支持HTTP/2协议并且服务端压力也会相应增大。对于更多ServerPush和preload的对比可以参考这篇文章：HTTP/2PUSH(推送)与HTTPPreload(预加载)大比拼

28、现代浏览器很聪明，就如Chrome浏览器，它会在解析HTML时收集外链，并在后台并行下载，它也实现了提前加载以及加载和执行分离。

29、preload/prefetch是个好东西，能让浏览器提前加载需要的资源，将资源的下载和执行分离开来，运用得当的话可以对首屏渲染带来不小的提升，可以对页面交互上带来极致的体验。

30、原文地址https://github.com/happylindz/blog/issues/17

好了，本文到此结束，如果可以帮助到大家，还望关注本站哦！