document.readyState 返回当前文档的状态
uninitialize 还未开始加载
loading 载入中
interactive 已加载,可以与用户进行交互
complete 载入完成
通过onreadystatechange事件监听readyState值
DOMContentLoaded (MDN解释:当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。)
load(MDN的解释:load 应该仅用于检测一个完全加载的页面 当一个资源及其依赖资源已完成加载时,将触发load事件。)
解析html 形成dom树,外部css下载不阻碍dom树,同时构建dom树 和css树,有script会阻碍dom树构建,会下载js文件或执行js内代码,可以采用异步加载(async)或延迟加载(defer),异步加载会在页面解析完成后加载,不影响dom执行,加载顺序不定,加载完立即执行,延迟加载会在dom渲染完成后,DOMContentLoaded之前调用执行
<div class="controls">
<button id="reload" type="button">Reload</button>
</div>
<div class="event-log">
<label>Event log:</label>
<textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');
reload.addEventListener('click', () => {
log.textContent ='';
window.setTimeout(() => {
window.location.reload(true);
}, 200);
});
window.addEventListener('load', (event) => {
log.textContent = log.textContent + 'load\n';
});
document.addEventListener('readystatechange', (event) => {
log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});
document.addEventListener('DOMContentLoaded', (event) => {
log.textContent = log.textContent + `DOMContentLoaded\n`;
});
//输出结果
readystate: interactive
DOMContentLoaded
readystate: complete
load