课程咨询 :186 8716 1620      qq:2066486918

昆明Java培训 > 达内新闻 > 昆明java培训分享js文件的同步加载与异步加载
  • 昆明java培训分享js文件的同步加载与异步加载

    发布:昆明Java培训      来源:达内新闻      时间:2016-04-15

  • 昆明java培训说明一下HTML 4.01的script属性charset:可选。指定src引入代码的字符集,大多数浏览器忽略该值。defer: boolean,可选。

    延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行。

    除IE和较新版本的Firefox外,其他浏览器并未支持。

    language:已废弃。

    大部分浏览器会忽略该值。

    src:可选。指定引入的外部代码文件,不限制后缀名。

    type:必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执行。

    HTML5中的script属性:

    script标签在HTML5中除了具备HTML5新标准定义的属性以外,和HTML4.01相比移除了language属性,修改了type属性为可选的(默认text/javascript),并新增了一个属性async。

    async :boolean,属性的作用,定义脚本是否异步执行,取值true或false。

    如果async设为true,会忽略defer属性。

    异步执行的js文件被假定为不使用document.write()向加载中的document写入内容,因此不要在 异步执行的js文件的加载执行过程中使用document.write()

    除了script标签属性外,页面引入js文件的方式影响其加载执行方式:

    任何以添加script节点(例如appendChild(scriptNode) )的方式引入的js文件都是异步执行的(scriptNode需要插入document中,只创建节点和设置src是不会加载js文件的,这跟img的预加载不能类比)

    html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的

    html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的

    html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的

    使用Image对象异步预加载js文件(不会被执行)

    不要使用类似下面这种做法,这样并不会发起加载js文件的请求:

    divNode.innerHTML = '<script src="xxx.js"></script>';

    window.onload事件会在js文件加载完毕才触发(即使是异步加载)

    =====================================================

    1、

    <script>

    //同步加载执行的代码

    </script>

    2、

    <script src="xx.js"></script> //同步加载执行xx.js中的代码

    3、

    <script>

    document.write('<script src="xx.js"><\/script>'); //异步加载执行xx.js中的代码

    </script>

    4、

    <script src="xx.js"></script>

    xx.js中有下面代码:

    代码如下:

    document.write('<script src="11.js"><\/script>');

    document.write('<script src="22.js"><\/script>');

    则xx.js和11.js、22.js都是同步加载和执行的。

    如果xx.js、11.js和22.js以插入script节点方式异步加载,则11.js和22.js是异步加载的,

    如果xx.js以script节点方式异步加载, 11.js和22.js以document.write(script)方式加载,则11.js和22.js是同步加载的(经最新的浏览器测试,在chrome下,xx.j异步加载执行已经无法使用document.write()向文档写入内容的 ,但是firefox和IE却可以在docume nt关闭之前写入(方法是在html中alert阻止文档关闭))

    测试:在11.js中alert()(不要用for循环,浏览器是单线程执行的,持续执行任何一段代码都会导致其余代码被阻塞), 22.js中console.log() ,可以看到22.js中的代码被阻塞

    5、 下面这种方式,xx.js会在appendChild执行之后异步加载执行

    代码如下:

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

    script.setAttribute("src","xx.js");

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

    6、使用Image对象异步预加载js文件(不会被执行)

    Image的src被赋值时即发起请求,而且对文件类型不挑剔(图片也可能是有脚本动态创建的,比如验证码),因此可以将js文件的url赋给image.src,js加载之后被浏览器缓存.

    代码如下:

    var img = new Image();

    img.onload = function(){ alert(1); } ; //由于返回的js文件MIME不是图片,onload回调函数并不会被触发

    img.src = 'http://localhost/test/loadjs/try.2.js';

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

    var h = document.getElementsByTagName("head")[0];

    //执行js

    s.src=img.src;

    h.appendChild(s);

    一个加载js文件的 函数:

    代码如下:

    var loadJS = function(url,callback){

    var head = document.getElementsByTagName('head');

    if(head&&head.length){

    head = head[0];

    }else{

    head = document.body;

    }

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

    script.src = url;

    script.type = "text/javascript";

    head.appendChild( script);

    script.onload = script.onreadystatechange = function(){

    //script标签,IE下有onreadystatechange事件, w3c标准有onload事件

    //这些readyState是针对IE8及以下的,W3C标准的script标签没有onreadystatechange和this.readyState ,

    //文件加载不成功onload不会执行,

    //(!this.readyState)是针对W3C标准的, IE 9也支持W3C标准的onload

    if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){

    callback();

    }

    }//end onreadystatechange

    }

    对于第4点的测试(同步加载)(其中插入alert很容易看到加载时的阻塞)

    tryjs.html

    代码如下:

    <!DOCTYPE html>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="tryjs.js"

    onload="if(!document.all){console.log('outer js callback, not IE');}"

    onreadystatechange="console.log('outer js callback ',this.readyState,' IE');"></script>

    <body>

    </body>

    </html>

    tryjs.js

    代码如下:

    console.log('write begin');

    document.write('<script src="try.1.js" onreadystatechange="console.log(\'file 1 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 1 callback,NOT IE \');}"><\/script>');

    document.write('<script src="try.2.js" onreadystatechange="console.log(\'file 2 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 2 callback,NOT IE \');}"><\/script>');

    console.log('write finished');

    try.1.js

    代码如下:

    console.log('loadjs 1 begin');

    console.log('loadjs 1 finished');

    try.2.js

    代码如下:

    console.log('loadjs 2 begin');

    console.log('loadjs 2 finished');

    测试结果(file 2和file 1的callback complete在IE7\8\9次序不确定)

    IE 7:

    日志: outer js callback loading IE

    日志: outer js callback loaded IE

    日志: write begin

    日志: write finished

    日志: outer js callback complete IE

    日志: file 1 callback loading IE

    日志: file 2 callback loading IE

    日志: loadjs 1 begin

    日志: loadjs 1 finished

    日志: loadjs 2 begin

    日志: loadjs 2 finished

    日志: file 2 callback complete IE

    日志: file 1 callback complete IE

    IE8:

    日志: outer js callback loading IE

    日志: outer js callback loaded IE

    日志: write begin

    日志: write finished

    日志: outer js callback complete IE

    日志: file 1 callback loading IE

    日志: file 2 callback loading IE

    日志: loadjs 1 begin

    日志: , loadjs 1 finished

    日志: loadjs 2 begin

    日志: loadjs 2 finished

    日志: file 2 callback complete IE

    日志: file 1 callback complete IE

    IE9:

    日志: write begin

    日志: write finished

    日志: outer js callback complete IE

    日志: file 1 callback loading IE

    日志: file 2 callback loading IE

    日志: loadjs 1 begin

    日志: loadjs 1 finished

    日志: loadjs 2 begin

    日志: loadjs 2 finished

    日志: file 1 callback complete IE

    日志: file 2 callback complete IE

    FIREFOX:

    write begin

    write finished

    outer js callback, not IE

    loadjs 1 begin

    loadjs 1 finished

    file 1 callback,NOT IE

    loadjs 2 begin

    loadjs 2 finished

    file 2 callback,NOT IE

    CHROME:

    write begin

    write finished

    outer js callback, not IE

    loadjs 1 begin

    loadjs 1 finished

    file 1 callback,NOT IE

    loadjs 2 begin

    loadjs 2 finished

    file 2 callback,NOT IE

    学习是需要每天进步一小点,那么我们现在最好的努力方式便是在现有的基础上付出更多的努力。昆明java培训为你提供一个好的学习机会,你愿意给自己一个改变的机会嘛?

    推荐文章

上一篇:昆明java培训机构:Java同步知识分享

下一篇:透明效果上传按钮控件样式

最新开班日期  |  更多

Java--零基础全日制班

Java--零基础全日制班

开班日期:11/30

Java--零基础业余班

Java--零基础业余班

开班日期:11/30

Java--周末提升班

Java--周末提升班

开班日期:11/30

Java--零基础周末班

Java--零基础周末班

开班日期:11/30

  • 网址:http://km .java.tedu.cn      地址:昆明市官渡区春城路62号证券大厦附楼6楼
  • 课程培训电话:186 8716 1620      qq:2066486918    全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56