异步加载js_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 1987 | 回复: 0   主题: 异步加载js        下一篇 
momoda
注册用户
等级:少校
经验:1149
发帖:28
精华:0
注册:2015-7-14
状态:离线
发送短消息息给momoda 加好友    发送短消息息给momoda 发消息
发表于: IP:您无权察看 2015-9-8 10:49:48 | [全部帖] [楼主帖] 楼主

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

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

        如果您的脚本不会改变文档的内容,可将 defer 属性加入到 <script> 标签中,以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本,它将推迟对脚本的解释,直到文档已经显示给用户为止。
        示例: 

  1. <script type="text/javascript" defer="defer">

  2. alert(document.getElementById("p1").firstChild.nodeValue);

  3. </script>


(2) async:

async的定义和用法(是HTML5的属性)
        async 属性规定一旦脚本可用,则会异步执行。
        示例: 

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

复制代码


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


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







该贴被momoda编辑于2015-9-8 10:51:38



赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论