zoukankan      html  css  js  c++  java
  • DOMContentLoaded与load的区别、触发时机(转)

    一、DOMContentLoaded 与 load 事件

    关于 DOMContentLoaded 和 load 事件,MDN对他们是这样描述的:DOMContentLoaded 文档地址load 文档地址

    DOMContentLoaded 意思就是:当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完成加载。

    load 意思就是:当一个资源及其依赖资源已完成加载时,将触发 load 事件。

    区别小结
    简而言之,二者触发时间的区别在于:DOMContentLoaded 在 HTML 文档本解析之后触发,而 load 是在 HTML 所有相关资源被加载完成后触发。
    为了感受这两个事件,可以使用 Chrome 打开一个任意网页。打开控制台的 Network 面板。

     
     
    可以看到图上有两条线:一条蓝线,代表 DOMContentLoaded 事件,触发时间为 1.50s;一条红线,代表 load 事件,触发时间为 5.54s。
    如果想要更直观地感受二者的区别,还可以 点击这里 查看效果。

    二、HTML 解析过程与 DOMContentLoaded 触发时机

    我们已经知道 DOMContentLoaded 的触发时间为:当 HTML 文档被加载和解析完成。那么我们还需要理解 HTML 的解析过程。

    1. 在既没有 CSS 也没有 JS 的情况下,HTML 文档的解析过程为:
       
       

      DOMContentLoaded 事件的触发时机为:HTML 解析为 DOM 之后。

    2. 有 CSS 无 JS 的情况下,HTML 文档解析过程为:
       
       

      这里与 1. 不同的地方在于,渲染树的生成是基于 DOM 和 CSSOM 的。但是触发 DOMContentLoaded 的时间依然是在 HTML 解析为 DOM 后,无论此时 CSS 解析为 CSSOM 的过程是否完成。

    3. 当有 JS 时,HTML 文档解析过程为:
       
       

      有一个问题:关于首屏时间?(https://www.cnblogs.com/caizhenbo/p/6679478.html)
      “计算这个网页从空白到出现内容所发费的时间”。那怎么计算这段时间?这段时间其实就是 HTML 文档加载和解析的时间。也就是 DOMContentLoaded 事件触发之前所经历的时间。


    作者:人总要靠自己_趁年轻去努力
    链接:https://www.jianshu.com/p/c3384c315d40
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    MySQL数据库“局部”乱码
    每个人都可以写博客
    命令行导入SQL文件
    数据库连接扩展
    PHP程序设计经典300例
    C# 调用外部dll
    asp.net中实现文件下载功能
    Windows10下Docker的安装
    java基础——面向对象
    java基础——第一章概述
  • 原文地址:https://www.cnblogs.com/liontone/p/12513253.html
Copyright © 2011-2022 走看看