关于前端:资源预加载

一、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;
});

欢送关注：http://fenxianglu.cn/