前端性能优化的预加载技术dns-prefetch,prefetch,preconnect,prerender等。这几个技术都是先做了一定的工作。
关于这几个预加载技术的区别,大致有这么一个特征。
<link rel="dns-prefetch" href="//www.example.com">
dns-prefetch从名称可以看出来是针对DNS解析优化的,提前对需要解析的域名做好准备,而不是等待链接跳转之后,所以,在一定程度上优化了前端页面。
<link rel="preconnect" href="//www.example.com">
preconnect从字面看就是预连接的意思了,包括DNS查找,TCP连接,和TLS的协商,当然还没有抓取和加载
<link rel="prefetch" href="//www.example.com/example.js">
prefetch 则主要是对资源类型文件(js,css,images)进行预加载,而且是可缓存的资源文件。当然整个html文档也可以预加载。
<link rel="prerender" href="//www.example.com/index.html">
prerender字面解释是预渲染,显然已经把DNS查找解析,TCP连接直到资源的预加载都做过了,从网上的介绍可以理解成在浏览器一个隐藏的TAB页已经打开了,只不过我们是看不到。
以上具体的介绍和差异可以看这里 https://w3c.github.io/resource-hints/#resource-hints
这里要介绍的一个优化的方法是针对prerender。思路是这样:当我们鼠标指向当前页面的某个锚点(<a>)的时候,就动态的在当前页的<head>区域添加这个对应链接的prerender,当鼠标离开的时候则,删除这个对应的prerender,具体代码如下:
//封装成一个预加载函数,用来预加载鼠标指向的超链接(.html文件) function preReady(){ $("a:not([href=''][href='#'])").on('mouseenter', function(event) { var bool = false; //获取鼠标指向的完整URL的href值 var pre_url = $(this).attr("href"); $("link").each(function() { if (($(this).attr("href") == pre_url)) { //判断是否已经存在存在则不添加 bool = true; } }); if (!bool) { $("head").append('<link rel="preconnect" href="+pre_url+'+'"'+ '>'); $("head").append('<link rel="prefetch" href="+pre_url+'+'"'+ '>'); $("head").append('<link rel="prerender" href="+pre_url+'+'"'+ '>'); } }); $("a:not([href=''][href='#'])").on('mouseleave', function(event) { var pre_url = $(this).attr("href"); //只要鼠标移出就删除 所以不用判断 $('link[href="+pre_url+'+'"'+'][rel="preconnect"]').remove(); $('link[href="+pre_url+'+'"'+'][rel="prefetch"]').remove(); $('link[href="+pre_url+'+'"'+'][rel="prerender"]').remove(); }); } //页面初始化 $(function() { preReady(); //鼠标指向链接资源预加载 });
附件是Google性能专家,“Web加速”团队的工程师谈了关于预加载技术以及chrome是如何提速的相关资料。
Preconnect, prefetch, prerender....pdf
Preconnect, prefetch, prerender....pptx