Open arlyxiao opened 3 years ago
<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" /> <link rel="modulepreload" href="/script.js" />
如果需要及时资源,并且在下载后缓存在浏览器,适合使用 preload, 但不适合过度使用,这有可能破坏浏览器对资源的安排。
如果对资源需求没那么及时,比如资源是在另一个页面被使用,那么可以在当前页面使用 prefetch,资源会被提前下载并缓存,但不会被执行。
如果对请次资源的具体路径不确定,可以提前建立 domain 连接,这种情况可以使用 preconnect。
dns-prefetch 跟 preconnect 功能有点接近,但是 dns-prefetch 只是提前建立 dns 查询,还没有进行握手等 tcp 连接。
性能检测工具
页面结构检查工具
组件库替代品
link 参数主要有以下几种
如果需要及时资源,并且在下载后缓存在浏览器,适合使用 preload, 但不适合过度使用,这有可能破坏浏览器对资源的安排。
如果对资源需求没那么及时,比如资源是在另一个页面被使用,那么可以在当前页面使用 prefetch,资源会被提前下载并缓存,但不会被执行。
如果对请次资源的具体路径不确定,可以提前建立 domain 连接,这种情况可以使用 preconnect。
dns-prefetch 跟 preconnect 功能有点接近,但是 dns-prefetch 只是提前建立 dns 查询,还没有进行握手等 tcp 连接。
Defer, Async 区别
浏览器执行顺序