首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

DOMContentLoaded结束标签是否必须总是在文档的末尾?

DOMContentLoaded结束标签不必总是在文档的末尾。DOMContentLoaded是一个事件,表示当初始的HTML文档被完全加载和解析完成时触发。它在页面的DOM树构建完成后立即触发,而不需要等待其他资源(如图片、样式表、脚本)的加载完成。

通常情况下,将脚本标签放在HTML文档的末尾是一个良好的实践,因为这样可以确保在执行脚本之前,页面的DOM结构已经完全构建好了,避免了脚本操作未定义的元素。这种做法可以提高页面加载速度和用户体验。

然而,并不是所有情况下都需要将DOMContentLoaded结束标签放在文档的末尾。有些情况下,可能需要在DOM构建过程中动态加载脚本或执行一些特定的操作,这时可以在需要的位置使用DOMContentLoaded事件来触发相应的处理逻辑。

总结起来,DOMContentLoaded结束标签不必总是在文档的末尾,但在大多数情况下将其放在文档末尾是一个良好的实践。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

文档解析和DOMContentLoaded触发时机

DOMContentLoaded 触发定义 HTML 文档被完全加载和解析完成之后,会触发 DOMContentLoaded 事件,通常外部样式表和文档图片加载都不会影响该事件触发,不过也有特殊情况...script 标签 文档解析行为会根据 script 标签不同属性设置而表现不同, HTML5 规范里面关于 script 标签属性介绍部分: https://html.spec.whatwg.org...所以是否影响文档解析这里要区分一下样式表不同情况。 1....HTML5 规范 文档解析部分,直接看最后解析结束部分,https://html.spec.whatwg.org/multipage/parsing.html#the-end 到文档解析后面,主要看看几个步骤...实现者必须要权衡脚本获取到错误样式和在等待缓慢网络请求时没有执行任何解析性能影响之间平衡。当然这也可以是页面性能优化一点。 最后 为什么要分析影响文档加载因素呢?

