从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

doment ready事件和load事件的区别及实现的更多相关文章

  1. 2016.6.18主窗体、子窗体InitializeComponent()事件、Load事件发生顺序以及SeleChanged事件的发生

    主窗体,子窗体的InitializeComponent(构造函数).Load事件执行顺序 1.主窗体定义事件 new 主窗体() 构造函数进入主窗体InitializeComponent函数,该函数中 ...

  2. 原 jQuery中document的ready和load事件的区别？

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  3. jQuery的ready与js的load事件的区别

    摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html 为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序. DO ...

  4. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

  5. $(document).ready() 、 $('#id').load() 、window.onload 的区别

    今天做项目的时候遇到一个问题,结果死在了$(document).ready(). $('#id').load() .window.onload的区别上.然后,就整理一下,这三者的区别. 参考文章:ht ...

  6. jquery load ($.load) 事件用法与分析(转)

    首先我们需要清楚的是jquery load方法是对jQuery.ajax()进行封装以方便我们使用的一个方法,当我们需要处理较为复杂的逻辑时候,还是需要用到jQuery.ajax()这个比较全面的方法 ...

  7. UI事件之load

    load事件属于CSS3规范中的UI事件,load事件处理程序在页面元素和资源(html/script/link/img等)全部加载完成后在window上触发,或在img元素加载完成后再img元素上触 ...

  8. $(document).ready和window.onload 简单分析区别

    <锋利的JQuery>翻开没看几页,就遇到了这个神奇的问题,之前在橙旭园学习的时候,JQuery只教了一些基础的,像链式操作等,那时以为这个和window.onload()差不多一模一样, ...

  9. javascript 的 事件类型（事件）

    事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行. 事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都 ...

随机推荐

  1. Redis统计访问量方法

    1.统计客户忘问量 2.查询某位ID客户是否登录 一亿用户,统计数据10M左右,比较省空间 set usercount 0 设置一个变量,用于记录客户访问量setbit usercount 2 0   ...

  2. docker部署安装zabbix

    安装docker 安装docker需要配置网络yum源,centos7自带的版本太低了 第一步:下载阿里云的docker安装包 在yum仓库的目录之下 [root@localhost yum.repo ...

  3. python中RGB色彩

    turtle.colormode(mode)来改变色彩数值的使用 如果在修改颜色时写turtle.colormode(1.0) ,就需要使用RGB小数模式来去改变颜色 如果在修改颜色时写turtle. ...

  4. Spring boot +Thymeleaf 搭建springweb

    对接天猫精灵的时候需要有网关服务器方提供几个页面,服务器已经有了,spring boot的 纯后台的,就加了Thymeleaf   jar包添加几个页面跳转 maven配置 <!-- 引入thy ...

  5. Apache Flink on K8s：四种运行模式，我该选择哪种？

    1. 前言 Apache Flink 是一个分布式流处理引擎,它提供了丰富且易用的API来处理有状态的流处理应用,并且在支持容错的前提下,高效.大规模的运行此类应用.通过支持事件时间(event-ti ...

  6. python爬取虎牙直播颜值区美女主播照片

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取 python免费学习资 ...

  7. element弹框的的this.$alert、this.$prompt方法用法

    调用$alert方法即可打开消息提示,它模拟了系统的 alert,无法通过按下 ESC 或点击框外关闭 调用$prompt方法即可打开消息提示,它模拟了系统的 prompt

  8. 什么是垃圾搜集(GC)?为什么要有GC呢？

    GC的全称是Gabage Collection,翻译过来就是"垃圾收集"的意思.那么我们为什么用GC呢? 那么我们接下来就来聊一聊GC的创造背景.在C和C++那个年代的程序员界的长 ...

  9. 深入总结Javascript原型及原型链

    本篇文章给大家详细分析了javascript原型及原型链的相关知识点以及用法分享,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 我们创建的每个函数都有一个 prot ...

  10. Spring Boot 系统启动任务定义

    前言 系统任务:在项目启动阶段要做一些数据初始化操作,这些操作有一个共同的特点,只在项目启动时进行,以后都不再执行. 应用场景:例如配置文件加载,数据库初始化等操作 Spring Boot出现之前 解 ...