开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Chrome中重新加载页面时未设置样式的内容闪烁

是由于浏览器在重新加载页面时，会先显示页面的原始内容，然后再加载和应用样式表，这个过程会导致页面内容的闪烁。

为了解决这个问题，可以采取以下几种方法：

使用CSS样式表的预加载：可以在页面头部使用<link>标签将CSS样式表文件进行预加载，这样在重新加载页面时，浏览器会优先加载并应用样式表，减少页面内容的闪烁。
使用JavaScript进行样式的延迟加载：可以通过JavaScript代码动态加载和应用样式表，确保在页面重新加载时，样式表已经加载完毕并应用到页面上，避免内容闪烁。
使用缓存机制：可以通过设置HTTP响应头中的缓存相关字段，让浏览器缓存页面的样式表文件，这样在重新加载页面时，浏览器可以直接从缓存中获取样式表，减少内容闪烁的问题。
使用CSS样式表的内联方式：可以将CSS样式表的内容直接写在页面的<head>标签中，这样在重新加载页面时，样式表会随着页面一起加载，避免内容闪烁。
使用CSS样式表的媒体查询：可以通过媒体查询@media，在页面加载时根据设备的屏幕尺寸加载对应的样式表，这样可以避免在重新加载页面时出现内容闪烁的问题。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），它可以加速静态资源的传输，提高页面加载速度，减少内容闪烁的问题。产品介绍链接地址：https://cloud.tencent.com/product/cdn

相关搜索:Google Chrome:在悬停时重新加载页面后页脚链接变白 Wordpress页面在加载时崩溃，重新加载100%的时间使用Chrome重新加载页面时，内容会发生轻微变化在ASP.NET中重新加载时的页面显示在chrome扩展中重新加载页面时执行特定的脚本文件在chrome扩展启动时加载上次查看的页面在dropdownlist中更改值时重新加载整个表单页面在Javascript中重新加载setAttribute之后的页面在Nuxtjs中，动态页面的css和js在页面重新加载时不加载在reactjs中重新加载页面时如何修复404

相关搜索:

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

有帮助

没帮助

相关·内容

JS相关概念

1、CSS和JS在网页中的放置顺序是怎样的？（1）CSS 对于谷歌浏览器和Safari放在head里或body里都一样。因为它是在全部的样式表完全加载下来之后才开始渲染页面，将内容呈现在页面上。对于Firefox，head标签中的<link rel="stylesheet">行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容。而body标签中的<link rel="stylesheet">则不阻塞任何内容显示，会出现FOUC无样式内容闪烁。对于IE/Edge

02

浏览器之性能指标-CLS

如果想了解该系列文章(「浏览器底层原理&优化方案」)，可以参考我们已经发布的文章。如下是往期文章。

02

让你的网页更丝滑（一）

前段时间，我将精力专注在Web性能领域；在这个领域下有个重要的课题是如何让网页更丝滑（流畅）。

03

前端魔法堂：解秘FOUC

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

07

深入理解图片和框架的原生懒加载功能

看到本文标题你会问「懒加载是什么东西？」CSS-Tricks 网站中有非常多的探讨懒加载的文章，其中有一篇非常详尽的《用 JavaScript 花式实现懒加载的指南文档》。简言之，我们要讨论的是一种延迟网络资源加载的机制，在该机制下，网页内容按需加载，或者说得更直白些，当网页内容进入用户视野时再触发加载。

03

【译】Chrome77 Devtools有哪些新功能？

我们可以在打开开发者工具后，鼠标右击某个dom树中的节点，选择Copy -> Copy Styles即可将dom元素的样式复制到剪贴板中。

05

浏览器工作原理分析与首屏加载

本文介绍了浏览器工作原理，从解析HTML、CSS、JavaScript、DOM、性能优化、首屏优化、FOUC、白屏等方面进行阐述。

让骨架屏更快渲染 - 知乎

在之前「为vue项目添加骨架屏」一文中，介绍了骨架屏的概念以及在 Vue 项目中的应用。本文将介绍如何加快浏览器对骨架屏的渲染。

01

使用CSS提高网站性能的30种方法

根据httparchive.org的页面重量报告，CSS在平均70个请求和2MB的网页上占7个HTTP请求和70Kb的代码。这并不是网站性能糟糕的最坏原因（我正看着你呢，JavaScript），但CSS面临着特定的挑战：

02

高性能网站建设指南-前端性能优化（二）

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

02

有货移动Web端性能优化探索实践

在移动互联网的时代里，对于一个web站点来说，移动端的用户体验尤为重要。现代web站点的设计和开发都是以移动优先作为第一原则，我们也专门为了移动端的web站点做了相应的优化和提升。而网页的打开速度和页面的流畅度，对于用户是否长时间访问至关重要。我们在移动端的站点通过一系列的方法，最终为了快速打开页面展示网页内容，触达用户，同时能流畅的浏览网页。移动端的硬件条件，网络条件相对于桌面端，会复杂的多，设备类型多样，硬件配置参差不齐，分辨率碎片化，网络状况在移动过程中稳定性，速率都会变化，而对于一个页面到达用户的

