异步加载（延迟加载）与同步加载

最新推荐文章于 2024-08-07 18:28:29 发布

weixin_33744141

最新推荐文章于 2024-08-07 18:28:29 发布

阅读量242

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/changyangzhe/p/5760634.html

异步加载（延迟加载）与同步加载

1、同步加载，等待下载并执行完成后继续

我们平时使用的最多的一种方式，就是顺着页面解析的顺序依次加载需要的资源文件，如.css、.js、img等资源。

<script src="http://yourdomain.com/script.js"></script>

包含在 <script>元素内部的代码将被从上至下依次执行。

在解析外部js文件（或者下载该文件）的时候，页面的处理会暂时停止。

引入外部文件的时候，如果<script></script>之间有脚本，将会被忽略。

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

所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。

所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。

2、延迟脚本：添加defer="defer"属性

使用<script>的defer属性：会在遇到</html> 标签后再执行。只适用于外部脚本。

<script type="text/javascript" defer = "defer" src = "example1.js"></script>

3、异步脚本：添加async属性，不保证执行顺序

目的是保证不让页面等待脚本的下载和执行。

<script type="text/javascript" async = "async" src = "example1.js"></script>

异步脚本一定会在页面load之前执行。

4、延迟加载js的方法，对应于预加载，在load事件之后动态创建标签并加载

动态添加文件，适用于大多数的文件：

onload事件：

在页面元素完全加载完成之后（包括图像、js文件、css文件等外部文件），就会触发window对象上的load事件。

两种定义方式：

1、利用跨浏览器事件对象来绑定

EventUtil.addHandler(window,"load",function(event){
    console.log("loaded!");
}

2、直接写入页面内，事件添加到<body>上

<body οnlοad="console.log('loaded!')">

当然除了作用于body上，也可以为图像元素指定onload事件。

<img src="smile.png" onload = "console.log('img was loaded!')">

预加载图片便是这样，先创建一个图片对象，然后给图片延迟添加src属性，这样就可以在页面加载完成之后的空闲时间内，加载想要预加载的图片。

EventUtil.addHandler(window,"load",function(){
    var image = new Image();//这里可以使用for循环来生成多张图片对象，然后依次赋上src属性，这样就可以提前下载图片了，也可以延迟执行这个动作。
    EventUtil.addHandler(image,"load",function(event){
        console.log("loaded!");
    })
    image.src = "smile.png";
}

当然也可以用来生成<script>标签。

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");//或者先把元素写到页面中，然后动态赋予src值。
        element.src = "defer.js";
        document.body.appendChild(element);
    }
    if (window.addEventListener)
        window.addEventListener("load", downloadJSAtOnload, false);//dom2
    else if (window.attachEvent)
        window.attachEvent("onload", downloadJSAtOnload);//IE
    else window.onload = downloadJSAtOnload;//dom0
</script>

也可以使用setTimeout来延迟调用函数来加载（适用于上边的动态添加地址和ajax请求）。

对应于load事件的是unload事件，这个事件在文档完全被卸载的时候触发，切换页面会发生unload事件，多用于清除引用避免内存泄漏。

5、当然可以借助于jquery的$(document).ready

<!DOCTYPE html>
<html>
        <head>
                <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
                <script type="text/javascript">
                        $(document).ready(function() {
                            alert("加载完成！");
                        });
                </script>
        </head>
        <body>
                <img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
        </body>
</html>

区别于js原生的onload事件，主要体现在一下几个方面：

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行，$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕；
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个（后边的覆盖前面的，可以把所有的操作都写到处理函数下面），$(document).ready()可以同时编写多个，并且都可以得到执行；
window.onload没有简化写法，$(document).ready(function(){})可以简写成$(function(){})。