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

时间 2019-12-06

标签异步加载延迟同步繁體版

原文原文链接

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

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

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

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

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

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

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

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

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

因此通常建议把<script>标签放在<body>结尾处，这样尽量减小页面阻塞。浏览器

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

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

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

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

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

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

异步脚本必定会在页面load以前执行。app

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

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

onload事件：

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

两种定义方式：

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

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

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

<body onload="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事件，多用于清除引用避免内存泄漏。

五、固然能够借助于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(){})。