异步加载 JS 的方法

最新推荐文章于 2024-05-12 12:30:08 发布

weixin_34110749

最新推荐文章于 2024-05-12 12:30:08 发布

阅读量60

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xiaoyuchen/p/10538160.html

版权

理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，因为已经按照标签的次序加载了相应脚本。

要等到dom文档解析完才会被执行
只有IE能用

脚本延迟执行 - deffer

 <script src="deferredScript.js" defer></script>

添加defer属性相当于告诉浏览器：

马上开始加载这个脚本吧
等到文档就绪，且此前所有具有defer属性的脚本都结束运行之后再运行它。
==只支持IE==

<!DOCTYPE html>
<html>
<head lang="en">
    <!--metadata and scriptsheets go here-->
    <script src="headScript.js"></script>
    <script src="deferredScript.js" defer></script>
</head>
<body>
    <!--content goes here-->
</body>
</html>

脚本的完全并行化 - async

HTML5的async属性，但是要注意，它是一种混乱的无政府状态。

async属性是HTML5新增的。作用和defer类似，即允许在下载脚本的同时进行DOM的渲染。但是它将在下载后尽快执行（即JS引擎空闲了立马执行），不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
只能加载外部脚本
不能把js写在script标签里
可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载，async会覆盖differ
deffer的优先值比async高，dom渲染完成会优先执行deffer

<!DOCTYPE html>
<html>
<head lang="en">
    <!--metadata and scriptsheets go here-->
    <script src="headScript.js"></script>
    <script src="deferredScript.js" defer></script>
</head>
<body>
    <!--content goes here-->
    <script src="asyncScript1.js" async defer></script>
    <script src="asyncScript2.js" async defer></script>
</body>
</html>

执行顺序

各个脚本文件加载，接着执行headScript.js，
紧接着在DOM渲染的同时会在后台加载defferedScript.js。
接着在DOM渲染结束时将运行defferedScript.js和那两个异步脚本，要注意对于支持async属性的浏览器而言，这两个脚本将做无序运行。

创建script标签，插入DOM中

function loadScript(url,callback){//url是文件名，callback是需要调用的函数
    var script=document.createElement("script");
    script.type="text/javascript";//设置Type
    if(script.readyState){
        script.onreadystatechange=function(){
            if(script.readyState=="complete"||script.readyState=="loaded"){
                callback();
            }
        }
    }
    else{
        script.onload=function(){
        test();
        }
    }
    script.src="url";//设置src
    document.head.appendChild(script);
}

转载于:https://www.cnblogs.com/xiaoyuchen/p/10538160.html

weixin_34110749

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步加载 JS 的方法

理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，因为已经按照标签的次序加载了相应脚本。要等到dom文档解析完才会被执行只有IE能用脚本延迟执行 - deffer <script src="deferredScript.js" defer></script>添加defer属性相当于告诉浏览器：马上开始...
复制链接

扫一扫