开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在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到底会不会阻塞页面渲染

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我们就一起来分析一下。

04

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

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。

03

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

浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。

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

浏览器的多线程中，有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面，有的线程负责轮询、监听用户事件。

02

Script标签的async和defer

之前有写过HTML页面渲染过程，知道了JavaScript是会阻塞DOM解析的，所以我们会把script标签放到底部防止阻塞HTML解析。其实script还有两个属性，async和defer，也是可以使得JavaScript和DOM和css同步加载。

03

css加载会造成阻塞吗

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。

06

script标签加快加载速度

对于script元素，新增async属性与defer属性，他们的作用都是加快页面的加载速度，使脚本代码的读取不再妨碍页面上其他元素的加载。

01

浅谈script标签中的async和defer

浅谈script标签中的async和defer script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲

06

css加载会造成阻塞吗

可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。

02

【总结】关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想到一个困扰很久的问题，即一般把<script>放在<body>尾部，<link>标签放在<head>内部，而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面。

01

浅谈script标签中的async和defer

现在大家习惯于在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。好在script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。

02

JS 与 CSS 阻塞 DOM 渲染解析的情况详解

最近系统梳理HTML5所有涉及到的标签时，梳理至<link>和<script>标签时，碰巧想到一个困扰很久的问题，即一般把<script>放在<body>尾部，<link>标签放在<head>内部，而页面通过CDN引入第三方框架或库时，基本都是将其<script>标签放在<link>标签前面。

03

domReady的理解

domReady是名为DOMContentLoaded事件的别称，当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像和子框架的完全加载。

03

网站建设（二）通用--页面刚加载时的loading效果

有人问我：有些页面在刚进入的时候，会有loading效果，过一会儿后，loading效果消失，页面展示出来。这个效果如何实现呢？

02

何为 content-visibility？

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

01

前端资源浏览器渲染原理

当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了

02

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

当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。

01

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。浏览器下载完成HTML(Finish Loading HTML)之

04

Chrome的First Paint触发的时机探究

前言 First paint 直译过来的意思就是浏览器第一次渲染(paint)，在First paint之前是白屏，在这个时间点之后用户就能看到（部分）页面内容。所以研究这个First Paint的触发时机对于优化浏览器页面的首屏渲染时间有很重要的作用。在正题开始之前，先说下浏览器的页面的加载流程（大体过程是这样，并不精确，只是为了帮助理解后面内容）：浏览器输入url，浏览器发送请求到服务器，服务器将请求的HTML返回给浏览器。浏览器下载完成HTML(Finish Loading HTML)之

09

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

当HTML解析器解析HTML，如果遇到script标签，普通的script标签会暂停对DOM解析渲染，因为该脚本可能会修改DOM。这里有三种情况：普通脚步、defer、async。 ==defer、async只对外联script脚本文件有效, 内联script脚本设置无效。\==

01

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

在 Web 开发中，了解页面生命周期是非常重要的。页面生命周期定义了页面从加载到卸载的整个过程，包括各种事件和阶段。在本文中，我们将详细介绍四个关键事件：DOMContentLoaded、load、beforeunload 和 unload。我们将探讨这些事件的属性、API、应用场景，并提供一些代码示例和参考资料。

04

一次useEffect引发浏览器执行机制的思考

我相信大家首先想到的思路就是在useEffect中通过getBoundingClientRect()获得对应传入元素(id)的位置，然后通过定位增加一个类似的弹窗效果。

01

HTML解析之DOMContentLoaded和onload

在很久很久以前，我在封装自己的JQuery库时就使用过DOMContentLoaded，觉得这个知识点看看别的文章就行了，不过现在我想把它记下来。

02

浏览器的常见考点

这个过程要注意标签位置，以及script标签位置和HTML提供的async defer属性

02

JS篇(022)-<script>标签的 defer 和 asnyc 属性的作用以及二者的区别？

无论 <script> 标签是嵌入代码还是引用外部文件，只要不包含 defer 属性和 async 属性（这两个属性只对外部文件有效），浏览器会按照 <script> 的出现顺序对他们依次进行解析，也就是说，只有在第一个 <script> 中的代码执行完成之后，浏览器才会执行第二个 <script> 中的代码，并且在解析时，页面的处理会暂时停止。

01

JavaScript(一)

之前的几篇，我们介绍了 HTML 和 CSS 基础知识，对于网页结构和样式，都有了一定的了解。从这篇之后，我们将介绍网页中另一个重要知识 - JavaScript。我们将参考《JavaScript 高级程序设计》，对每章的重要知识进行详细的讲解。

02

腾讯企鹅辅导 H5 性能极致优化

H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优化” 项目，针对页面加载速度，渲染速度做了专项优化，下面是对本次优化的总结，包括以下几部分内容：

02

腾讯企鹅辅导 H5 性能极致优化

企鹅辅导 H5 页面在长期迭代过程中，逐渐累积了一些性能问题，导致页面加载、渲染速度变慢。为了提升用户体验，近期针对页面加载速度，渲染速度做了专项优化，本文是对此次优化的实践总结。分析过程比较细致，希望能给性能分析经验欠缺的同学一些帮助。项目背景 H5 项目是企鹅辅导的核心项目，已迭代四年多，包括了课程详情页/老师详情页/报名页/支付页面等页面，构建产物用于企鹅辅导 APP/H5（微信/QQ/浏览器），迭代过程中了也累积了一些性能问题导致页面加载、渲染速度变慢，为了提升用户体验，近期启动了 “H5 性能优

02

Web 性能优化-首屏和白屏时间

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

02

浏览器特性

