【DailyENJS第5期】如何使用preload、preconnect、prefetch提升Web性能

DailyENJS 致力于翻译优秀的前端英文技术文章，为技术同窗带来更好的技术视野。

今天让我展现能够让你的网站快速加载的简单技术。

首先，咱们须要知道什么是Preload，Preconnect和Prefetch。

Preload: 当咱们在 link 标签中使用 preload 时，它会提早请求资源。主要用于获取当前路由中使用的高优先级资源。

Preconnect: 解决 DNS 和 TCP 握手问题

DNS-Preconnect: 仅解决 DNS 问题

Prefetch: 提早获取资源将其置于缓存中，使用资源时从缓存中获取而不是发出另外一个请求。

你可能会怀疑preload和prefetch之间有什么区别。preload用于高优先级资源，prefetch用于低优先级资源。

如今让咱们看一下Vuejs网站的实例。

默认状况下，vuejs网站不使用上述任何一种方法。

让咱们使用chrome audits面板来检查vue站点的Web性能。

我电脑上的 performance 是 43%

在我使用 preconnect 和 preload后

performance 是 79%

这是例子，你能够在本身的电脑查看。

如今让咱们看看哪些大型网站正在使用上面这些技巧。

亚马逊

Github

NetFlix

原文：codeburst.io/how-to-impr…

最后照旧是一个广告贴，最近新开了一个分享技术的公众号，欢迎你们关注👇（目前关注人数可怜🤕）