doment ready事件和load事件的区别及实现

从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了。面试**公司的时候,碰到“document ready和load的区别,以及document ready事件的实现”的笔试题,区别倒是回答出来了,ready事件只回答了readystatechange事件。回答的不是很全面,特在此记录。

document ready: 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的加载完成。
load: window:load event,整个页面已经加载完毕,包括页面依赖的一些资源(样式表、图片等)。Element:load,资源元素例如image标签已经加载完毕

load事件的实现不需要说,可以通过onload事件回调属性和addEventListener('load', 回调)监听load事件。
document ready事件在jquery里有很完整的实现,在谷歌浏览器中主要是通过document的DOMContentLoaded事件类型配合document.readyState === “complete”做前置检测(有可能添加事件监听的时候,document ready事件已经触发了)。在IE中iframe是通过onreadystatechange,而非iframe还要进一步通过document.documentElement.doscloll

参考来源:

  1. https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
  2. https://github.com/jquery/jquery/blob/1.5b1/src/core.js

猜你喜欢

转载自www.cnblogs.com/bellhey/p/11668938.html