快速优化 Web 性能的10 个手段( 三 ) _优化

什么时候使用呢？当我们页面中使用了其他域名的资源时，比如我们的静态资源都放在cdn上，那么我们可以对cdn的域名进行预解析。浏览器的支持情况也不错。
prefetch预拉取, 使用方法如下：
<link rel="prefetch" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"index.html" as="document">link标签里的as参数可以有以下取值：
audio: 音频文件video: 视频文件 Track: 网络视频文本轨道 script: javascript文件style: css样式文件font: 字体文件 image: 图片 fetch: XHR、Fetch请求worker: Web workersembed: 多媒体<embed>请求 object: 多媒体<object>请求document: 网页预拉取用于标识从当前网站跳转到下一个网站可能需要的资源，以及本网站应该获取的资源。这样可以在将来浏览器请求资源时提供更快的响应。
如果正确使用了预拉取，那么用户在从当前页面前往下一个页面时，可以很快得到响应。但是如果错误地使用了预拉取，那么浏览器就会下载额外不需要的资源，影响页面性能，并且造成网络资源浪费。
这里需要注意的是，使用了prefetch，资源仅仅被提前下载，下载后不会有任何操作，比如解析资源。
prerender预渲染，使用方法如下:
<link rel="prerender" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"//example.com/next-page.html">prerender比prefetch更进一步。不仅仅会下载对应的资源，还会对资源进行解析。解析过程中，如果需要其他的资源，可能会直接下载这些资源。这样，用户在从当前页面跳转到目标页面时，浏览器可以更快的响应。
preload<link rel="preload" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"..." as="...">注意preload需要写上正确的as属性，才能正常工作喔(prefetch不需要) 。但是它们有什么区别呢？

preload 是用于预加载当前页的资源，浏览器会优先加载它们
prefetch 是用于预加载后续导航使用的资源，浏览器也会加载它们，但优先级不高

9. 固定好你的谷歌字体google字体很棒，它们提供优质的服务，并被广泛使用。如果你不想自己托管字体，那么Google字体是一个不错的选择。你需要的是学习如何引用它们，哈里·罗伯茨（Harry Roberts）写了一篇有关《The Fastest Google Fonts》的出色深度文章。强烈建议你阅读它。
如果你快速取用，那么可以使用下面集成片段的谷歌字体：
<link rel="preconnect" href=https://www.isolves.com/it/wlyx/wzjs/2020-11-12/"https://fonts.gstatic.com" crossorigin/>10. 使用 service worker 缓存资源service worker是浏览器在后台运行的脚本。缓存可能是最常用的特性，也是你应该使用的特性。我认为这不是一个选择的问题。通过使用 service worker实现缓存，可以使用户与站点的交互更快，并且即使用户不在线也可以访问站点。
总结在这篇文章中，展示了 10 种快速的网络性能，你可以在5分钟内应用到你的网站，以提高你的网站速度。