设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 334|回复: 0

[高手进阶] 异步加载js

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2015-9-16 08:20:43 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
异步加载js
默认情况javascript是同步加载的,也就是javascript的加载时是会阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

(1) defer,只支持IE
        defer属性的定义和用法(我摘自w3school网站)
        defer属性规定是否对脚本执行进行延迟,直到页面加载完成为止
        有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本就不一定是了。

        如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
        示例:
  1. <script defer="defer">
  2. alert(document.getElementById("p1").firstChild.nodeValue);
  3. </script>
复制代码
      补充:defer相当于告诉浏览器立即下载,但延迟执行。脚本会被延迟到整个页面都解析完毕后再运行。(2) async:
        async的定义和用法(是HTML5的属性)
        async 属性规定一旦脚本可用,则会异步执行。
        示例:
  1. <script src="demo_async.js" async="async"></script>
复制代码
        注释:async 属性仅适用于外部脚本(只有在使用 src 属性时)。
        注释:有多种执行外部脚本的方法:
                •如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
                •如果不使用 async 且 defer="defer":脚本将在页面完成解析时执行
                •如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

        补充:与defer类似,不同的是,标记为async的脚本并不保证按照指定它们的先后顺序执行。
                因此,确保脚本间互不依赖非常重要。
                建议异步脚本不要在加载期间修改DOM。


(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
  1. function loadScript(url, callback){
  2.         var script = document.createElement_x("script")
  3.         script.type = "text/javascript";
  4.         if (script.readyState){ //IE
  5.                 script.onreadystatechange = function(){
  6.                         if (script.readyState == "loaded" || script.readyState == "complete"){
  7.                                 script.onreadystatechange = null;
  8.                                 callback();
  9.                         }
  10.                 };
  11.         } else { //Others: Firefox, Safari, Chrome, and Opera
  12.                 script.onload = function(){
  13.                         callback();
  14.                 };
  15.         }
  16.         script.src = url;
  17.         document.body.appendChild(script);
  18. }
复制代码

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:41

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表