chaihongjun.me

动态使用prerender等预加载技术

动态使用prerender等预加载技术

前端性能优化的预加载技术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是如何提速的相关资料。

动态使用prerender等预加载技术Preconnect, prefetch, prerender....pdf

动态使用prerender等预加载技术Preconnect, prefetch, prerender....pptx


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:柴宏俊»