前端性能优化之加载与执行

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端性能优化之加载与执行相关的知识,希望对你有一定的参考价值。


学习了一阵的前端的优化,是时候终结一下了,接下来会陆续从各个方面终结前端的优化方案。
-----------------------------------------------------------------------------------

由于脚本会阻塞页面其他资源的下载,因此推荐将所有的<script>标签尽可能放<body>标签的底部,以尽量减少对整个页面下载的影响。(ie8、FF3.5、Safari4、Chrome2都允许并行下载JS文件)
一段内嵌脚本放在引用外链样式表的<link>标签之后会导致页面阻塞去等待样式表的下载。
无阻塞的脚本:延迟脚本,动态脚本
延迟脚本:<script type=”text/javascript” defer> defer属性指明本元素包含的脚本不会修改DOM,带有这个元素的js文件下载时不会被执行,无论内嵌还是外链,这类文件可以与页面的其他资源并行下载。任何带有defer属性的script元素在加载DOM完成之前都不会被执行。该属性只有IE4+和ff3.5+支持,其他的会忽略,已默认的方式加载。
动态脚本(最通用的方案):

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.src=”file.js”;
document.getElmentByTagName(“head”)[0].appendChild(script);

 


无论何时下载,文件的下载执行过程都不会阻塞页面其他过程。文件下载完成后马上执行,如果当代码中含共页面其他脚本调用的接口时,就会有问题,这是需要跟踪脚本下载完成且准备就绪。
Ff,Safari3+,Opera,Chrome以上版本script元素接受完成时触发一个load事件

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.onload=function(){
//....................
}
script.src=”file.js”;
document.getElmentByTagName(“head”)[0].appendChild(script);

 

IE会触发一个readyStateChange事件,script提供一个readySate属性,有五个属性值:uninitialized,loading,loaded,intera,complete,实际运用中最有用的是complete和loaded,IE在表示最终状态的readySate值时不一致,有时<script>到达loaded状态而不会到达complete,有时<script>不经过loaded状态就到达了complete状态,因此同时检测两种状态最靠谱。

var script=document.createElement(“script”);
script.type=”text/javascript” ;
script.onreadystatechange=function(){
    if(script.readyStae==”loaded”||script.readyStae==”complete”);{
        script.onreadystatechange=null;
        //............
    }
}
script.src=”file.js”;
document.getElmentByTagName(“head”)[0].appendChild(script);

兼容版:

function loadScript(url,callback){
    var script=document.createElement(“script”);
    script.type=”text/javascript” ;
    if(script.readyState){
      script.onreadystatechange=function(){
           if(script.readyStae==”loaded”||script.readyStae==”complete”);{
            script.onreadystatechange=null;
            callback();
       }     }   }
else{   script.onload=function(){   callback();   }   script.src=url;   document.getElmentByTagName(“head”)[0].appendChild(script); } //加载多个文件: loadScript(“file1.js”,function(){   loadScript(“file2.js”,function(){     loadScript(“file3.js”,function(){     });   }); });

 

还可以通过XMLHttpReques脚本注入,由于同源策略,这种方法有很多局限性,比如JS文件无法从CDN下载,在大型的应用开发中通常不会采用这种方法。

以上是关于前端性能优化之加载与执行的主要内容,如果未能解决你的问题,请参考以下文章

Web前端性能优化详解之CSS与JS加载

前端面试题之性能优化篇

前端代码性能优化

前端性能优化 css和js的加载与执行

前端性能优化之按需加载(React-router+webpack)

前端性能优化-异步加载