zoukankan      html  css  js  c++  java
  • 编写高性能的JavaScript脚本的加载与执行(2)

     非阻塞的脚本(续)

    2. 动态脚本元素

    要知道<script>和普通的html标签并没有本质的区别,所以可以利用标准的DOM方法动态的添加脚本文件引用。方法如下:

    var script = document.createElement("script");

    script.type = "text/javascript";

    script.src = "file1.js";

    document.getElementsByTagName("head")[0].appendChild(script);

    当这个标签一旦加入到html中,脚本文件就开始下载。这种方法的一个特点就是,文件下载和执行并不阻塞html页面其它部分的处理。通常将这样的脚本放在<head>中较之<body>更加安全,尤其是文件包含的代码需要在页面的load事件中执行。如果body的内容还没有被完全的加载,IE还会弹出“禁止操作”的错误。

    当脚本文件下载完成之后,脚本立即执行(FF、Opera会等待前一个以同样方式添加的脚本执行)。当脚本自执行时,这没什么问题。但是如果脚本包含页面中其它脚本使用的interfaces,你需要确认脚本已经加载完成并且可用。幸好,当获得script标签的src的值之后,Firefox, Opera, Chrome, and Safari 3+ 会触发一个load事件。

     var script = document.createElement("script")

    script.type = "text/javascript";

    //Firefox, Opera, Chrome, Safari 3+

    script.onload = function(){

    alert("Script loaded!");

    };

    script.src = "file1.js";

    document.getElementsByTagName("head")[0].appendChild(script);

    IE则提供了另外一种解决方案--readystatechange事件。根据下载

    脚本文件所处的状态,readyState 的值有以下几种:

    "uninitialized"

    默认状态

    "loading"

    开始下载

    "loaded"

    下载完成

    "interactive"

    下载完成,但是并非全部可用

    "complete"

    所有数据可用

    IE的实现方式:

    var script = document.createElement("script")

    script.type = "text/javascript";

    script.onreadystatechange = function(){

    if (script.readyState == "loaded" || script.readyState == "complete"){

    script.onreadystatechange = null;

    alert("Script loaded.");

    }

    };

    script.src = "file1.js";

    document.getElementsByTagName("head")[0].appendChild(script);

    下面是综合以后的通用方法:

    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);

    }

    The loadScript() function is used as follows:

    loadScript("file1.js", function(){

    alert("File is loaded!");

    });

    现在你可以按这种动态方式加载脚本了,但是你仍然需要考虑这些文件的下载顺序。主流浏览器中只有FF和Opera保证脚本的执行顺序和你指定的下载顺序一致,其他浏览器将按照脚本文件从服务器返回的顺序来执行。虽然如此,我们仍然有替代的解决方案:

    loadScript("file1.js", function(){

    loadScript("file2.js", function(){

    loadScript("file3.js", function(){

    alert("All files are loaded!");

    });

    });

    });

    这样我们就能保证脚本文件的下载顺序严格的按照file1-file2-file3的方式进行。

     注明:以上内容来自:<High Performance JavaScript>by Nicholas C. Zakas

  • 相关阅读:
    求职经验丨应届毕业生,如何找到一份程序员工作呢?
    C++ 为什么能够流行几十年?C++ 之父为你揭晓答案!
    C/C++最大的祸害是什么?内存错误,舍它其谁!
    C语言丨关于结构体内存对齐,这份干货我收了,你随意~
    11月程序员平均工资又跌了?真是跌宕又起伏的一年!
    不熟悉C++面向对象?了解C++面向对象编程,看这篇够了!
    C++基础总结(六):C++进阶——模板和STL入门
    团队-团队编程项目作业名称-成员简介及分工
    Auto-close message box
    Adding a splash screen to your dialog based application
  • 原文地址:https://www.cnblogs.com/1000/p/1714911.html
Copyright © 2011-2022 走看看