Chrome 86 重要更新解读

Chrome 86 在2020年10月推出了稳定版，现已全面应用于Android、Chrome OS、Linux、macOS 和 Windows等平台，我们一起来看下这次的重要更新。若要看全部更新，请移步（https://www.chromestatus.com/features#milestone=86）。

02

现代浏览器探秘(part3)：渲染 [每日前端夜话(0x12)]

这是关于浏览器内部工作原理系列的第3部分。之前，我们介绍了多进程架构和导航流程。在这篇文章中，我们将看看渲染器进程内部发生了什么。

01

如何避免FOUC

FOUC即无样式内容闪烁也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。

02

Web 页面的性能 performance 详解

Navigation Timing 是一个可以在web中精确测量性能的javascript API。这个API提供了一个简单的方法来获得页面导航、加载事件的精确而又详细的时间状态。目前在 IE9、Chrome、Firefox nightly builds 中可用

02

前端之 HTML 知识点扫盲

在HTML中，文档类型声明是必要的。所有的文档的头部，你都将会看到”DOCTYPE” 的身影。这个声明的目的是防止浏览器在渲染文档时，切换到我们称为“怪异模式(兼容模式)”的渲染模式。 “DOCTYPE” 确保浏览器按照最佳的相关规范进行渲染，而不是使用一个不符合规范的渲染模式。

04

Web前端性能优化教程03：网站样式和脚本&减少DNS查找、避免重定向

一、将样式表放在顶部可视性回馈的重要性进度指示器有三个主要优势——它们让用户知道系统没有崩溃，只是正在为他或她解决问题；它们指出了用户大概还需要等多久，以便用户能够在漫长的等待中做些其他事情；最后，它们能给用户提供一些可以看的东西，使得等待不再是那么无聊。最后一点优势不可低估，这也是为什么推荐使用图形进度条而不是仅仅以数字形式显示预期的剩余时间。在Web的世界里，Html页面的逐步呈现就是很好的进度指示器。将没有立即使用的css放在底部是错误的做法通常组件的下载是按照文档中出现的顺序下载的，所以将不

网站优化系列篇之01 — 网页字体可见性

在使用谷歌 PageSpeed Insights 网站测试工具时，诊断结果经常会有一项目：

02

面试官：如何提升应用的Lighthouse 分数

Lighthouse 是用于测试网页性能工具最有用的技术之一。它具备了自动化，并可以测量网站的可访问性和 SEO。更重要的是，它目前是开源的并且可以免费使用。同时，它可以用来测试渐进式 Web 应用程序。

04

两个你必须要重视的 Chrome 80 策略更新！！！

Chrome 80 版本在 2020年2月份正式发布了，随后又陆续更新了几个小版本，本次升级主要是更新了安全修复和稳定性改进以及用户体验优化。

04

前端面试01-HTML+CSS

常用浏览器有chrome、safari、 IE、火狐(firefox) 、 Opera 、360、搜狗等

02

深入理解浏览器原理

导语：本文从市面主流的浏览器及相应的内核引擎开始，介绍了Chromium为代表的浏览器架构及Blink内核的功能架构。Chromium为多进程架构，用户从启动运行浏览器后，先后经过页面导航、渲染、资源加载、样式计算、布局、绘制、合成到栅格化，最后完成GPU展示。而页面渲染完成后，浏览器如何响应页面操作事件也进行了深入的介绍。良心推荐！本文第二至五部分内容根据 Mariko Kosaka 的英文原版《Inside look at modern web browser》(见参考文献)，进行翻译、理解

03

如何提高CSS性能

结合现代网站的复杂性和浏览器处理CSS的方式，即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分，所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验，这也需要优化你的CSS。

03

WebFont 三宗罪之一：WebFont 与 FOUT

四赴T.I.T 创意园面试，所学甚多。这篇文章是昨天面试中探讨的一个问题所延伸而来，现在都说WebFont 怎么好怎么好，让我们逆向思维，揭底WebFont 的一些缺点（劣势）。本文综合多篇文章来探讨WebFont 与 FOUT。首先，神马是 FOUT FOUC，即无样式内容闪烁(Flash of Unstyled Content)，指的是 Web 字体在下载并渲染之前，短暂显示无样式文本的情况。它会严重影响用户体验，尤其是当字体样式渲染前后有明显不同的时候。这个名词是09 年的时候由一个老外提出命名的（

07

检测 CSS 中的 JavaScript 支持

