javascript 文件的同步加载与异步加载

原文:[转载]javascript 文件的同步加载与异步加载

 

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 文件的(IE6-9 除外)，这跟 img 的预加载不能类比 )  ,无需特别设置script.type，如果过设置，需要设置为 javascript 类型，否则不会加载 js 文件（text/javascript ，或者带版本号的，如果有特殊需求）
  • html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的(较新的浏览器对阻塞的 js 可以并行加载了，但执行依然是同步的)
  • html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的
  • html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的
  • 使用 Image 对象异步预加载 js 文件(不会被执行,onload 事件不会触发,但是会触发onerror)

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

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

window.onload 事件会在 js 文件加载完毕才触发(即使是异步加载,还有 iframe 中网页的加载  )

 

 

不管是script 标签直接嵌入代码还是引入js文件，  script 标签的 js 代码都是解析一段然后执行一段，因此不要出现类似  在前一个script 标签的代码中使用 变量，在后一个标签的代码中定义变量 这种错误的做法。

 

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

1、

<script>

//同步加载执行的代码

</script>

2、

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

因为是同步的，可以使用document.wirte()， 比如 jsonp ，嵌入一个 js 文件，从服务器取数据并用服务器脚本输出 js 代码向 document 中写入内容.

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() 向文档写入内容，不过如果不在document 加载过程插入，在插入之前使用 document.write() 开启对页面的重写，则异步加载的 js 仍能写入内容，比如页面上一个 按钮的 onclick 回调函数里面document.write(1),然后 headNode.appendChild(scriptNode) ，但是 firefox 和IE 却可以在 document 关闭之前写入(方法是在 xx.js中alert阻止文档关闭)）

测试：在11.js中 alert()（最好的方式是使用 服务器脚本输出js代码，在输出前延迟 iao几秒 , 比如  php : sleep(5) ;不要用 for 循环，js 引擎是单线程执行的，持续执行任何一段代码都会导致其余代码被阻塞）   , 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);
复制代码

 在检测 文件 加载完毕时有一点问题，可以使用非标准的 image.complete ，该属性在 chrome 和 firefox 下只有文件加载过程中才是 false（即使onerror中也是true），而在IE9下在onload 后为 true，未开始加载、加载过程中、加载失败 都是 false，在 IE8 及IE8 以下， onload 中仍然是 false ，需要设置延时检测才能检测到 true,另外,IE 的图片对象在加载之后无论是否成功，会获得一个占位符的图片尺寸，可以通过这个尺寸来检测是否已经完成加载过程的执行(无论 onerror 还是 onload)。

复制代码
var im = new Image();
console.log([1,im.complete,im.width,im.readyState]);
im.onerror=im.onload = function(event){ var e = event||window.event;var eventType = e.type;var host = this;console.log(['callback ',eventType ,host.complete,host.width,host.readyState]);setTimeout(function(){// for ie8-console.log(['callback delay ',eventType ,host.complete,host.width,host.readyState]);},100); 
}
im.src="http://seajs.org/dist/sea.js";
console.log([1,im.complete,im.width,im.readyState]);
复制代码

 

在 IE 中 image 对象有 onreadystatechange 事件， 该事件仅在 成功加载图片后执行,加载 js 文件不会触发该事件

复制代码
var im = new Image();
console.log([im.complete, im.readyState]); // false,uninitialized 
im.onreadystatechange = function(){ console.log([im.complete, im.readyState]); //false,complete setTimeout(function(){ console.log([im.complete, im.readyState]); //true,complete 
},100);}
im.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
复制代码

 

  

 一个加载 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.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 
}
 script.src = url;
复制代码

 

对于第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\');" οnlοad="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\');" οnlοad="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

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/461342.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux中的信号2——alarm、pause函数

linux中的信号2——alarm、pause函数

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 1、alarm函数 函数原型 函数说明 &#xff08;1&#xff09;内核以API形式提供的闹钟&#xff1b; &#xff08;2&#xff09;可以为当前进程定义闹钟&#xff0c;时间到了会发出SIGALRM信号。 &…
阅读更多...
easyexcel 填充模板 格式变了_Qamp;A | 如何制作规范的电子合同模板?

easyexcel 填充模板 格式变了_Qamp;A | 如何制作规范的电子合同模板?

