domReady机制探究及DOMContentLoaded研究

最新推荐文章于 2025-03-11 17:19:44 发布

TechFE

最新推荐文章于 2025-03-11 17:19:44 发布

阅读量1.2k

点赞数 1

分类专栏：前端事件文章标签：前端 domReady

本文链接：https://blog.youkuaiyun.com/future_todo/article/details/53120569

版权

本文深入探讨了domReady机制在不同浏览器（尤其是IE7-8和Chrome）中的实现，分析了DOMContentLoaded事件的应用。内容涵盖源码分析、背景知识介绍、结果分析及IE下DOM树监控的其他方法。总结了执行顺序和浏览器差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

domReady机制是很多框架和库都具有的种子模块，使用了在DOM树解析完成后就立即响应，不用等待图片等资源下载完成（onload执行时候表示这些资源完全下载完成）的一种机制，那怎么实现呢。

1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件；
2）不支持的，就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是，通过IE中的document.documentElement.doScroll(‘left’)来判断DOM树是否创建完毕或者使用监控script标签的onreadystatechange得到它的readyState属性判断【遗憾的是经过我们的实验，在IE下domReady机制总会在onload后执行】

1. domReady机制在IE7-8下

1.1 domReady机制源码（包括IE/非IE）

demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> DOMContentLoaded Demo</title>
</head>
<body>
    <div id="div1"></div>
    <script defer='defer' src="deferjs.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="demo1.js"></script>
    <script>
    dom.Ready(function() {
    
        console.info("我的domReady1");
    });
    </script>
</body>

最低0.47元/天解锁文章