dns-prefetch
域名解析：从域名查询IP的过程，这个过程一般都很快的，但也会引起延迟。一般浏览器会适当的对解析结果缓存，并对页面中出现的新域名进行预解析，但并不是所有的浏览器都会这么做，为了帮助其它浏览器对某些域名进行预解析，你可以在页面的html标签中添加dns-prefetch告诉浏览器对指定域名预解析，如下：
<link rel="dns-prefetch" href="//rescdn.qqmail.com">
<link rel="dns-prefetch" href="//weread-1253731777.file.myqcloud.com">
制作地址栏种的小图标
<link rel="icon" type="image/png" sizes="16x16" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/favicon/favicon_16h.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/favicon/favicon_32h.png"/>
<link rel="icon" type="image/png" sizes="48x48" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/favicon/favicon_48h.png"/>
<link rel="apple-touch-icon" sizes="57x57" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://rescdn.qqmail.com/node/wr/wrpage/style/images/independent/appleTouchIcon/apple-touch-icon-152x152.png">
通过rel="preload"进行内容预加载
<link> 元素的 rel 属性的属性值preload能够让你在你的HTML页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。
<link rel="preload" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/app.9cc3fec9.css" as="style"><link rel="preload" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/app.cea2d2a9.js" as="script">
<link rel="preload" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/6.036c2560.css" as="style">
<link rel="preload" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/6.ffe5cca3.js" as="script">
HTML5中rel属性的prefetch预加载功能使用
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/0.856d825b.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/1.bc0e3102.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/10.f7418a5b.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/11.d9931a2c.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/12.dbd7fa5b.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/13.73e0d606.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/14.4ad87d4c.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/15.93b85153.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/16.18529748.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/17.614a7855.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/18.4939a3eb.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/2.31094377.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/3.6056cda4.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/4.697e5294.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/5.8394a36d.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/7.8141732b.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/9.fac714a0.css">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/0.88735c7f.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/1.922bc0d8.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/10.aabb009a.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/11.bdee49e5.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/12.41195a05.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/13.8dcf3489.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/14.8c5af0b8.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/15.a867c1d5.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/16.9fd63f45.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/17.667e6712.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/18.4e7a50ee.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/2.ab4ceb52.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/3.f1d3e5b6.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/4.b46cd577.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/5.6ff07f7c.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/7.b6164808.js">
<link rel="prefetch" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/js/9.db2340d0.js">
<link rel="stylesheet" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/app.9cc3fec9.css">
<link rel="stylesheet" href="https://weread-1253731777.file.myqcloud.com/wrwebnjlogic/css/6.036c2560.css">
网友评论