表单中使用电子合同时&#xff0c;不仅需要进行功能设置&#xff0c;还需要制作一份PDF格式的模板&#xff0c;上传到“合同模板”中&#xff0c;才能生成有效的电子合同&#xff0c;接下来&#xff0c;我们一起了解模板的制作方法。制作方法 1. 准备PDF模板首先准备一份PDF格式…
阅读更多...
edoc2中标电子文件管理标准ERMS制定项目

edoc2中标电子文件管理标准ERMS制定项目

2019独角兽企业重金招聘Python工程师标准>>> 据悉&#xff0c;上海鸿翼数字计算机网络有限公司&#xff08;edoc2&#xff09;参加了电子文件管理标准ERMS制定项目的投标&#xff0c;经过精心准备和专业的答辩&#xff0c;凭借多年在电子文件管理领域长期的探索和研…
阅读更多...
文件IO——如何实现非阻塞式IO？

文件IO——如何实现非阻塞式IO？

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、阻塞式IO 1、阻塞式的概念 我们知道&#xff0c;有些函数在调用时&#xff08;比如网络编程中的recv函数&#xff09;&#xff0c;如果某些条件不满足&#xff0c;则会进入等待状态&#xff0c…
阅读更多...
散点画三维曲面图_UG 复杂曲面合金零件的数控加工

散点画三维曲面图_UG 复杂曲面合金零件的数控加工

随着柔性制造、机床数控技术的飞速发展&#xff0c;具有复杂、 精密、小批量、多品种的曲面零件越来越多&#xff0c;如何利用数控 加工技术高质量、高效率加工该类零部件是很有研究价值 的。 本研究利用 UG 软件对复杂曲面合金零件进行三维实 体建模、设计加工工艺过程&#x…
阅读更多...
扫盲：php session缓存至memcached中的方法

扫盲：php session缓存至memcached中的方法

memcached是一套分布式的快取系统&#xff0c;当初是Danga Interactive为了LiveJournal所发展的&#xff0c;但被许多软件&#xff08;如MediaWiki&#xff09;所使用。这是一套开放源代码软件&#xff0c;以BSD license授权协议发布。[1]memcached仅支持一些非常简单的命令 比…
阅读更多...
使用juniversalchardet做字符编码识别

使用juniversalchardet做字符编码识别

为什么80%的码农都做不了架构师&#xff1f;>>> 在抓取网站的页面的时候最烦人的一件事情之一就是识别原站点的编码&#xff0c;通常来说只有GBK&#xff08;GB2312&#xff09;和UTF8两种&#xff0c;不过依旧需要读取大量Http头信息来识别&#xff0c;有些网站则…
阅读更多...
获取系统信息1——linux系统中的时间

获取系统信息1——linux系统中的时间

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、关于时间的概念 1、GMT时间 GMT是格林尼治时间&#xff0c;即格林尼治地区的当地时间。用格林尼治的当地时间作为全球国际时间&#xff0c;用以描述全球性的事件的时间&#xff0c;方便大家记忆…
阅读更多...
判断一个字符串是否为回文-链队(新建，进队，出队)，链栈(新建，进栈，出栈)...

判断一个字符串是否为回文-链队(新建，进队，出队)，链栈(新建，进栈，出栈)...

回文&#xff1a;字符对称排列的字符串&#xff0c;例如ABCBA 思路&#xff1a;根据队&#xff1a;先进先出和栈: 先进后出的原则&#xff0c;进行比较出队和出栈的字符是否相等。如果相等&#xff0c;则为回文。 创建控制台应用程序。 1 #region 字符节点类 2 …
阅读更多...
句法依存分析_复旦大学邱锡鹏教授：词法、句法分析研究进展综述

句法依存分析_复旦大学邱锡鹏教授：词法、句法分析研究进展综述

本文为第十六届自然语言处理青年学者研讨会 YSSNLP2019 报告《词法、句法分析研究进展综述》的简要文字整理&#xff0c;本报告主要回顾词法、句法领域的最新研究进展。 关于报告人&#xff1a;邱锡鹏&#xff0c;复旦大学计算机科学技术学院副教授&#xff0c;博士生导师。于复…
阅读更多...
获取系统信息3——proc文件系统介绍和使用

获取系统信息3——proc文件系统介绍和使用

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、proc文件系统介绍 1、操作系统级别的调试一般很困难 简单的程序可以单步调试&#xff1b;复杂一点的程序可以printf、cout等打印信息调试&#xff08;即输出信息到控制台&#xff09;&#xff0…
阅读更多...
阻止函数源码在控制台输出

阻止函数源码在控制台输出

