资源载入和页面事件

理想的页面载入方式

  1. 解析HTML结构。
  2. 载入并解析外部脚本。
  3. DOM树构建完成,运行脚本。//DOMInteractive –> DOMContentLoaded
  4. 载入图片、样式表文件等外部文件。

  5. 页面载入完成。//window.onload

涉及到的事件

  1. window.onload:

    当页面全部载入完成(包含全部资源)

  2. document.onload:

    当整个html文档载入的时候就触发了。也就是在body元素载入之前就開始运行了

  3. DOMContentLoaded:

    当页面的DOM树解析好而且须要等待JS运行完才触发

    DOMContentLoaded事件不直接等待CSS文件、图片的载入完成

  4. onreadytstatechange:

    当对象状态变更时触发这个事件,一旦document的readyState属性发生变化就会触发

defer和async

  1. 没有defer和async

    浏览器会马上载入并运行指定的脚本,不等待兴许载入的文档元素,读到就载入并运行。

    当载入脚本时会堵塞页面的渲染。

  2. 有async

    载入和渲染兴许文档元素的过程将和脚本的载入与运行并行进行。体现出来就是异步。

    async JS一旦下载好了就会运行,所以非常有可能不是依照原本的顺序来运行的。

    假设脚本前后有依赖性。用async。就非常有可能出错。

  3. 有defer

    载入兴许文档元素的过程将和脚本的载入并行进行。

    可是脚本的运行要在全部元素解析完成之后。DOMContentLoaded事件触发之前完成。

    defer JS在DOMInteractive后运行。一旦运行完defer JS。就会触发DOMContentLoaded。

    也就是说defer脚本总是在DOMInteractive事件与DOMContentLoaded事件之间的时间运行。

    defer JS在html页面解析完成之后再去运行,也就是相似于把这个脚本放在了页面底部。

DOM的载入与解析

  1. DOMLoading

    浏览器開始解析dom树的时间点

  2. DOMInteractive

    表示浏览器已经解析好dom树了。

  3. DOMContentLoaded

    同步的JS已经运行完成了。


load的实现

作用:监控整个文档(包含资源)是否载入完成。全部资源载入完成后触发

原生js写法:

window.onload = function(){

}

jquery写法:

$(document).load(function(){

});

document.ready的实现

作用:监控dom是否载入完成,dom载入完成时及资源载入之前触发

原生js写法:

document.ready = function(callback) {
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function() {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false);
}else if (document.attachEvent) {// 兼容ie
document.attachEvent('onreadytstatechange', function() {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
});
}
}

下面为jquery的写法:

$(function(){

});

$(document).ready(function(){

});

//jquery中默觉得document对象
$().ready(function(){ });

资源载入和页面事件 load, ready, DOMContentLoaded等的更多相关文章

  1. 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特意的阻塞.两个很明 ...

  2. WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unload

    简言 理解WEB页面的生命周期,文档加载事件及顺序对WEB开发有十分的重要意义.如果不理解,在元素未加载就提前操作元素,则得不到想要的结果.而如果页面完全加载完成后,再进行操作,则又会影响用户体验. ...

  3. onload事件属性,JQ中的load,ready方法

    onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...

  4. 页面事件(Init,Load,PreRender)执行顺序

    简介 对由 Microsoft® Internet 信息服务 (IIS) 处理的 Microsoft® ASP.NET 页面的每个请求都会被移交到 ASP.NET HTTP 管道.HTTP 管道由一系 ...

  5. 控制使用jquery load()方法载入新页面中的元素

    最近在项目中用到jquery的load()方法来加载页面,首先简单说一下load()方法. load(url,data,callback);该方法接收三个参数,第一个是载入的页面地址,第二个是要传到服 ...

  6. 关于asp.net中页面事件加载的先后顺序

    一.ASP.NET 母版页和内容页中的事件 母版页和内容页都可以包含控件的事件处理程序.对于控件而言,事件是在本地处理的,即内容页中的控件在内容页中引发事件,母版页中的控件在母版页中引发事件.控件事件 ...

  7. asp.net页面事件执行顺序

    转自http://www.cnblogs.com/hnlyh/articles/4230388.html C#代码 using System; using System.Data; using Sys ...

  8. jQuery document window load ready 区别详解

    用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单. ...

  9. jQuery Mobile 页面事件

    jQuery Mobile 页面事件 在 jQuery Mobile 中与页面打交道的事件被分为四类: Page Initialization - 在页面创建前,当页面创建时,以及在页面初始化之后 P ...

随机推荐

  1. BZOJ3926: [Zjoi2015]诸神眷顾的幻想乡(广义后缀自动机)

    Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热情,自发组织表演了一系列节目给幽香看. ...

  2. linux下加入用户并赋予root权限

    1.加入用户.首先用adduser命令加入一个普通用户,命令例如以下: #adduser tommy //加入一个名为tommy的用户 #passwd tommy   //改动password Cha ...

  3. thinkphp 整合 swiftmailer 实现邮件发送

    thinkphp swiftmailer(phpmailer) 文件夹结构 图 1 swiftmailer-phpmailer 将swiftmailer整合到thinkphp中.如上图 1 我下载的版 ...

  4. 动态规划例子:Maximal Square

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  5. Flask项目之手机端租房网站的实战开发(十一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  6. BlobTracker

    Blob分析介绍 分类: CV相关2012-11-04 11:25 1929人阅读 评论(5) 收藏 举报 Blob翻译成中文,是“一滴”,“一抹”,“一团”,“弄脏”,“弄错”的意思.在计算机视觉中 ...

  7. c++中的相对路径

           今天在vs2010里读取相对路径下的图片文件出了点问题.于是查了一下相对路径的编程知识,记录下来分享给大家:      问题描写叙述:path=".\\TrainData\\& ...

  8. less相关知识点

    less是一门css预处理语言,文件后缀名为.less,能减少css文件编写的代码量 官网 http://lesscss.cn/#using-less 安装 使用npm install -g less ...

  9. 什么是MVC,什么是WCF

    在C#中总会遇到这几个概念,网上搜了一下,做一下总结和比较,东拼西凑,如有雷同,纯属直接拷贝,人懒,但无意侵权. 1.什么是MVC MVC是三个单词的首字母缩写,它们是Model(模型).View(视 ...

  10. [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)

    Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in ...