页面加载顺序及触发的事件

最新推荐文章于 2020-11-28 05:18:35 发布

转载最新推荐文章于 2020-11-28 05:18:35 发布 · 281 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yanggb/p/9154779.html

本文详细介绍了网页加载的大致步骤，包括HTML文档结构解析、外部样式表及JavaScript脚本加载与执行、DOM树渲染等过程，并阐述了页面加载过程中触发的不同事件，如readystatechange、DOMContentLoaded和load事件的作用及使用示例。

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

页面加载大致的几个步骤

1.开始解析HTML文档结构。

2.加载外部样式表及JavaScript脚本。

3.解析执行JavaScript脚本。

4.DOM树渲染完成。

5.加载未完成的资源（如图片）。

6.页面加载成功。

页面加载触发的事件

1.document的readystatechange事件

简单例子：

document.onreadystatechange = function() { // 文档加载状态改变事件处理
    if (document.readyState === "loading") { // document加载中
        console.log(document.readyState);
    }
    if (document.readyState === "interactive") { // 互动文档加载完成，文档解析完成，但是如图像，样式表和框架等子资源仍在加载中
        console.log(document.readyState);
    }
    if (document.readyState === "complete") { // 文档和所有子资源加载完成，load事件即将被触发
        console.log(document.readyState);
    }
}

readyState属性描述了文档的加载状态，整个加载过程中document.readyState会不断变化，每次变化都触发readystatechange事件。

也可以用事件监听器去绑定：

document.addEventListener("readystatechange", function() {
    console.log(document.readyState);
});

2.document的DOMContentLoaded事件

DOM树渲染完成时候触发DOMContentLoaded事件，此时可能外部资源还在加载。jQuery中的ready事件就是实现的这个事件。

3.window的load事件

当所有的资源全部加载完成后就会触发window的load事件。

"-。-"

转载于:https://www.cnblogs.com/yanggb/p/9154779.html