dom 元素加载

来源：互联网发布：java高并发面试题编辑：程序博客网时间：2024/06/03 20:10

DOM 加载小结

比较下 window.onload 和 jQuery(document).ready(function(){})

winodw.onload

指的是页面上所有的 dom 元素加载完成然后执行的事件，包括 img，iframe，link(一般指stylesheets)的外部资源加载完成
不支持事件累加：后面的onload事件会覆盖前面的

// script1.jswindow.onload = function (){    // script1 code block};// script2.jswindow.onload = function (){    // scirpt2 code block};

事件累加解决方法：

EventTarget.addEventListener(function(){}): 兼容性有问题，ie9 以下不支持
先保存之前的事件，然后在调用

var fn = window.onload;window.onload = function () {    fn && fn();    // 我们要添加的事件}// dom 编程艺术中 的封装方法function addLoadEvent (func) {    var oldonload = window.onload;    if (typeof window.onload !='function') {        window.onload = func;    } else {        window.onload = function () {            oldonload();            func();        }    }}

jQuery(document).ready(function(){})

这里注意一点： dom 元素加载并解析完成就是 dom 树挂接完成了，同时 script标签的脚本也加载并执行完成了(因为script 标签是阻塞的)【这里不考虑 defer 和 async属性】

指的是页面上所有的 dom 元素加载并解析完成后执行的事件。 without waiting for stylesheets, images, and subframes to finish loading(占用带宽的元素不一定完全加载完成).

支持事件累加

// 1. scirpt1.js $(document).ready(function () {    // script1.js code block})// 2. scirpt2.js $(document).ready(function () {    // script2.js code block})

我们常用简写方式： $(function(){})

总结：

window.onload 是页面上所有元素加载完成后，执行事件，包括img,stylesheets,iframe的外部资源
jQuery(document).ready 是页面元素加载完成不包含占用带宽的元素加载完成后，执行事件
注意一点：无论是哪一个事件，常规的 script 脚本都是加载并执行完成了

supplement

script 标签的 defer 和 async 属性：

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

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

<script async src="script.js"></script>

加载和执行都是异步的具有不确定性
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

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

远程加载是异步的
有 defer，加载(文档解析)后续文档元素的过程将和 script.js 的加载(带宽加载)并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发前(dom 树未挂接)完成。
此时是获取不到 dom 元素的，因为 dom 树还没有挂接

对于外部脚本有效
没有这两个属性的script 标签都是加载并执行(串行)，有了这两个属性后会有个异步加载的过程(并行)。

DomContentLoaded 事件

这是 html5 事件

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly popular mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

当初始的文档被完全解析和加载完成的时候，DOMContentLoaded 事件触发，此时stylesheets, images, and subframes不一定加载完成。一个非常不同的 load 事件应当被用来侦测页面的完全加载完成。在使用DOMCtentLoaded 更加合适的地方却使用了load 事件是一个常见的错误，所以要小心。

demo

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>DomContentLoaded</title>    <script>        document.addEventListener("DOMContentLoaded", function(event) {            console.log("DOM fully loaded and parsed"); // second        });    </script></head><body>    <script>        document.addEventListener('DOMContentLoaded',function () {            console.log('i am top!'); // third        })    </script>    <div>hello,world</div>    <script>        console.log('i am bottom!'); // first    </script></body></html>

阅读全文

0 0