JavaScript script标签同步异步加载过程

同步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。

<script src="http://xxx/script.js"></script>
<!--所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。-->

异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

defer

<script src="http://xxx/script.js" defer></script><!--要等dom文档全部解析完（dom树生成）才会被执行。-->

async

<script src="http://xxx/script.js" defer></script><!--加载完就执行;async只能加载外部脚本，不能写js到标签里。-->

Script DOM Element

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。
以下是封装函数兼容性的异步加载js文件，并且可以按需执行该文件里面的函数（按需加载）

<script>function loadScript(url,callback){//url是按需加载的js文件//callback是按需加载的js文件中某个函数// 1. 创建一个script标签var script = document.createElement('script');    // 处理ie的兼容if(script.readyState){script.onreadystatechange = function(){// 如果script已经下载完成if(script.readyState == 'complete' || script.readyState == 'loaded'){callback();}}}else{// 监听script的下载的状态 当状态变为下载完成后 再执行callbackscript.onload = function(){callback();}}//在后面引入的目的是如果在IE上如果下载太快（比读程序还快）//IE的readystatechange 事件检测状态码的时候，它早已经从loading变成complete或者loaded（以极快的速度加载完了文件，你还没来得及检测）// 那你再检测它就不会变了，它一直都是complete或者loaded//这个时候就是马后炮了，检测也没用了。// 2. 给script标签添加src 引入一个js文件script.src = url;// 3. 追加到bodydocument.body.appendChild(script);}</script>

补充：document三个状态

document.readyState === "loading" //表示document仍在加载
document.readyState === "interactive"//文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
interactive //活跃状态，dom树绘制完成
document.readyState === "complate" T文档和所有子资源已完成加载。状态表示 [load]

JavaScript script标签同步异步加载过程相关推荐

script标签的同步异步加载
script标签默认是同步加载的,也就是说,当读到script标签是引入外部js文件的,会立即停止对页面的向下解析,然后下载脚本并且执行,如果说js文件相对来说比较大,而且网速什么的又不是很好,那么用 ...
javascript 文件的同步加载与异步加载
原文:[转载]javascript 文件的同步加载与异步加载 HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: bool ...
HTML5 script元素async,defer异步加载
原文地址:HTML5′s async Script Attribute (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再注: 建议使用 defer,但是经测试发现 defer 属性对页面内 ...
JS异步加载及解决方式
1.js中的同步加载和异步加载有什么不同? javascript语言是单线程机制.所谓单线程就是按次序执行,执行完一个任务再执行下一个. 对于浏览器来说,也就是无法在渲染页面的同时执行代码. 同步加载 ...
combotree 可以异步加载吗_Unity AssetBundle 资源打包，加载，本地缓存方式，安卓，PC本地加载路径问题...
AssetBundle的定义和作用: 1,AssetBundle是一个压缩包包含模型.贴图.预制体.声音.甚至整个场景,可以在游戏运行的时候被加载. 2,AssetBundle自身保存着互相的依赖关系 ...
JavaScript异步加载与同步加载
关于同步加载与异步加载的区别同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像).渲染.代码执行. 异步加载:异步加载又叫非阻塞,浏览器在下 ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
javascript异步加载
这里先解释html在浏览器的一般加载流程. 用户输入搜索内容,浏览器发送搜索内容到服务器,服务器返回html文件.这个过程十分复杂,包含多个层次的数据传输.这里只讨论js代码加载,不再展开. 浏览器加 ...
同步加载、异步加载、延迟加载
一.同步加载平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...