76220
  • 用框架你,可能早已忽略了这些事件API

    DOMContentLoaded 和脚本 当浏览器处理一个 HTML 文档,并在文档中遇到 标签时,就会在继续构建 DOM 之前运行它。...这是一种防范措施,因为脚本可能想要修改 DOM,甚至对其执行 document.write 操作,所以 DOMContentLoaded 必须等待脚本执行结束。...因此,它必须等待样式加载完成。 当 DOMContentLoaded 等待脚本时,它现在也在等待脚本前面的样式。...readyState 如果我们将 DOMContentLoaded 事件处理程序设置在文档加载完成之后,会发生什么? 很自然地,它永远不会运行。 在某些情况下,我们不确定文档是否已经准备就绪。...> 之类脚本会阻塞 DOMContentLoaded,浏览器将等待它们执行结束。 图片和其他资源仍然可以继续被加载。

    1.8K10

    HTML解析之DOMContentLoaded和onload

    但script标签上还有两个常见属性defer和async 一般情况 当浏览器遇到 script 标签时,文档解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档...defer 当浏览器遇到 script 标签时,文档解析不会停止,JS文件加载与文档解析并行(异步),待到文档解析DOM构建完成,脚本才会执行...async 当浏览器遇到 script 标签时,文档解析不会停止,JS文件加载与文档解析并行(异步),脚本下载完成后开始执行脚本,脚本执行时文档会停止解析...MDN解释:当初始 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。...注意:DOMContentLoaded 事件必须等待其所属script之前样式表加载解析完成才会触发。

    1.6K20

    domReady理解

    domReady理解 domReady是名为DOMContentLoaded事件别称,当初始HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架完全加载...使用异步加载标签是不会阻塞DOM解析,当然其就不会阻塞DOMContentLoaded事件触发,但是依旧会阻塞load事件触发。...再来看一下DOMContentLoaded事件与load事件触发时机: 当初始HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架完全加载...标签本身也属于DOM结构,必须等待其加载完成之后才能触发DomContentLoaded事件;异步加载标签不会阻塞DOMContentLoaded事件。...//var Browser = {}; //设置是否在FF下使用DOMContentLoaded(在FF2下特定场景有Bug) this.conf = { enableMozDOMReady

    1K31

    探究网页资源究竟是如何阻塞浏览器加载

    上面这张图片大小大概是 200kb,当把网络下载速度限制成 50kb/s,打开该页面,可以看到如下结果:当 h1 和 h2 标签渲染出来且打印了 DOMContentLoaded 时候...答案是否,当把外链样式放到 最尾部去加载: 我是 h1 标签 <link href="https://cdn.bootcss.com/bootstrap...<em>DOMContentLoaded</em> 遇到脚本 当浏览器处理一个 HTML <em>文档</em>,并在<em>文档</em>中遇到 <em>标签</em>时,就会在继续构建 DOM 之前运行它。...这是一种防范措施,因为脚本可能想要修改 DOM,甚至对其执行 document.write 操作,所以 <em>DOMContentLoaded</em> <em>必须</em>等待脚本执行<em>结束</em>后才触发。...答案也<em>是否</em>定<em>的</em>,有两个例外,对于 async 脚本和动态脚本是不会阻塞 <em>DOMContentLoaded</em> 触发<em>的</em>。

    2.1K30

    <script> 脚本以及 <link> 标签对 DOM 解析渲染影响

    因此,建议script标签放在body结束标签之前,这样不会不会阻塞页面整体内容DOM解析和渲染。...script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded、 loaded事件2、defer,文档执行时,当遇到有defer属性script标签时,则脚本下载则在后台运行,下载不会阻止...DOM解析渲染多个defer属性script标签,则在后台并行下载脚本执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded...3、async文档解析时,当遇到有async属性script标签时,则脚本下载则在后台运行,下载不会阻止DOM解析渲染多个async属性script标签,则在后台同时并行下载async脚本执行会阻止页面的解析渲染遵循先下载完先执行...操作:link支持DOM操作改变样式,由于 DOM 方法是基于文档,无法使用@import方式插入样式兼容性:@import是 CSS2.1提出语法,老版本浏览器可能不支持;link标签作为 HTML

    55811

    【前端面试专栏】script脚本以及link标签对DOM影响

    inline(内联:将代码直接嵌入到HTML文档元素中,而不是通过外部文件引用方式) script也不会触发Paint。...因此,建议script标签放在body结束标签之前,这样不会不会阻塞页面整体内容DOM解析和渲染。...执行脚本会阻止页面的解析渲染 执行完脚本继续页面的解析渲染 执行完script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded、 loaded事件 2、defer, 文档执行时,当遇到有...3、async 文档解析时,当遇到有async属性script标签时,则脚本下载则在后台运行,下载不会阻止DOM解析渲染 多个async属性script标签,则在后台同时并行下载 async脚本执行会阻止页面的解析渲染...DOM操作:link支持DOM操作改变样式,由于 DOM 方法是基于文档,无法使用@import方式插入样式 兼容性:@import是 CSS2.1提出语法,老版本浏览器可能不支持;link标签作为

    17910

    浏览器特性

    事件 当初始 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架完成加载。...事件所属 script 标签上有外联样式表(link 标签),DOMContentLoaded 事件必须等待它之前样式表加载解析完成才会触发。...document.readyState 会返回一个字符串,它有以下几种可能: loading 表示正在加载; interactive 表示文档已被解析,"正在加载" 状态结束,但是诸如图像,样式表和框架之类子资源仍在加载...无阻塞脚本 除了上面 onload 事件和 DOMContentLoaded 可以延时脚本执行外, 标签还可以添加 defer 或者 async 属性延迟脚本执行。...需要注意是:这两个属性不能用在内嵌脚本中,只能用在外联脚本标签上。 带有 defer 属性脚本将在文档完成解析后,触发 DOMContentLoaded 事件之前执行。

    1.3K10

    JS页面生命周期事件

    今天做个大屏项目, 想在大屏加载所有资源前加个加载动画, 加载结束再移除, 当然肯定时在load事件里进行移除, 但是对其他事件有点模糊了, 复习一下哦垃圾 生命周期事件 DOMContentLoaded...用来检查用户是否保存了修改, 并询问是否真的要离开 unload, 用户几乎已经离开, 但是可以启动一些操作, 比如发送统计数据 1....DOMContentLoaded DOMContentLoaded 事件发生在 document 对象上, 必须使用document对象上 2. window.onload 当包括样式、图像和其他资源页面被全部加载时...document.readyState 属性为我们提供了一些关于当前加载状态信息 loading —— 文档正在被加载。...interactive —— 文档被全部读取。 complete —— 文档被全部读取,并且所有的资源(图像之类)都被加载。

    3.4K30

    你不知道 script 标签 defer 与 async 属性

    先看一下 MDN 上解释: 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后,触发 DOMContentLoaded 事件前执行。...有 defer 属性脚本会阻止 DOMContentLoaded 事件,直到脚本被加载并且解析完成。 文档是直接总结了他特性,我们先看看下面的代码,展开说说细节,加深一下理解。 <!...该属性能够消除解析阻塞 Javascript。 解析阻塞 Javascript 会导致浏览器必须加载并且执行脚本,之后才能继续解析。...这主要分 2 种情况: 如果是「普通脚本」,浏览器会优先判断async属性是否存在,如果存在,则以async特性去加载此脚本,如果不存在,再去判断是否存在defer属性。...一图胜千言 最后,用一张图概括一下这两个属性加载模式吧: defer 和 async 加载模式 思考题 为什么浏览器在解析到普通 script 标签时,必须先执行他?

    86910

    浅谈script标签async和defer

    浅谈script标签async和defer script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要标签了。...脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。...我们要测试一下,如果async脚本加载足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async描述“在允许情况下执行”论证)。...推荐应用场景 defer 如果你脚本代码依赖于页面中DOM元素(文档是否渲染完毕),或者被其他脚本文件依赖。...例: 评论框 代码语法高亮 polyfill.js async 如果你脚本并不关心页面中DOM元素(文档是否渲染完毕),并且也不会产生其他脚本需要数据。

    2.1K60

    浅谈script标签async和defer

    浅谈script标签async和defer script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要标签了。...脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。...我们要测试一下,如果async脚本加载足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async描述“在允许情况下执行”论证)。...推荐应用场景 defer 如果你脚本代码依赖于页面中DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。...例: 评论框 代码语法高亮 polyfill.js async 如果你脚本并不关心页面中DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要数据。

    1.1K20

    script标签加快加载速度

    script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要标签了。 直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行过程中,会阻塞后续DOM渲染。...脚本会在文档渲染完毕后,DOMContentLoaded事件调用前执行。...我们要测试一下,如果async脚本加载足够快,是否会在DOMContentLoaded之前就执行(这个实验是基于对async描述“在允许情况下执行”论证)。...推荐应用场景 defer 如果你脚本代码依赖于页面中DOM元素(文档是否渲染完毕),或者被其他脚本文件依赖。...例: 评论框 代码语法高亮 polyfill.js async 如果你脚本并不关心页面中DOM元素(文档是否渲染完毕),并且也不会产生其他脚本需要数据。

    1.6K10

    深入分析window.performance以及上报收集到数据(前端性能监控)

    API详解=====navigationStart 表示从上一个文档卸载结束unix时间戳,如果没有上一个文档,这个值将和fetchStart 相等。...domainLookupEnd 分别代表DNS查询开始和结束时间节点。...domContentLoadEventStart 代表domContentLoaded事件触发时间节点:页面文档完全加载并解析完成之后,会触发DOMContentLoaded,Html文档不会等待样式文件...,图片文件,自框架页面的加载(load事件可用来检测页面是否完全加载完毕)domContentLoadEventEnd 代表domContentLoaded事件完成时间节点,此时用户可以对页面进行操作...构造图片打点不仅不用插入DOM,只要在js中new出Image对象就能发起请求,而且还没有阻塞问题,在没有js浏览器环境中也能通过img标签正常打点,这是其他类型资源请求所做不到相比PNG/JPG

    43110
    领券