关于async,defer,ready,onload的部分总结

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>summary</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        // 页面加载完成有两种事件：
        // 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
        // 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。
        // 按网上解释应该ready要比onload先执行，但这里onload先执行了
        $(document).ready(function () {
            console.log("jquery document ready")
        });
        window.onload = function () {
            console.log('window.onload');
        };
        //当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。
        //另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 
        //在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。
        //注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
        //简而言之，此事件是最先执行的
        document.addEventListener('DOMContentLoaded', function () {
            console.log('DOMContentLoaded');
        });
    </script>
    <script defer>
        //这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。
        //如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。
        //对动态嵌入的脚本使用 `async=false` 来达到类似的效果。
        console.log("defer")
    </script>
    <script async>
        //该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用 （即没有src属性的脚本）。
        console.log("async")
    </script>
    <script>
        console.log("script")
    </script>
</head>

<body>
    <div class='wrapper'>test page</div>
    <img src="https://pic4.zhimg.com/v2-4cc11c5cee7db5cc31834888f252100a_b.jpg" data-caption="" data-size="normal" data-rawwidth="512"
        data-rawheight="447" class="origin_image zh-lightbox-thumb" width="512" data-original="https://pic4.zhimg.com/v2-4cc11c5cee7db5cc31834888f252100a_r.jpg">
    <img class="gitimg" style="position: fixed; top: 0; right: 0; border: 0" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
        alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
    <script>
        for (var i = 0; i < 1000000000; i++) {
            // 这个同步脚本将延迟DOM的解析。
            // 所以DOMContentLoaded事件稍后将启动。
        }
    </script>
</body>


</html>
详见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script
关于async,defer,ready,onload的部分总结

猜你喜欢