这是一个很贱的技能&#xff0c;我在谷歌控制台源码里看到的。相信大家都知道&#xff0c;在控制台里只输入函数名&#xff0c;不输入 () 然后按回车&#xff0c;就可以输出源码。 都不会陌生吧&#xff0c;这也有助于我们调试&#xff0c;是个很棒的技巧。不过系统内置的就会输…
阅读更多...
值不值得入手_iPhone11现在还值不值得入手？真实用户说出心里话

值不值得入手_iPhone11现在还值不值得入手？真实用户说出心里话

iPhone11作为苹果走量的一款机型&#xff0c;自发布以来就备受争议&#xff0c;有的朋友说真香&#xff0c;A13iOS只卖4000多&#xff0c;还有的朋友吐槽大黑边、828P的屏幕、信号不好还有充电太慢&#xff0c;特别是现在同价位能买到的安卓旗舰&#xff0c;要5G有5G、要高刷新…
阅读更多...
设备驱动，字符设备驱动、（总线）设备驱动模型、sysfs文件系统、平台设备驱动

设备驱动，字符设备驱动、（总线）设备驱动模型、sysfs文件系统、平台设备驱动

以下内容转载于微信公众号&#xff1a;嵌入式企鹅圈。如有侵权&#xff0c;请告知删除。 学习Linux设备驱动开发的过程中自然会遇到字符设备驱动、平台设备驱动、设备驱动模型和sysfs等相关概念和技术。 对于初学者来说会非常困惑&#xff0c;甚至对Linux有一定基础的工程师而言…
阅读更多...
对于局部变量_对于SQL常用查询优化方法的整理

对于局部变量_对于SQL常用查询优化方法的整理

查询进行优化&#xff0c;应尽量避免全表扫描&#xff0c;首先应考虑在where 及order by 涉及的列上建立索引:尝试下面的技巧以避免优化器错选了表扫描&#xff1a;使用ANALYZE TABLE tbl_name为扫描的表更新关键字分布。对扫描的表使用FORCE INDEX告知MySQL&#xff0c;相对于…
阅读更多...
黄聪：如何使用CodeSmith批量生成代码(原创系列教程)

黄聪：如何使用CodeSmith批量生成代码(原创系列教程)

在上一篇我们已经用PowerDesigner创建好了需要的测试数据库,下面就可以开始用它完成批量代码生成的工作啦. 下面我会一步步的解释如何用CodeSmith实现预期的结果的,事先声明一下,在此只做一个简单的Demo,并不详细的讲解CodeSmith各个强大的功能,有兴趣的朋友可以打开CodeSmith的…
阅读更多...
c语音异或运算符_C语言中的按位异或运算符有什么用处？

c语音异或运算符_C语言中的按位异或运算符有什么用处？

原标题&#xff1a;C语言中的按位异或运算符有什么用处&#xff1f;想知道C语言中的按位异、运算符有什么用处&#xff0c;首先C语言中^为按位异或运算符&#xff0c;若两个二进制位相同&#xff0c;则结果为0&#xff0c;不同为1例&#xff1a;#include "stdio.h"ma…
阅读更多...
HDU2201

HDU2201

水&#xff5e; 分析&#xff1a;n&#xff0c;m。对于第一个人不抽到m号座位概率为&#xff08;n-1&#xff09;/n&#xff0c;第二个人为&#xff08;n-2&#xff09;/&#xff08;n-1&#xff09;.。。。第m个人为1/&#xff08;n-m1&#xff09;.。。。 相乘之后则为 1/n V…
阅读更多...
字符设备驱动基础1——简单的驱动源代码分析

字符设备驱动基础1——简单的驱动源代码分析

以下内容源于朱有鹏嵌入式课程的学习&#xff0c;如有侵权请告知删除。 参考博客&#xff1a;linux驱动开发&#xff08;一&#xff09; - biaohc - 博客园 一、驱动源代码示例 /********module_test.c代码*********/#include <linux/module.h> // module_init module…
阅读更多...
字符设备驱动基础3——使用register_chrdev()函数注册字符设备

字符设备驱动基础3——使用register_chrdev()函数注册字符设备

以下内容源于朱有鹏嵌入式课程的学习与整理&#xff0c;如有侵权请告知删除。 一、系统工作原理 1、工作流程 系统的整体工作流程是&#xff1a;应用层—>API—>设备驱动—>硬件。 操作系统提供的API包括open、read、write、close等函数&#xff0c;它们只是一种操作逻…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023