开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在DomContentLoaded之前隐藏杂乱的渲染页面

基础概念

DOMContentLoaded 是一个事件，当 HTML 文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架完成加载。这个事件通常用于在页面初始渲染之前执行一些 JavaScript 代码，以避免阻塞页面的渲染。

相关优势

提高用户体验：通过在 DOMContentLoaded 事件触发之前隐藏页面，可以避免用户在页面加载过程中看到杂乱的布局。
优化性能：减少页面初始渲染的时间，提高页面加载速度。

类型

CSS 隐藏：通过 CSS 样式隐藏页面内容。
JavaScript 控制：使用 JavaScript 在 DOMContentLoaded 事件触发之前隐藏页面内容。

应用场景

单页应用（SPA）：在页面加载时隐藏内容，直到所有必要的资源加载完成后再显示。
复杂页面：对于包含大量图片、视频或其他资源的页面，可以在加载过程中隐藏内容，以提高用户体验。

遇到的问题及解决方法

问题：为什么在 `DOMContentLoaded` 之前隐藏页面内容？

原因：在页面加载过程中，浏览器会逐步渲染页面内容。如果页面中有大量未加载的资源，用户可能会看到杂乱的布局，影响用户体验。

解决方法：

CSS 隐藏：
CSS 隐藏：
JavaScript 控制：
JavaScript 控制：

示例代码

以下是一个完整的示例，展示了如何在 DOMContentLoaded 之前隐藏页面内容，并在加载完成后显示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hide Page Until Loaded</title>
  <style>
    body {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This is some content that will be hidden until the page is fully loaded.</p>

  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.body.style.display = "block";
    });
  </script>
</body>
</html>

参考链接

MDN Web Docs: DOMContentLoaded

通过以上方法，可以在 DOMContentLoaded 之前隐藏页面内容，提高用户体验和页面加载速度。

相关搜索:在DOMContentLoaded之前触发的事件在渲染之前等待页面加载数据在评估OnGetAsync之前对页面进行剃刀渲染 JSP包含的标题元素在页面加载之前隐藏如何防止react路由器重新渲染之前渲染的页面？在：：之前隐藏内容的背景在完全加载页面之前，页面加载栏被隐藏在jsf中在页面完全渲染之前，立即将CSS样式从chrome扩展应用到页面在Livewire上渲染整个页面组件之前检查资源是否存在在组件渲染之前创建对组件的引用渲染是在函数执行之前发生的在渲染新结果之前闪烁以前的结果在使用Tabs时，有没有办法在页面加载之前隐藏JQuery中的内容？useEffect似乎是在渲染完成之前触发的在呈现页面之前等待挂起的承诺在表格呈现之前，隐藏shindydashboard正文中的按钮在调用onAttach()方法之前隐藏片段内的视图在wordpress中隐藏页面上的插件在Javascript中渲染页面加载时的数组 iText -在带有图像的页面底部渲染段落

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS篇(005)-在页面上隐藏元素的方法有哪些？

参考答案： -（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。...-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。 -（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。...元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。 -（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。...-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。...-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

6211 0

Script标签的async和defer

之前有写过HTML页面渲染过程，知道了JavaScript是会阻塞DOM解析的，所以我们会把script标签放到底部防止阻塞HTML解析。...这两个都是用来控制外部脚本文件的，就是使用script引入，有src属性，在script标签没有src属性的内联脚本是无效的。这两个都不会阻塞HTML的解析。...有多个脚本使用async的时候，不能保证顺序，如果脚本直接有依赖，是不能使用这个属性。Async会在load之前执行，但是不保证和DOMContentLoaded的执行顺序。...另外说一个跟HTML渲染的小知识点，我们在网络很卡的情况下，标签出来了，样式没有出来，之前说的是DOM和css构建出render树才能渲染页面，然后就觉得很矛盾，突然看见有文章说现代浏览器为了更好的用户体验...，渲染引擎尽快渲染内容，现在已经不会等所有HTML解析之前开始构建和布局render树，部分内容将提前渲染，就是说并不是一定要DOM和css都解析加载完成构建render树之后才渲染页面。

6493 0

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

