DOMContentLoaded 和 onload

801 阅读1分钟

DOMContentLoaded

HTML文档被加载和解析完成,dom内容加载完毕

IE不支持,需要做兼容

$(document).ready(function() { // ...代码... }); 当我们在浏览器地址输入URL时,浏览器会发送请求到服务器,服务器将请求的HTML文档发送回浏览器,浏览器将文档下载下来后,便开始从上到下解析,解析完成之后,会生成DOM。如果页面中有css,会根据css的内容形成CSSOM,然后DOM和CSSOM会生成一个渲染树,最后浏览器会根据渲染树的内容计算出各个节点在页面中的确切大小和位置,并将其绘制在浏览器上。

image.png

DOMContentLoaded所计算的时间,当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件;如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等位于脚本前面的css加载完才能执行。在任何情况下,DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

onload

onload事件所有的浏览器都支持

页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件 $(document).load(function() { // ...代码... });