关于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