比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件

最新推荐文章于 2024-07-29 09:49:14 发布

简单的阿贵

最新推荐文章于 2024-07-29 09:49:14 发布

阅读量1.9k

点赞数

分类专栏： Javascript 文章标签： onload DOMContent readystate doscroll DOM

本文链接：https://blog.csdn.net/qq814374557/article/details/75330354

版权

本文探讨了比onload更快的DOM加载事件，包括DOMContentLoaded、readystatechange和doscroll，详细比较了它们的兼容性和用法。DOMContentLoaded在DOM树建立后立即执行，而readystatechange需要判断状态，doscroll则在滚动条不再触发滚动错误时触发。文章提供代码示例并测试了不同浏览器的行为，强调理解这些事件的优先级和兼容性对优化业务的重要性。

摘要由CSDN通过智能技术生成

比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件

有时候在想，onload是等所有元素加载完以后再执行，但是有时候我们并不想等待这么久才执行，可能有些业务需要在DOM元素加载完成以后马上就要执行。这个时候，就需要比onload更快的事件函数了，那就是DOMContentLoaded，readystatechange，还有doscroll了。这些函数在jQuery中作了兼容性处理，变成了我们众所周知的ready（）函数，也就是DOM树建立好以后就马上执行的函数。

一、先来比较一下兼容性

DOMContentLoaded仅支持IE9以及更高的浏览器，基本上所有主流浏览器都支持（chrome，oprea，firefox）

onreadystatechange支持IE4以上以及所有主流浏览器（同上）（但是我电脑没有IE4，只有IE6，我这里对IE6测试后的兼容还好。）

doscroll的兼容性为IE8以下的浏览器。

二、再来比较用法

DOMContentLoaded当然就是字面意思啦，浏览器DOM树形成之后马上就开始执行业务。

readystatechange因为五个状态都是不一定的啦，interactive和complete都是不一定的，所以，还是需要进行一些判断，才能开始业务。

doscroll，为了测试这个诡异的属性，我还特意用了Charles将网速降低，才知道这个函数是通过不断报错，让浏览器知道DOM树还没加载完成。如果不报错了，就是DOM树建立完了。

执行速度：doscroll > DOMContentLoaded > interactive状态的readystatechange > complete状态的readystatechange

三、是不是该上代码和说明了QAQ

说明：引用了一段github上的代码，这里向作者Diego Perini致谢。
情况：

a.一种是在IE8浏览器下如果页面作为iframe加载的话，只能使用onreadystatechange事件，而不是使用doscroll，因为iframe支持onreadystatechange，没有别的哈哈～～～
b.一种就是作为正常页面加载，不一样的浏览器有不一样的展现形式。

四、上代码

a.首先是作为iframe的父容器的页面：iframe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <iframe src="main.html" frameborder="0"></iframe>
</body>
</html>

b.然后就是可以作为iframe嵌入或者单独作为主页面的页面： main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是测试DOM树加载的</title>
    <script src="DOMContentLoaded.js"></script>
    <style>
        * {
            margin: 0; 
            padding: 0;
        }
        body {
            width: 100%;
            background-color: #eee;
            height: 2000px;
        }
        .mask {
            width: 100%;
            height: 100px;
            background-color: #ff630c;
            text-align: left;
            position: absolute;
            top: 500px;
            left: 0;