文档章节

jQuery中ready与load事件

L
 LM_Mike
发布于 2017/04/27 16:03
字数 401
阅读 7
收藏 0

jQuery有3种针对文档加载的方法

$(document).ready(function() {
    // ...代码...
})
//document ready 简写
$(function() {
    // ...代码...
})
$(document).load(function() {
    // ...代码...
})
一个是ready一个是load,这两个到底有什么区别呢?

ready与load谁先执行: 大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。

DOM文档加载的步骤: 要想理解为什么ready先执行,load后执行就要先了解下DOM文档加载的步骤:

  1. 解析HTML结构。
  2. 加载外部脚本和样式表文件。
  3. 解析并执行脚本代码。
  4. 构造HTML DOM模型。//ready
  5. 加载图片等外部文件。
  6. 页面加载完毕。//load 从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了,但是load要在第(6)步完成之后才执行。

结论:

ready与load的区别就在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说应该越快加载越好。在一个高速浏览的时代,没人愿意等待答案。假如一个网站页面加载超过4秒,不好意思,你1/4的用户将面临着流失,所以对于框架来说用户体验是至关重要的,我们应该越早处理DOM越好,我们不需要等到图片资源都加载后才去处理框架的加载,图片资源过多load事件就会迟迟不会触发。

© 著作权归作者所有

共有 人打赏支持
L
粉丝 1
博文 266
码字总数 40994
作品 0
深圳
私信 提问

暂无文章

基于Sentry实现数据访问权限控制

Sentry初识 Sentry是适用于Hadoop生态环境、基于角色的授权管理系统,可以模块化集成到HDFS、Hive、Impala。它是一个策略引擎,运行定义授权规则,以校验用户对数据模型的访问请求。 授权粒度...

hblt-j
6分钟前
0
0
First Bad Version(leetcode278)

You are a product manager and currently leading a team to develop a new product. Unfortunately, the latest version of your product fails the quality check. Since each version is......

woshixin
38分钟前
1
0
executor 和task 优先于线程(68)

java.util.concurrent 包里有一个Executor 框架 基于接口的任务执行工具 只需要一行代码 提交一个runnable 方法 优雅的终止(必须做到,不然虚拟机可能不会退出) 对于负载不重的服务 Execut...

Java搬砖工程师
38分钟前
1
0
一条SQL查询语句是如何执行的

123

writeademo
40分钟前
3
0
CSS中position属性( absolute | relative | static | fixed )详解

四个属性的特点 static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。 relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流...

简心
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部