在前端开发中，CSS Reset 是一种常见的技术，用于重置浏览器默认样式，以达到更好的跨浏览器兼容性。然而，CSS Reset 也可能引起网页闪烁问题，本文将介绍该问题的原因及解决方法。
问题原因
当使用 CSS Reset 时，所有元素的样式都会被重置为默认值，然后再通过 CSS 样式来设置所需的样式。在网页加载时，样式表需要经过加载和解析，这个过程需要时间，当用户在浏览器中打开网页时，可能出现Flash of Unstyled Content (FOUC)现象，即网页先呈现出原始的浏览器样式，然后在几秒钟后再呈现出应用了许多 CSS 样式的网页样式，从而引起网页闪烁，影响用户体验。
解决方法
1. 延迟加载样式表
为了避免网页闪烁，可以使用 JavaScript 将样式表延迟加载，确保样式加载完成后再瞬间呈现整个网页。这种方法需要在页面头部添加一段 JavaScript 代码，将样式表设置为异步加载。
<link rel="stylesheet" href="style.css" media="none" onload="if(media!='all')media='all'">
将该代码放在 head 标签内，可以让样式表在文档加载完成后异步加载，避免了样式表下载时间过长，从而实现网页不闪烁的效果。
2. 预加载样式表
预加载样式表可以避免样式下载的时间延迟，当文档加载完成，样式表会立即从缓存中获取，从而避免了网页闪烁的问题。
<link rel="preload" href="style.css" as="style">
参照上面的代码，在 head 标签中添加该段代码，就可以预加载样式表，避免网页闪烁。
3. 使用 SCSS 等 CSS 预处理器
CSS 预处理器可以帮助开发者编写更加模块化，可维护的样式代码，同时避免了 CSS Reset 引起的网页闪烁问题。变量、混合等功能，都使得开发者可以更加自由地管理样式代码，同时也更加便于维护和管理，从而减少网页闪烁。
不过，需要注意的是，不同的预处理器实现方式可能不同，需要根据自己所使用的工具来配置。
总结
本文介绍了 CSS Reset 引起的网页闪烁问题，并提供了三种解决方法，分别是延迟加载样式表、预加载样式表和使用 CSS 预处理器。在开发过程中需要根据实际情况来选择解决方法，以达到最佳的解决效果，避免网页闪烁，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651ecc4295b1f8cacd678486