内容简介：MDN: 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件。所以 load 所需要的时间必然大于等于 DOMContentLoaded 所需要的时间。
DOMContentLoaded与load的区别
DOM 文档的加载步骤
- 解析HTML结构
- 加载外部脚本和样式表文件
- 解析并执行脚本
- 构建 HTML DOM模型 // DOMContentLoaded
- 加载外部资源文件（image等）
- 页面渲染完成 // load
DOMContentLoaded （对应 jQuery 中的 $(document).ready()）
MDN: 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载
load （对应 jQuery 中的 $(document).load()）
页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件。所以 load 所需要的时间必然大于等于 DOMContentLoaded 所需要的时间。
HTML 页面的生命周期
主要有三个重要的事件
- DOMContentLoaded， DOM已经构建好，可以对DOM节点进行操作
document.addEventListener('DOMContentLoaded', cb)
- load，所有资源加载完毕，可以对资源进行一系列操作，比如获取图片宽高等~
window.onload = function() {}
- beforeunload/unload(基本不会用到)，当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。我们可以检查用户是否保存了修改，并提示他是否确定离开当前页面
window.onbeforeunload = function() {
return "There are unsaved changes. Leave now?";
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
构建高性能Web站点
郭欣 / 电子工业出版社 / 2009-8 / 59.00元
本书围绕如何构建高性能Web站点，从多个方面、多个角度进行了全面的阐述，涵盖了Web站点性能优化的几乎所有内容，包括数据的网络传输、服务器并发处理能力、动态网页缓存、动态网页静态化、应用层数据缓存、分布式缓存、Web服务器缓存、反向代理缓存、脚本解释速度、页面组件分离、浏览器本地缓存、浏览器并发请求、文件的分发、数据库I/O优化、数据库访问、数据库分布式设计、负载均衡、分布式文件系统、性能监控等。......一起来看看 《构建高性能Web站点》 这本书的介绍吧!