也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。这时候浏览器的忙指示（那个页面上方的烦人的旋转的圆圈）不会消失。 DOMContentLoaded什么时候触发？...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...为了防止javascript阻塞，我们会 1、把放到紧跟之前的位置这样就不会影响需要放到页面上的UI元素的解析了。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。

5.1K15 0

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

这是布兰的第 15 篇原创一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。...测试前环境准备测试之前我们需要对浏览器下载资源的速度进行控制，将它重新设置为 50kb/s，操作方式：打开 Chrome 开发者工具；在 Network 面板下找到 Disable cache 右侧的下拉列表...试想一下页面渲染的流程就知道了。...可以说解析 DOM 和解析 CSS 其实是并列进行的，既然是并列进行的，那 CSS 和 DOM 就不会互相影响了，这和结论一相符；另外渲染页面一定是在得到 CSSOM 树之后进行的，这和结论二相符。...秒过后样式加载完成的时会造成二次渲染，页面重新渲染出该字样，这就说明 CSS 阻塞 DOM 的渲染只阻塞定义在 CSS 后面的 DOM。

2.1K3 0

CSS到底会不会阻塞页面渲染

因此，CSS加载是会阻塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...所以css会阻塞后面js的执行。 DOMContentLoaded 对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。...而onLoad没什么好说的，就是等待页面的所有资源都加载完成才会触发，这些资源包括css、js、图片视频等。而DOMContentLoaded，顾名思义，就是当页面的内容解析完成后，则触发该事件。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。...因此，我们可以得出结论：如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。

4.9K4 0

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

也就是说，DOM解析工作不完成，用户与页面的很多（并不是所有）事件交互就无法进行。这时候浏览器的忙指示（那个页面上方的烦人的旋转的圆圈）不会消失。 DOMContentLoaded什么时候触发？...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...为了防止javascript阻塞，我们会 1、把放到紧跟之前的位置这样就不会影响需要放到页面上的UI元素的解析了。...而 DOMContentLoaded 只有在 defer 脚本执行结束后才会被触发。...如果页面还是没有解析完成，就会停下来（阻塞页面）等此脚本执行完毕再继续解析。async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。

2.4K2 0

浅谈script标签中的async和defer

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。...现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...我们要测试一下，如果async脚本加载的足够快，是否会在DOMContentLoaded之前就执行（这个实验是基于对async的描述“在允许的情况下执行”的论证）。...执行结果不出所料，如果给async一定的时间，是有可能在DOMContentLoaded事件之前就执行的。 ? P.S.

2.2K6 0

css加载会造成阻塞吗

/h1> 假设： css加载会阻塞DOM树解析和渲染假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我们一开始看到的应该是白屏...因此，CSS加载是会阻塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...所以css会阻塞后面js的执行。 DOMContentLoaded 对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。我们先对第一种情况做测试： <!...因此，我们可以得出结论：如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。

4.4K6 0

css加载会造成阻塞吗

/h1> 假设：css加载会阻塞DOM树解析和渲染假设结果: 在bootstrap.css还没加载完之前，下面的内容不会被解析渲染，那么我们一开始看到的应该是白屏...因此，CSS加载是会阻塞Dom的渲染的。由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。...所以css会阻塞后面js的执行。 DOMContentLoaded 对于浏览器来说，页面加载主要有两个事件，一个是DOMContentLoaded，另一个是onLoad。...当页面里同时存在css和js，并且js在css后面的时候，DomContentLoaded必须等到css和js都加载完毕才触发。我们先对第一种情况做测试： <!...因此，我们可以得出结论：如果页面中同时存在css和js，并且存在js在css后面，则DOMContentLoaded事件会在css加载完后才执行。

1.5K2 0

浅谈script标签中的async和defer

直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。...现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...我们要测试一下，如果async脚本加载的足够快，是否会在DOMContentLoaded之前就执行（这个实验是基于对async的描述“在允许的情况下执行”的论证）。...执行结果不出所料，如果给async一定的时间，是有可能在DOMContentLoaded事件之前就执行的。 ? P.S.

1.1K2 0

script标签加快加载速度

