夏日博客

A-A+

javascript中含有defer属性在IE下的执行顺序

2016年01月14日 前端设计 暂无评论 阅读 5 views 次

其实就是简单的利用defer属性,让浏览器读JS脚本的时候完全不等脚本开始读就开始读下面的图片啊,html代码了,然后让js脚本自己在那里慢慢读取完以后再执行

defer现象描述,代码如下:

  1. <HTML><HEAD><TITLE>JavaScript defer attribute test page - tests deferring scripts in browsers</TITLE>  
  2. <SCRIPT language=JavaScript type=text/javascript>  
  3.   <!--  
  4.  var msg = "";  
  5.  //-->  
  6.   </SCRIPT>  
  7. <!-- 这里是内部defer 先暂缓执行，一直往下走-->  
  8. <SCRIPT language=JavaScript defer type=text/javascript>  
  9.   <!--  
  10.  msg += "Inline Head Deferredn";  
  11.  //-->  
  12.   </SCRIPT>  
  13. <!-- 没有defer 最先被执行 -->  
  14. <SCRIPT language=JavaScript type=text/javascript>  
  15.   <!--  
  16.  msg += "Inline Headn";  
  17.  //-->  
  18.   </SCRIPT>  
  19. <!-- 外链defer 肯定是最后执行的-->  
  20. <SCRIPT language=JavaScript src="defer.files/extjs1.js" defer   
  21. type=text/javascript></SCRIPT>  
  22. <!-- head内的外链，无所谓，从上往下被顺序执行，也就是第二个被执行的-->  
  23. <SCRIPT language=JavaScript src="defer.files/extjs2.js"   
  24. type=text/javascript></SCRIPT>  
  25.   
  26. <BODY class=av>  
  27. <!--body 内的defer 先暂缓执行 程序继续往下走-->  
  28. <SCRIPT language=JavaScript defer type=text/javascript>  
  29.   <!--  
  30.  msg += "Inline Body Deferredn";  
  31.  //-->  
  32.   </SCRIPT>  
  33. <!--body内的语句，程序执行到这里，这是第三个被执行的 -->  
  34. <SCRIPT language=JavaScript type=text/javascript>  
  35.   <!--  
  36.  msg += "Inline Bodyn";  
  37.  //-->  
  38.   </SCRIPT>  
  39. <A onclick="alert(msg);return false;"   
  40. href="javascript:;">Test Defer Attribute</A>  
  41. <!-- 这里面有外链，且有defer，但是上面的defer应该执行了 这个语句接着往下放到head外链defer的下面-->  
  42. <SCRIPT language=JavaScript src="defer.files/extjs3.js" defer   
  43. type=text/javascript></SCRIPT>  
  44. <!-- 这里是外链-->  
  45. <SCRIPT language=JavaScript src="defer.files/extjs4.js"   
  46. type=text/javascript></SCRIPT>  
  47. </BODY></HTML>  

其实defer的告诉浏览器读js脚本的时候完全不等脚本开始读下面的代码。然后让js脚本自己读完后在执行defer的脚本。给外链的js脚本添加defer="defer" 或 defer="true",例 特别是比较大的脚本，提高整个网页的载入速度是非常明显的。

如果不声明defer="defer" 默认是 false

总结:

普通的是边解释，边执行

defer的是网页脚本加载完的后再执行

online 的所有的内容加载完后(包括图片）执行

注意:

defer="true"还可以用作defer="defer",似乎使用defer="defer"比较普遍,我查看一个微软的文档,好像XTHML格式的网页用defer="true"比较恰当.

另外注意，defer="true"这个东西不要在脚本程序段中调用document.write命令,因为将产生直接输出效果.

如果不显式声明 defer,则其默认值 是false.

标签：

给我留言