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

880 阅读1分钟

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…

最后照旧是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注👇(目前关注人数可怜🤕)