现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。...但是我们可以看到一个小细节，DOMContentLoaded事件的触发并不受async脚本加载的影响，在脚本加载完之前，就已经触发了DOMContentLoaded。 ? ? ? ?...我们要测试一下，如果async脚本加载的足够快，是否会在DOMContentLoaded之前就执行（这个实验是基于对async的描述“在允许的情况下执行”的论证）。...同时为了保证测试的稳定性，我们在script脚本引入的后边添加了数千个空的div节点，用来延长文档的渲染时间。 ?...执行结果不出所料，如果给async一定的时间，是有可能在DOMContentLoaded事件之前就执行的。 ? P.S.

1.6K1 0

前端资源浏览器渲染原理

浏览器的渲染页面过程 HTML解析过程一般情况下服务器会给浏览器返回 xx.html 文件解析html 其实就是 Dom 树的构建过程我们可以根据以下html 结构来简单的分析出 html...： DOM 结构发生变化（添加 & 移除）改变了 CSS 样式代码也就是布局修改了窗口尺寸或者是调用了某些内置函数获取位置和尺寸信息重绘（reprint）我们渲染的第一次，在之前的流程图中叫做...transition 设置了opacity、transform PS：分层确实可以提高性能，但是它以内存管理为代价，所以不作为性能优化策略来使用 script元素和页面解析的关系 JS 在我们渲染过程中的那一步呢...：在现在的开发模式中大多都是使用vue和React 作为开发框架 JS 的占比往往很大处理事件也会变长这也导致了如果解析阻塞那么在脚本解析完成之前可能界面什么都不显示这里 js 给我们提供了两个属性...它的特性：浏览器不会因 async 脚本而阻塞（与 defer 类似）； async脚本不能保证顺序，它是独立下载、独立运行，不会等待其他脚本 async不会能保证在DOMContentLoaded之前或者之后执行

5752 0

＜script＞脚本以及＜link＞标签对 DOM 解析渲染的影响

回答： script标签时，会触发一次Paint，浏览器会将script标签之前的元素渲染出来。但也并不是所有的script标签都会触发Paint。...因此，建议script标签放在body结束标签之前，这样不会不会阻塞页面整体内容的DOM解析和渲染。...DOM解析渲染多个defer属性的script标签，则在后台并行下载脚本的执行需要等到页面解析完成才能进行当页面解析渲染完毕后, 会等到所有的defer脚本下载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded...注意：案例中CSS资源为外网资源，所以并不会直接就加载出来，可以在页面看到渲染的过程，当然可以直接开vpn，css资源几乎秒加载，页面也秒渲染的加载是同时进行的，这不同于在style标签里面的内置样式；@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。

6051 1

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

回答： script标签时，会触发一次Paint，浏览器会将script标签之前的元素渲染出来。但也并不是所有的script标签都会触发Paint。...因此，建议script标签放在body结束标签之前，这样不会不会阻塞页面整体内容的DOM解析和渲染。...执行脚本会阻止页面的解析渲染执行完脚本继续页面的解析渲染执行完script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded、 loaded事件 2、defer，文档执行时，当遇到有...注意：案例中CSS资源为外网资源，所以并不会直接就加载出来，可以在页面看到渲染的过程，当然可以直接开v**，css资源几乎秒加载，页面也秒渲染的加载是同时进行的，这不同于在style标签里面的内置样式；@import添加的样式是在页面载入之后再加载，这可能会导致页面因重新渲染而闪烁。

1861 0

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。...在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。...则是在页面的其他资源如图片、字体、音频、视频加载完成之后触发 load事件一般在DOMContentLoaded之后才触发（也有可能在它之前哦）这个时候发现绿色虚线之前有一个浅绿色方块，相应的解释如下...哈哈，居然只渲染了12俩字，说明浏览器会渲染body中脚本之前的内容，那会是哪个脚本之前的内容呢？第八种情况：在div之间都插入脚本 ? ?...DOMContentLoaded和load事件也没有强制的先后顺序，DOMContentLoaded一般在load事件之前触发，但也可能在load事件之后触发。

2.8K9 0

《现代Javascript高级教程》页面生命周期