window.onload 事件表示页面加载完成后才加载 JavaScript 代码。这里的 “页面加载完成” 指的是在文档装载完成后会触发 load 事件，此时，在文档中的所有对象都在 DOM 中，所有图片，脚本，链接以及子框都完成了装载。而 img.onload 仅仅指的是图片装载完成。

01

Js脚本的异步加载

在浏览器中网页加载中 javascript 的加载和执行会默认阻塞 DOM 的加载和页面的渲染。因此，在编写代码的时候我们往往将 script 标签放到 body 的最后面。当然，也可以通过异步创建 script 标签的方式来实现 js的异步加载。

02

三分钟浅谈TT猫的前端优化

首先看一张访问TT猫首页的截图： 1.png 测试环境为谷歌浏览器，暂且不讨论其它浏览器，截图下方我们可以观察到以下参数： DOMContentLoaded：1.42s | Load：2.31s 以上

07

三分钟浅谈TT猫的前端优化

以上参数是在CTRL+F5下测试的，也就是说不存在浏览器本地缓存一说，DOM渲染时间为1.42s，整个页面load时间为2.31s。

01

【总结】1873- 一个前端非侵入式骨架屏自动生成方案

性能优化、减少页面加载时间、提升用户体验，是前端领域的一个永恒话题。在前后端分离、异步渲染在页面中被普遍应用的背景下，大量页面在用户访问时不可避免的会出现一段短时间白屏。目前的解决方案一般为以下几种：

01

从 8 道面试题看浏览器渲染过程与性能优化

移动互联网时代,用户对于网页的打开速度要求越来越高。百度用户体验部研究表明,页面放弃率和页面的打开时间关系如下图所示。

04

前端开发工程师有必须重视的几个性能指标

前端开发工程师有有必要重视的几个功用方针关于页面相应时间，有一条闻名的“2-5-8准则”。当用户访问一个页面：在2秒内得到照应时，会感觉系统照应很快；在2-5秒之间得到照应时，会感觉系统的照应速度还可以；在5-8秒以内得到照应时，会感觉系统的照应速度很慢，但可以承受；而逾越8秒后依然无法得到照应时，用户会感觉系统糟透了，进而选择脱离这个站点，或许主张第2次央求。关于一个网站如果期望抓住用户，网站的速度以及稳定性是首战之地的。从各式各样的前端监控平台中，你都可以获得页面许多的功用方针。本文将介绍

07

Js框架设计之DomReady

一、在介绍DomReady之前,先了解下相关的知识 1、HTML是一种标记语言,告诉我们这页面里面有什么内容,但是行为交互则要通过DOM操作来实现,但是注意:不要把尖括号里面的内容看作是DOM! 2、HTML是要通过浏览器解析之后才会转换成为DOM节点一般地,但我们向浏览器中输入一个地址,开始加载页面到我们看到页面的内容为止,这期间就有一个DOM节点构建的过程(浏览器将HTML标签转换为DOM节点)。当前页面上的所有的HTML标签都转换成DOM节点,这就叫DOM树建完,简称为DOMReady. 3、浏

06

浏览器渲染网页过程

当浏览器通过网络接收页面的HTML数据时，它会立即设置解析器将HTML转换为文档对象模型(DOM)。

03

实现3D环绕效果的图片展示技术探索

本文将介绍如何使用现代前端技术实现3D环绕效果的图片展示。我们将通过详细的步骤和代码示例，探索如何实现这种富有创意和吸引力的视觉效果，从而提升用户体验和网站互动性。

01

我们为什么要做前端性能优化？

大家知道。我们每天都在谈前端性能优化，每天都在背前端性能优化方案，然而，我们却不知道他背后的原理以及涉及那些知识储备。所以，我问了自己一些问题，

02

重学前端（五）——谈谈前端性能优化！

大家知道。我们每天都在谈前端性能优化，每天都在背前端性能优化方案，然而，我们却不知道他背后的原理以及涉及那些知识储备。所以，我问了自己一些问题，

01

拯救你的年底 KPI：前端性能优化

（给全栈前端精选加星标，提升前端技能）原文地址：https://juejin.cn/post/6911472693405548557 作者：贩卖焦虑前言性能优化，每个工程师跑不掉的一个话题。

01

jQuery 的基本使用

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

03

chrome调试工具Network一些参数

今天简单说一下chrome开发者工具（DevTools）的Network，就只是几个模块简介一下。前端开发，对这个应该都特别熟悉。

02

Devtools 老师傅养成[5] - Network 面板

data 类型的 url: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

03

最详尽的浏览器页面渲染机制分析

浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例，对现代浏览器的渲染过程进行一个深度的剖析。

01

前端面试基础题：从浏览器地址栏输入url到显示页面的步骤

1.在浏览器地址栏输入URL 2.浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

03

前端魔法堂：解秘FOUC

前言对于问题多多的IE678，FOUC(flash of unstyled content)——浏览器样式闪烁是一个不可忽视的话题，但对于ever green的浏览器就不用理会了吗？下面尝试较全面地解密FOUC。到底什么是FOUC？页面加载解析时，页面以样式A渲染；当页面加载解析完成后，页面突然以样式B渲染，导致出现页面样式闪烁。样式A，浏览器默认样式或浏览器默认样式层叠部分已加载的页面样式；样式B，浏览器默认样式叠加全部页面样式。为什么会出现FOUC 我们了解当输入网

07

Web性能领域常见的专业术语

编者按：本文作者Berwin，W3C性能工作组成员，360导航资深前端工程师。《深入浅出Vue.js》作者。

03

jQuery 的基本使用

jQuery的官网地址： https://jquery.com/，官网即可下载最新版本。

05

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