zoukankan      html  css  js  c++  java
  • 非堵塞 延迟脚本 高性能

    1、延迟解析

    <script type="text/javascript" src="file1.js" defer></script>     defer告诉解析器该脚本不会修改Dom,可以迟点再解析执行

    也可以写在网页内脚本
    <script defer>
        alert("defer");
    </script>
     
    2、动态生成脚本连接
    function loadScript(url, callback){
        var script = document.createElement("script"),
              script.type = "text/javascript";
     
        if (script.readyState) {                                                                  //IE
            script.onreadystatechange = function()  {
                if (script.readyState == "loaded" || script.readyState == "complete")  {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {                                                                        //Others
            script.onload = function(){
                callback();
             };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
    使用方式:
    loadScript("file1.js", function(){
        loadScript("file2.js", function(){                  //这里动态加载了三个脚本,注意加载的顺序,Firefox和opera会按你写的顺序执行,而有些浏览器则是按照它们从服务器返回的顺序执行
            loadScript("file3.js", function(){
                alert("All files are loaded!");
            });
        });
    });
     
     
    3、ajax 脚本注入
    var xhr = new XMLHttpRequest();
    xhr.open("get", "file1.js", true);
    xhr.onreadystatechange = function()  {
        if (xhr.readyState == 4)  {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)  {
                var script = document.createElement("script");
                      script.type = "text/javascript";
                      script.text = xhr.responseText;
     
                document.body.appendChild(script);
            }
        }
    };
    xhr.send(null);
     
     
     
    推荐的模式(第二种),在页面里写动态生成脚本的函数,再动态加载可以延迟执行的脚本
    <script type="text/javascript">
    function loadScript(url, callback)  {
        var script = document.createElement("script"),
              script.type = "text/javascript";
     
        if (script.readyState)  {                                                   //IE
            script.onreadystatechange = function()  { 
                if (script.readyState == "loaded" || script.readyState == "complete")  {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {                                                                       //Others
            script.onload = function(){
                callback();
            };
        }
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }
     
    loadScript("the-rest.js", function(){
        Application.init();
    });
    </script>
  • 相关阅读:
    (转载)Hadoop示例程序WordCount详解
    Eclipse打不开,闪退
    【python】实例-把两个无规则的序列连接成一个序列,并删除重复的元素,新序列按照升序排序
    【python】格式化输出
    【python】序列、元组、集合、字典和range函数
    【python】实例-判断用户输入数字的类型
    【python】文件操作
    python 异常类型----后期需理解调整
    【python】OOP编程----类的定义及封装
    【python】if&&for&&while语句
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5166185.html
Copyright © 2011-2022 走看看