资源预加载
- 前端
- 三生万物
- 0
一、DNS prefetch
DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源,这样浏览器可以尽早的解析DNS。
<link rel="dns-prefetch" href="//example.com">
二、Preconnect
和DNS prefetch类似,preconnect不光会解析DNS,还会建立TCP握手连接和TLS协议
<link rel="preconnect" href="http://css-tricks.com">
三、Prefetch
当能确定网页在未来一定会使用到某个资源时,开发者可以让浏览器提前请求并且缓存好以供后续使用。prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。
<link rel="prefetch" href="image.png">
四、Subresource
subresource可以用来指定资源是最高优先级的。
<link rel="subresource" href="styles.css">
五、Prerender
prerender是一个重量级的选项,它可以让浏览器提前加载指定页面的所有资源。
<link rel="prerender" href="/thenextpage.html"/>
六、Preload (未来)
preload草案建议允许始终预加载某些资源,不像prefetch有可能被浏览器忽略,浏览器必须请求preload标记的资源。
<link rel="preload" href="image.png">
七、图片预加载
var preloadImgList = [
'images/1.jpg',
'images/2.jpg',
'images/3.jpg'
];
preloadImgList.forEach(function(v) {
var img = new Image();
img.src = v;
});
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。