zoukankan      html  css  js  c++  java
  • 前端性能优化之加载与执行(一)


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

    由于脚本会阻塞页面其他资源的下载,因此推荐将所有的<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下载,在大型的应用开发中通常不会采用这种方法。

  • 相关阅读:
    Harbor安装 -- 企业级Registry仓库
    https原理
    第十节
    第九节
    第八节
    Spring中用到的部分设计模式
    代理模式及实现
    单例模式的实现
    索引
    第九章 集合
  • 原文地址:https://www.cnblogs.com/CloverH/p/5244763.html
Copyright © 2011-2022 走看看