$(window).load()和$(document).ready()

时间：2021-05-31 15:22:29

一、前言

　　我们在编写前端代码的js文件时，往往是会先写一个$(function(){})，然后才会在大括号里面继续写我们自己的代码。当时并不能理解为什么要添加这样一个东西，只是把它当做一个标签一样添加到代码中。直到有一次单独写个页面，把它给漏掉了，于是。。。

　　报错了，UNcaught ReferenceError: ... is not defined

　　原来$(function(){})的作用是将括号中的代码，延迟到HTML的DOM树构建完成再执行，这样就可以避免：js操作先于DOM树创建而引起的bug。

　　可是刚刚理解了这个$(function(){})，window.onload = function(){}又出现了，这又是个什么东东。。。好像和前者一样的作用，可是又有区别，笔者表示困惑了。

接着

  • $(document).ready(function(){})
  • $(window).load()和$(document).ready()区别

接踵而来，于是彻底凌乱了。。。

二、正文

（一）、浏览器渲染流程

通过网络模块加载到HTML文件后渲染引擎渲染流程如下，这也通常被称作关键渲染路径（Critical Rendering Path）：

  1. 解析html以构建dom树（构建DOM节点）：渲染引擎开始解析html，并将标签转化为内容树中的dom节点。
  2. 构建render树（解析样式信息）：解析外部CSS文件及style标签中的样式信息。Render树由一些包含有各种属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
  3. 布局render树（布局DOM节点）：执行布局过程，它将确定每个节点在屏幕上的确切坐标。
  4. 绘制render树（绘制DOM节点）：Render树构建好了之后，将会再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

$(window).load()和$(document).ready()

以上就是HTML渲染的基本流程，但这并不包含解析过程中浏览器加载外部资源如图片、脚本、iframe等的过程。

说白了，上面的四步仅仅是HTML结构的渲染流程，而外部资源的加载在HTML结构的渲染流程中贯穿始终，即便绘制DOM节点已经完成，外部资源依然可能正在加载中或尚未加载。

对于HTML浏览器有专门的html解析器来解析，并在解析的过程中构建DOM树。在这里我们讨论两种DOM元素的解析，即样式（link、style）与脚本文件（script）。由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。

1）外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。

2）外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。

3）如果后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行

4）对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性，但对于其他非动态创建的script，以上三条结论仍适用

动态创建的外部脚本并未受link的阻塞。

随机推荐

  1. 在iOS中实现类似安卓自动消失提示框

    类方法: + (void)showMessage:(NSString *)message { // 获取window UIWindow *window = [UIApplication sharedA ...

  2. PHP常用正则表达式汇总

    1.    平时做网站经常要用正则表达式,下面是一些讲解和例子,仅供大家参考和修改使用: 2.    "^\d+$" //非负整数(正整数 + 0) 3.    "^[0 ...

  3. mysql新建用户本地无法登录

    mysql新建用户本地无法登录 MySQLDebianGoogleAccess  出此是用mysql,因为root权限过高,所以新建一用户appadmin,权限仅为要用到的数据库.创建语句如下:gra ...

  4. 各大搜索引擎的User-Agent

    baidu:Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html) Google:Moz ...

  5. MFC枚举USB设备碰到的一个疑难，还没解决

    代码如下: 打开USB Hub设备之后,返回句柄hHubDevice,然后使用EnumerateHubPorts来枚举Hub的端 口.疑问在代码的中文注释中. bool CUsbEnumHub::En ...

  6. JS判断字符串长度的5个方法（区分中文和英文）

    目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: 代码如下: String.prototype.gblen = function() {    var len = 0;    fo ...

  7. 推导正交投影(Orthographic Projection)

    定义六个面 left right bottom top near far   然后三个轴分开考虑 x轴 视椎体的x范围在[l,r],我们要变换到[-1,1] 1 减去l变换到[0, r-l] 2 乘以 ...

  8. Python编程Day3—基本运算符、数据类型

    一.基本运算符 1.算数运算 print(10/3) print(10//3) print(10%3) print(10**3) 2.比较运算 print(10==10) print(10!=10) ...

  9. gcc 与 glibc 的关系 glibc版本查看

    glibc是什么,以及与gcc的关系?glibc是gnu发布的libc库,也即c运行库.glibc是linux 系统中最底层的api(应用程序开发接口),几乎其它任何的运行库都会倚赖于glibc.gl ...

  10. OneDrive开发入门

    OneDrive API提供了对存储在OneDrive上文件的访问能力,大多数API都遵循REST模式,少部分的API可以通过简单的函数来调用 在使用OneDrive API之前要先了解两个简单的概念 ...

相关文章