文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

文档解析和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 到文档解析后面，主要看看几个步骤...实现者必须要权衡脚本获取到错误的样式和在等待缓慢网络请求时没有执行任何解析的性能影响之间的平衡。当然这也可以是页面性能优化的一点。 最后 为什么要分析影响文档加载的因素呢？

70820
您找到你想要的搜索结果了吗？
是的
没有找到

用框架的你，可能早已忽略了这些事件API

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

1.7K10

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

97331

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

上面这张图片的大小大概是 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>。

2K30

＜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

39111

【前端面试专栏】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标签作为

12110

浏览器特性

事件 当初始的 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.3K30

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

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

80010

浅谈script标签中的async和defer

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

1.9K60

浅谈script标签中的async和defer

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

1K20

script标签加快加载速度

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

1.5K10

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

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

29510
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券