从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. python的logging模块及应用

    一.logging日志模块等级 常见log级别从高到低: CRITICAL >ERROR >WARNING >INFO >DEBUG,默认等级为WARNING,即>=WA ...

  2. 本机ping不通虚拟机，但虚拟机可以ping通本机

    在各自网络都连接的情况下,本机ping不通虚拟机,但虚拟机可以ping通本机时解决方案: 1.linux虚拟机中连接方式选择NAT模式 2.本地启动VMnet8,然后选择VMnet8的属性,手动输入和 ...

  3. 二、loadrunner参数化连接数据库

    2.连接sqlserver数据库.oracle数据库或mysql数据库(只有mysql数据库驱动需要先手动安装) 2.1.新建一个参数,随便设置file还是table类型之类的 2.2.点击Data ...

  4. shell变量操作${}详细用法

    ${}基本功能 一般情况下$var与${var}是没有区别的,但是用${ }会比较精确的界定变量名称的范围 [root@localhost ~]# A=Linux [root@localhost ~] ...

  5. 如何成为一位优秀的ScrumMaster

    嗨,大家好,我是叶子 背景介绍 目标:为了能更好的适应快速变化的需求和不确定的未来. 部门包含岗位:部门负责人.项目经理.产品经理.开发团队(开发人员.测试人员) 那么这种情况下,我们想转型Scrum ...

  6. svg的学习

    svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...

  7. 2019.7.12 sdfzoier做题统计

    lixf_lixf :9 P1981 表达式求值 P1076 寻宝 P1199 三国游戏 P1308 统计单词数 P1190 接水问题 P1158 导弹拦截 P1070 道路游戏 P1069 细胞分裂 ...

  8. UOS服务器常见问题

    UOS服务器安装完成之后,xshell工具无法远程, 描述 我安装完系统后,用xshell工具无法远程,必须在系统上才能进去我是通过centos7的kvm虚拟工具上刷的统信的系统,安装方式: 最小化安 ...

  9. CentOS 8 安装 VirtualBox 增强功能

    环境介绍 Machine: NUC8i5BEK OS: macOS Catalina 10.15.6 VirtualBox: 6.1.12 r139181 (Qt5.6.3) CentOS: 8.2. ...

  10. 逻辑漏洞介绍 & 越权访问攻击 & 修复建议

    介绍逻辑漏洞 逻辑漏洞就是指攻击者利用业务的设计缺陷,获取敏感信息或破坏业务的完整性.一般出现在密码修改.越权访问.密码找回.交易支付金额等功能处.其中越权访问又有水平越权和垂直越权两种,如下所示. ...