js异步加载的3种方式(转载)

1.defer标签 只支持IE
    defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止。有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。
如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。

<script type="text/javascript" defer="defer">
    alert(document.getElementById("p1").firstChild.nodeValue);
</script> 

2.async(async 属性是 HTML5 中的新属性。)

async 属性规定一旦脚本可用,则会异步执行。
注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
注释:有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

<script type="text/javascript" src="demo_async.js" async="async"></script> 

3.创建script,插入到DOM中,加载完毕后callBack;

function loadScript(url, callback){
    var script=document.creatElment("script");
    script.type="text/javascript";
    if(script.readyState){  ie
         script.onReadyState=function(){
             if(script.readyState ="load" || script.readyState = "complete"){
                  script.onReadyState=null;
                  callback();
            }else{
               script.onload=function(){
                   callback();
                 }
            }
        }
      }
    script.src=url;
    document.body.appendChild(script);
}        
时间: 2024-12-27 13:49:08

js异步加载的3种方式(转载)的相关文章

点评js异步加载的4种方式

主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <html> <head> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script typ

JS异步加载的三种方式

js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常模式下下,JS是同步加载的,即优先记载JS,只有当JS文件下载完,dom和css才开始加载,当某些事后我们需要JS异步加载,我们可以通过以下方式来设置异步加载,不同情况下选取不同方式即可 1.defer:defer JS异步下载,dom结构解析完(标签 + 样式(内容不一定下载完))才异步执行 仅I

JS异步加载的几种方式

一:同步加载 我们平时使用的最多的一种方式. <script src="http://yourdomain.com/script.js"></script> <script src="http://yourdomain.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作.所以默认同步执行才是安全的.但这样如果js中有输

javascript脚本异步加载的几种方式

一般而言,javascript脚本一般是建议放在body标签的底部,因为使用script标签加载js时,会停止加载后面的内容而停下来解析脚本并对页面进行渲染,使用src属性加载外部脚本也会造成这样的情况,这样的话,如果在head或者body的前面放入过多的script标签,并且内容很多的时候,会造成页面在解析完所有script标签的内容前有短暂的时间整个页面空白,给用户的体验会很差.但是如果所有的脚本都放在底部,又会造成dom加载完毕后有一段时间页面虽然能看到,但是和用户的交互却很差,因此需要让

js异步加载的三种解决方案

默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本

js异步加载

加载顺序是怎样的? 动态的和静态的都加载完之后才执行ready 还是只有静态的加载完之后就执行了? 页面加载完成之后是指什么才是完全加载完? 什么是并行,什么是异步 脚本的加载应该与文档的加载同时进行,并且不影响DOM的渲染. 文档加载?DOM加载 async属性是HTML5新增的.作用和defer类似,即允许在下载脚本的同时进行DOM的渲染.但是它将在下载后尽快执行(即JS引擎空闲了立马执行),不能保证脚本会按顺序执行.它们将在onload 事件之前完成. 异步加载的三种方式 http://w

页面优化——js异步加载

同步加载 在介绍js异步加载之前,我们先来看看什么是js同步加载.我们平时最常使用的就是这种同步加载形式: <script src="http://XXX.com/script.js"></script> 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行.一般的script标签(不带async等属性)加载时会阻塞浏览器,也就是说,浏览器在下载或执行该js代码块时,后面的标签不会被解析,例如在he

一个小例子理解js异步加载

前几天笔试某公司有这样一道题.编写一个javascript函数,可以在页面上异步加载js,在加载结束后执行callback,并在IE和chrome下可以执行. 就这个题我写了一个DOM方法异步加载js的例子,可以给对于异步不了解的朋友参考感受一下. 众所周知,js是一种单线程的语言,它的Event Loop机制可以看一下阮一峰的这篇博客,讲解的很好 http://www.ruanyifeng.com/blog/2014/10/event-loop.html 下面看一下我写的例子 1 <!DOCT

002-UIImageView和UIButton对比 UIImageView的帧动画 格式符补充 加载图片两种方式 添加删除SUBVIEW

一>.UIImageView和UIButton对比 显示图片 1> UIImageView只是一种图片(图片默认会填充整个UIImageView)  image\setImage: 2> UIButton能显示2种图片 * 背景 (背景会填充整个UIButton)  setBackgroundImage:forState: * 前置(覆盖在背景上面的图片,按照之前的尺寸显示)  setImage:forState: * 还能显示文字 点击事件 1> UIImageView默认是不能