HTML5 DOMContentLoaded 和 window.onload

原创 前段攻城狮 随笔 DOM 41阅读 2018-10-15 11:07:52 举报
window.onloaddocument.onDOMContentLoaded
当一个资源及其依赖资源已完成加载时,将触发load事件。当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件 被触发,而无需等待样式表、图像和子框架的完成加载。
DOM L3HTML5

注意一点: 一般执行script 执行完成后,才触发 domContentLoaded 事件
一般的css加载解析完成后才执行js

当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。

注意:DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。

同步 JavaScript 会暂停 DOM 的解析。

而JS的执行,需要等待位于它前面的CSS加载(如果是外联的话)、执行完成,因为JS可能会依赖位于它前面的CSS计算出来的样式。

domContentLoaded

contentloaded.jsjquery.documentReady.js 解决跨浏览器兼容问题

script标签重新学习

script 标签的 defer 和 async 都是异步加载标签

async 上 是异步加载完成后再 script excute

defer 异步加载 ,最后 执行。在DOMContentLoaded之前执行

但是红宝书中有这样一句话:HTML5规范要求脚本执行应该按照脚本出现的先后顺序执行,但在现实生活中,延迟脚本并不一定按照顺序执行,也不一定会在DOMContentLoaded事件中触发前执行,因此最好只包含一个延迟脚本。因此上图第三点说法有欠缺

上面说的话的理解,就是 defer 的脚本还是在DOM 最后执行,但是如果是异步的 2个 同时声明了defer 脚本,最后无法确定执行顺序

defer和async的区别

再次解释了defer和async 和 DOMContentLoaded 的关系,都是可能在DOMContentLoaded 前执行或者后执行

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复