最近，我惊喜地发现了一个CSS媒体特性——scripting，它能够在所有现代浏览器中使用。这意味着，我们可以根据用户浏览器是否支持JavaScript来提供不同的CSS规则，从而减少未样式化内容的闪烁或不受欢迎的布局偏移。

01

【web前端阶段二】CSS巩固学习（持续更新）

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

04

「资深前端工程师总结」前端面试知识点大全——html篇

定时让网页在3秒内跳转到mozilla首页(http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。)

03

vue v-cloak指令

v-cloak 指令通常与 CSS 配合使用，用于在 Vue 实例加载和编译之前隐藏元素。通过给元素添加 v-cloak 属性，然后在 CSS 中定义对应的样式，可以确保在 Vue 实例加载完成前，该元素的内容不会显示在页面上。

00

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

https://developers.google.com/web/updates/2019/09/devtools

03

【译】一文洞察 Chrome DevTools 近半年新增了哪些功能

本文首发于政采云前端团队博客：【译】一文洞察 Chrome DevTools 近半年新增了哪些新功能 https://www.zoo.team/article/chrome-devtools

02

2020 年「我与技术面试那些事儿」

2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢平台！

02

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

HTML 面试知识点总结

本部分主要是笔者在复习 HTML 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！

02

URL 从输入到页面渲染全流程

通过DNS将域名解析成IP地址。在解析过程中，按照浏览器缓存、系统缓存、路由器缓存、ISP(运营商)DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序，逐步读取缓存，直到拿到IP地址

01

web性能优化的15条实用技巧

1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。

05

web性能优化的15条实用技巧

1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。

02

vue中的v-cloak

问题在使用vue时，HTML 绑定 Vue实例，在页面加载时会闪烁类似{{msg}}这样的信息。可能会导致用户体验不好。使用v-cloak v-cloak就能解决这个问题。 (1)用法这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。官方API 我们可以在 css 中加上： [v-cloak] { display: none; } 然后在 html 中的

09

设计小姐姐都说好的视觉还原对比利器

1. 导语设计走查已经是很多需求开发中不可缺少的一环，但是目前走查大部分都停留在人工肉眼对开发还原页面截图和设计稿进行对比找不同，效率比较低。这里整理了一些协助对比，提高开发还原度的工具。页面对比工具，可以分为三种不同展现形式： chrome 插件：直接在开发页面上进行对比，设计稿覆盖到页面上，对比查看页面不同点在线网站 / 客户端对比：通过上传实现截图和设计稿进行对比，增加一些参考线、取色器、度量尺寸等辅助工具。 npm 包工具：适合开发人员使用，引入对应代码包，通过编码操作传入对比页面，输出最终的

03

Google I/O 2019，Chrome 有什么消息？

谷歌 I/O 大会第一天，在“What's New with Chrome and the Web”主题分享上，来自谷歌 Chrome 团队的 Dion Almaer 与 Ben Galbraith 介绍了 Chrome 开发的最新进展。

03

现代 CSS 指南 -- at-rule 规则扫盲

这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于 900px 时，内部的样式代码块才能生效。

01

每天都在用的浏览器，你知道它是如何工作的吗？

浏览器经历了很多年的发展，浏览器引擎也在不停地迭代和演进。从PC时代到移动端，以独立浏览器的形态还是以系统WebView组件内嵌的形态存在，在互联网的生态系统中一直扮演着重要的角色。了解浏览器及其原理可以让我们打开另一个世界。

02

Vue 中的 v-cloak 解读

Vue1 中，允许将 Vue 实例挂载在 body 上，而 Vue2 是不允许的，想对整个页面实例化，需要另外用一个 div 来容纳整个页面内容，对其进行实例化

02

Cloudflare的HTTP/2优化策略

https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/

03

【云+社区年度征文】全年的技术盘点与总结（含小程序开发）

2020年，是个不平凡的一年，因为疫情的蔓延打乱了我的全盘计划。但是这也让我和云+社区一起共同努力，在工作中，完成了目标项目、攻克了技术难关、学习了新的技术，也感谢腾讯云+社区的平台！

HTML网页/KRPano项目一键打包EXE工具

HTML一键打包EXE工具(HTML封装EXE,桌件)能把任意HTML项目(网址)一键打包为单个EXE文件，可以脱离浏览器和服务器，直接双击即可运行。支持KRPano全景VR项目,WebGL游戏项目(Egret游戏打包,Cocos游戏打包,RPG MV Maker游戏打包),课件打包,网址打包等.

02

useLayoutEffect的秘密

大家好，我是「柒八九」。一个「专注于前端开发技术/Rust及AI应用知识分享」的Coder。

01

HTML/CSS 常见面试题汇总

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

02

Web 性能优化-页面重绘和回流（重排）

常见的优化网络请求的方法有：DNS Lookup，减少重定向，避免 JS、CSS 阻塞，并行请求，代码压缩，缓存，按需加载，前端模块化…

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