页面生命周期定义了页面从加载到卸载的整个过程，包括各种事件和阶段。在本文中，我们将详细介绍四个关键事件：DOMContentLoaded、load、beforeunload 和 unload。...1.3 应用场景 DOMContentLoaded 事件在页面的 HTML 和 DOM 树加载完成后触发，但在所有外部资源（如图像、样式表、脚本等）加载完成之前。...2.3 应用场景 load 事件在整个页面及其所有外部资源（如图像、样式表、脚本等）加载完成后触发。这意味着页面的所有内容已经可用，并且可以执行与页面渲染和交互相关的操作。...3.3 应用场景 beforeunload 事件在页面即将被卸载（关闭、刷新、导航到其他页面等）之前触发。它通常用于询问用户是否确定离开当前页面，并可以在事件处理函数中执行一些清理操作。...load 事件在整个页面及其外部资源加载完成后触发，适用于执行与页面渲染和交互相关的操作。 beforeunload 事件在页面即将被卸载之前触发，适用于询问用户是否确定离开页面或执行一些清理操作。

2614 0

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。...在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。...则是在页面的其他资源如图片、字体、音频、视频加载完成之后触发 load事件一般在DOMContentLoaded之后才触发（也有可能在它之前哦）这个时候发现绿色虚线之前有一个浅绿色方块，相应的解释如下...哈哈，居然只渲染了12俩字，说明浏览器会渲染body中脚本之前的内容，那会是哪个脚本之前的内容呢？第八种情况：在div之间都插入脚本 ? ?...DOMContentLoaded和load事件也没有强制的先后顺序，DOMContentLoaded一般在load事件之前触发，但也可能在load事件之后触发。

1.8K4 0

HTML解析之DOMContentLoaded和onload

（在DOMContentLoaded事件触发之前）。...不同的是执行时机，async在代码加载完之后会马上执行，并且执行时会阻塞HTML解析。而defer则要等到文档解析DOM构建完成，DOMContentLoaded事件触发之前执行。...另一个不同的事件 load 应该仅用于检测一个完全加载的页面。在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个令人难以置信的流行的错误，所以要谨慎。...注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。...页面加载完毕，触发window.onload 为什么要强调css放头部，js放尾部因为css样式表是浏览器渲染页面的重要一环，应该尽早发起请求加载，毕竟也不会阻塞HTML解析。

1.6K2 0

JavaScript(一)

JavaScript 简介 JavaScript 堪称世界上被人误解最深的编程语言，常被嘲为”玩具语言”，但在它看似简洁的外衣下，还隐藏着强大的语言特性。...JavaScript 最初的目的是为了”让网页动起来”。这种编程语言我们称之为脚本。它们可以写在 HTML 中，在页面加载的时候会自动执行。脚本作为纯文本存在和执行。...内核和引擎我们知道，浏览器内核包括: 渲染引擎 JS 引擎常见的渲染引擎有: blank、webcore 等，常见的 JS 引擎有: jscore、chakra、V8 等。...但是从其他的服务器中获取数据的功能是受限的，需要服务器(在 HTTP 头中)添加某些参数其他语言最近出现了很多不同的语言，这些语言在浏览器中执行之前，都会被编译(转化)成 JavaScript。...异步脚本一定会在 load 事件之前执行，可能会在 DOMContentLoaded 事件之前或之后执行。

5482 0

domReady的理解

根据计算好的信息绘制整个页面，系统会遍历渲染树，并调用paint方法，将内容显示在屏幕上。...在浏览器解析DOM结构的过程中是存在阻塞过程的：解析JavaScript过程中会阻塞浏览器的解析过程，准确来说解析渲染过程与解析JavaScript的过程是互斥的。...关于触发的时机，如果文档中全部为HTML与CSS则DomContentLoaded事件无需等到CSS加载完毕即可触发；当Js都在CSS之前DomContentLoaded事件无需等到CSS加载完毕即可触发...在各种条件下重新整理一下页面加载的过程，主要是在于DOMContentLoaded事件与load事件触发的时间线：自上而下，首先解析HTML标签，生成DOM Tree，此时document.readyState...//var Browser = {}; //设置是否在FF下使用DOMContentLoaded（在FF2下的特定场景有Bug） this.conf = { enableMozDOMReady

1K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