`

js文件引用方式及其同步执行与异步执行

jsjavascript异步同步加载 
阅读更多

详见： http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp74

 

任何以appendChild(scriptNode) 的方式引入的js文件都是异步执行的 (scriptNode 需要插入document中，只创建节点和设置 src 是不会加载 js 文件的，这跟 img 的与加载不同 )   
html文件中的<script>标签中的代码或src引用的js文件中的代码是同步加载和执行的
html文件中的<script>标签中的代码使用document.write()方式引入的js文件是异步执行的
html文件中的<script>标签src属性所引用的js文件的代码内再使用document.write()方式引入的js文件是同步执行的

1、

<script>

//同步加载执行的代码

</script>

2、

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

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 仍然是同步加载的（异步中的同步，即，这2个文件的加载是分先后次序的）

测试：在11中 alert, 22中 document.write() ,可以看到 22中写入语句被阻塞

5、

下面这种方式，xx.js会在appendChild执行之后异步加载执行

var script = document.createElement("script");

script.setAttribute("src","xx.js");

documenrt.getElementsByTagName("head")[0].appendChild(script);

   

 

一个加载 js 文件的 函数：

var loadJS = function(url,callback){  var head = document.getElementsByTagName('head')[0],   script = document.createElement('script');    script.src = url;   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标准的

if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 

         callback();      }else{          alert("can not load the js file")      }   }}

 

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

分享到：
| js变量以及其作用域详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    浅谈js文件引用方式及其同步执行与异步执行

    在前端开发中，JavaScript文件的引用方式对页面加载性能和用户体验有着直接的影响。...通过本文的详细讲解，读者应该对JavaScript文件引用方式有了深入的理解，并能够在实际开发中根据具体情况灵活运用。

    JavaScript文件的同步和异步加载的实现代码

    在前端开发中，JavaScript文件的加载方式主要分为同步加载和异步加载两种。下面详细介绍这两种加载方式的实现代码及其优缺点。 ### 同步加载 同步加载是最简单的加载方式，通过在HTML文件中使用标签引用JavaScript...

    JavaScript异步加载问题总结

    在探讨JavaScript异步加载问题时，我们需要了解JavaScript文件加载的基本方式，及其对页面加载和执行的影响。根据给定文件的内容，我们将分别解释同步加载和异步加载的概念，以及它们如何影响页面加载过程。 首先，...

    js总结思维导图包含xmind文件

    这份"js总结思维导图"包含的xmind文件，可以以可视化的方式呈现这些复杂的知识点，帮助学习者更加直观地理解JavaScript的全貌。同时，提供的网页版、图片版、SVG版则满足了不同场景下的学习需求，无论是在线浏览还是...

    Js_230(JavaScript中常用的230个知识点)

    "Js_230"这个压缩包文件涵盖了JavaScript中230个常用的知识点，旨在帮助开发者深入理解和掌握这门语言的核心技巧。 1. **基本语法** - 变量声明：`var`, `let`, `const` - 数据类型：原始类型（Number, String, ...

    javascript中的用法与意思

    2. **外部脚本**：可以通过`src`属性引用外部JavaScript文件。 ```html &lt;script src="path/to/script.js" type="text/javascript"&gt; ``` 3. **自定义事件触发**：可以使用`&lt;script&gt;`标签配合DOM事件来动态加载...

    jquery .ajax 局部刷新之后 js无法调用问题解决

    确保外部JavaScript文件是以异步方式加载的，否则可能在DOM未完全加载时尝试访问元素，导致错误。 综上所述，解决`.ajax`局部刷新后js无法调用的问题，关键在于理解DOM更新、作用域、事件绑定和页面生命周期等概念...

    精通JavaScript(图灵计算机科学丛书).pdf

    - 同步与异步的概念比较。 - AJAX请求的发起与响应处理。 - Promise、async/await语法糖的应用场景及优化代码可读性。 6. **模块化开发** - 模块化编程的重要性及其对大型项目管理的意义。 - CommonJS和ES6 ...

    5.JavaScript基础语法.zip

    - async/await：异步编程的新方式，使得异步代码看起来更像同步。 通过学习这个JavaScript基础语法教程，你将掌握JavaScript的基本用法，并能够编写简单的交互式网页。随着深入学习，你还可以探索更多高级特性，如...

    《JavaScript编程全解》PDF版本下载.txt

    根据提供的文件信息，我们可以推断出这是一份关于获取《JavaScript编程全解》PDF版本的指南。虽然直接的文本内容较少，但从标题、描述及标签中可以提炼出关于《JavaScript编程全解》这本书的一些关键信息及其重要性...

    Javascript 技巧大全

    - async/await：基于Promise的更优雅的异步编程方式，使得异步代码看起来更像同步。 8. **事件循环与定时器** - 事件循环：理解浏览器如何处理异步任务，以及Event Loop和Task Queue的角色。 - `setTimeout()`和...

    一个基于vue.js框架开发的在线购物网站源码.zip

    - 静态资源的引用，如CSS样式文件、图片、字体等，通过`import`或`url-loader`处理。 - 可能还有单元测试和集成测试，确保代码的质量和功能的正确性。 总的来说，这个基于Vue.js的在线购物网站源码为我们提供了一个...

    Vue.js面试题.pdf

    - **v-model**：双向数据绑定，常用于表单控件的值与数据模型的同步更新。 #### 4. Vue组件间通信有哪些方式？请描述Vue.js中实现组件通信的方法。 Vue.js提供了多种组件间通信的方式： 1. **父子组件通信**：使用...

    require.jquerytest

    `require.js` 是一个流行的异步模块定义(AMD)实现，它允许开发者在浏览器环境中按需加载JavaScript文件，解决了传统同步加载方式导致的阻塞问题。在这个场景中，`require.jquerytest` 提到了如何使用`require.js`来...

    Vue.js 3.X开发经验及技巧汇总

    本文将根据提供的部分文件内容，详细介绍几个重要的知识点及其应用场景。 #### 1. 使用 `require.context()` 管理多个组件 ##### 场景与问题 当一个页面需要引入多个组件时，传统的写法是逐一导入每个组件，这种...

    字节最新前端面试题.pdf

    - Promise构造函数同步执行，then方法异步执行，遵循微任务(microtask)队列，会在当前脚本或任务队列之后执行。 12. 实现new操作符： - new操作符用于创建对象实例，本质上是对函数进行调用并返回新对象。 13. ...

    js代码-MBOM运行代码

    2. **加载策略**：如同步加载（同步执行）和异步加载（按需加载），对性能的影响。 3. **代码分割**：通过动态导入（`import()`）来延迟加载非关键路径的模块，进一步优化加载速度。 4. **tree shaking**：分析代码...

    JavaSrcipt使用代码大全

    JavaScript，简称JS，是Web开发中的重要脚本语言，用于实现客户端的动态效果和交互。这份"JavaScript实用代码大全"涵盖了各种常见的JavaScript编程技巧和功能，旨在帮助开发者更高效地编写代码。以下是一些关键的...

    java学习笔记

    - 异步JavaScript和XML技术。 - 不刷新整个页面即可局部更新数据。 - XMLHttpRequest对象发送HTTP请求。 #### 五、Linux/Unix操作系统 1. **文件系统**： - inode：文件的元数据，包括文件的权限、大小等信息...

    javascript-problem:javascript问题

    特别是Promise，它为处理异步操作提供了更优雅的方式，而async/await则是Promise的语法糖，使得异步代码看起来更像同步代码，提高了代码的可读性。 在“javascript-problem-main”这个文件中，可能包含了具体的问题...

Magicbox
Global site tag (gtag.js) - Google Analytics