• 前端性能优化之加载与执行(一)



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

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

  • 相关阅读:
    LeetCode(111) Minimum Depth of Binary Tree
    LeetCode(108) Convert Sorted Array to Binary Search Tree
    LeetCode(106) Construct Binary Tree from Inorder and Postorder Traversal
    LeetCode(105) Construct Binary Tree from Preorder and Inorder Traversal
    LeetCode(99) Recover Binary Search Tree
    【Android】通过经纬度查询城市信息
    【Android】自定义View
    【OpenStack Cinder】Cinder安装时遇到的一些坑
    【积淀】半夜突然有点想法
    【Android】 HttpClient 发送REST请求
  • 原文地址:https://www.cnblogs.com/CloverH/p/5244763.html
Copyright © 2020-2023  润新知