从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. linux下清空文件内容的3个命令

    1.使用echo "" > file_name,直接将空字符串重定向并覆盖到目标文件 2.使用cat /dev/null > file_name,读取dev目录下的一个 ...

  2. Unit3：控件\布局

    控件 TextView <TextView android:layout_width="match_parent" android:layout_height="w ...

  3. 关于Java的编译执行与解释执行

    编程语言分为低级语言和高级语言,机器语言.汇编语言是低级语言,C.C++.java.python等是高级语言. 机器语言是最底层的语言,能够直接执行.而我们编写的源代码是人类语言, 计算机只能识别某些 ...

  4. Linux实战（12）：Centos装机常用脚本-进阶版

    #!/bin/bash #shell菜单演示 function menu() { echo -e `date` cat <<EOF ---------------------------- ...

  5. 用友yonsuite产品二开之简单的yonsql查询小工具

    和以往的用友产品不同,yonsuite产品开发了低代码平台,满足客户的个性化开发需求.嗯~,一句话不知当讲不当讲,那就讲:所谓低代码平台就是开发不想用实施不会用系列.让我一个开发感受到了憋屈.

  6. 阅读源码的利器——Intellij-IDEA-Replace-in-Path-使用技巧

      前言 讲讲宇宙排名第二的开发工具-–IDEA的使用技巧. 搜索/替换 技巧 阅读源码的利器   1.Match case: 如果勾选该按钮,搜索时将区分大小写字母. 2.Preserve case ...

  7. 2020年秋季最新Python详细入门教程！全网最新最全

    1. import # -*- coding: utf-8 -*- ## 引入新的包 import turtle import pickle # 文件操作 import tensorflow as t ...

  8. 实战:一种在http请求中使用protobuffer+nginx+lua收集打点日志的方案

    背景 app打点日志的上报和收集,是互联网公司的基本需求. 一.方案选择 1.1 protobuffer vs json 探究一种以最高效的方式上报和解析打点数据是一个系统性的问题,需要解决的子问题有 ...

  9. 联赛模拟测试8 Dash Speed 线段树分治

    题目描述 分析 对于测试点\(1\).\(2\),直接搜索即可 对于测试点\(3 \sim 6\),树退化成一条链,我们可以将其看成序列上的染色问题,用线段树维护颜色相同的最长序列 对于测试点\(7\ ...

  10. 注册表“CLSID”下面的“InprocServer32”子键是什么？

    这个键值有什么用?每个CLSID下基本都有,即使没有其它项也会有此项.谁能详细说下,"InprocServer32"子键起什么作用?谢了. 刚好遇到这问题了,这是我找到的:Inpr ...