• javascript会阻塞dom的解析。当解析过程中遇到<script>标签的时候,便会停止解析过程,转而去处理脚本,如果脚本是内联的,浏览器会先去执行这段内联的脚本,如果是外链的,那么先会去加载脚本,然后执行。在处理完脚本之后,浏览器便继续解析HTML文档。

  • 当文档中没有脚本时,浏览器解析完文档便能触发 DOMContentLoaded 事件;
    如果文档中包含脚本,则脚本会阻塞文档的解析,而脚本需要等位于脚本前面的css加载完才能执行。
    在任何情况下,DOMContentLoaded 的触发不需要等待图片等其他资源加载完成。

  • 页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件。

DOMContentLoaded 和 Load 事件 区别(待补充)的更多相关文章

  1. 【转载】DOMContentLoaded与load的区别

    DOMContentLoaded与load的区别   (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? ( ...

  2. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  3. js DomContentLoaded 和 load 的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  4. js中DOMContentLoaded和load的区别

    如题:DOMContentLoaded和load都是页面加载的时候触发的事件.区别在于触发的时机不一样. 浏览器渲染页面DOM文档加载的步骤: 1.解析HTML结构. 2.加载外部脚本和css文件. ...

  5. DOMContentLoaded与load的区别

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的 ...

  6. DOMContentLoaded和load的区别

    一.概念 DOMContentLoaded 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表.图像和子框架的完成加载. load loa ...

  7. ready与load的区别

    JQuery里有ready和load事件 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() ...

  8. doment ready事件和load事件的区别及实现

    从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...

  9. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

随机推荐

  1. POJ-1475 Pushing Boxes (BFS+优先队列)

    Description Imagine you are standing inside a two-dimensional maze composed of square cells which ma ...

  2. JAVA 中CLOB与Clob有区别

    在JAVA中CLOB与Clob是有区别的类型. (oracle.jdbc.internal.OracleCallableStatement)OracleCallableStatement能接收CLOB ...

  3. Oracle 等待事件 db file sequential read

    db file sequential read-数据文件顺序读取 等待事件: "db file sequential read" Reference Note (文档 ID 345 ...

  4. flashfxp 命令行

    以后更新软件时,尽量用bat命令行 http://www.flashfxp.com/forum/flashfxp/frequently-asked-questions-faq-/14748-comma ...

  5. DevExpress WPF入门指南:绑定编辑器对话框

    绑定编辑器对话框 每个Smart Tag属性既可以设置也可以绑定.如下图所示,点击绑定按钮打开绑定对话框: 如果属性已经绑定,binging按钮会显示为黄色,绑定的文本会显示在相应的属性行. 绑定So ...

  6. DevExpress XtraScheduler日程管理控件应用实例(1)-- 基本使用

    在一些应用场景中,我们可能需要记录某一天,某个时段的日程安排,那么这个时候就需要引入了 DevExpress 的日程控件XtraScheduler 了,这个控件功能非常强大,提供了很好的界面展现方式, ...

  7. addslash()

    php addslashes函数的作用是在预定义的字符前面加上反斜杠,这些预定义字符包括: 单引号(') 双引号(") 反斜杠(\) NULL addslashes函数经常使用在向数据库插入 ...

  8. settype和gettype

    settype — 设置变量的类型 <?php$foo = "5bar"; // string$bar = true;   // boolean settype($foo,  ...

  9. 一个TED演讲背后的文化论

    0. 前言 写这个前言让我很难受,当然不是心情难受哈,此时的状态是很High的哦,大中午觉都省了, 说难受是我觉得我这语言文字太渣了,相比今天的主题确实很没“文化”.但我也很庆幸,能 看到这么个人认为 ...

  10. [Spring Boot] Spring Boot启动过程源码分析

    关于Spring Boot,已经有很多介绍其如何使用的文章了,本文从源代码(基于Spring-boot 1.5.6)的角度来看看Spring Boot的启动过程到底是怎么样的,为何以往纷繁复杂的配置到 ...