# HTML5原生预加载属性 使用原生 link * DNS prefetch 我们知道，当我们访问一个网站如 www.amazon.com 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。 DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。 ~~~ <meta http-equiv='x-dns-prefetch-control' content='on'> <link rel='dns-prefetch' href='http://g-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://z-ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://ecx.images-amazon.com'> <link rel='dns-prefetch' href='http://completion.amazon.com'> <link rel='dns-prefetch' href='http://fls-na.amazon.com'> ~~~ 应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。 应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。 * Resource prefetch 在 Chrome 下，我们可以用 link标签声明特定文件的预加载： ~~~ <link rel='subresource' href='critical.js'> <link rel='subresource' href='main.css'> <link rel='prefetch' href='secondary.js'> ~~~ 在 Firefox 中或用 meta 标签声明： `<meta http-equiv="Link" content="<critical.js>; rel=prefetch">` rel='subresource' 表示当前页面必须加载的资源，应该放到页面最顶端先加载，有最高的优先级。 rel='prefetch' 表示当 subresource 所有资源都加载完后，开始预加载这里指定的资源，有最低的优先级。 注意：只有可缓存的资源才进行预加载，否则浪费资源！ * Pre render 前面说到的预解析DNS、预加载资源已经够强悍了有木有，可还有更厉害的预渲染（Pre-rendering）！ 预渲染意味着我们提前加载好用户即将访问的下一个页面，否则进行预渲染这个页面将浪费资源，慎用！ ~~~ <link rel='prerender' href='http://www.pagetoprerender.com'> ~~~ rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面，一旦我们访问这个页面，则秒开了！ 在 Firefox 中或用 rel='next' 来声明 `<link rel="next" href="http://www.pagetoprerender.com">` 链接：