Nuxt2 渲染时html比css加载快，导致闪屏/CSS样式迟滞/抖动问题记录
这个问题通常是因为在Web应用程序中，HTML文档被首先加载和解析，随后CSS样式开始下载并应用于页面。在这个过程中，由于CSS样式的下载和处理不如HTML快，页面可能会出现不应用样式的初始视图，然后随着样式表的加载和应用而迅速变得更加漂亮，这个过程被称为“闪屏”或“抖动”。
为了解决这个问题，可以采取以下几种策略：
- 使用critical CSS：提取关键的CSS样式，并将其内联到HTML中，在
<head>标签内。这可以通过工具如critical或purgecss来实现。 - 使用预加载：通过meta标签预告样式表将来 be loaded，并且优先级高于其他资源。
- 使用预渲染：使用Nuxt.js的预渲染特性，可以在构建时生成静态HTML文件，这样用户访问时就不会遇到初始的“闪屏”问题。
- 使用服务端渲染(SSR)：除了预渲染，还可以使用服务端渲染，这样CSS和HTML都是在服务器端生成好后再发送给客户端。
- 优化CSS加载性能：比如使用webpack的
extract-text-webpack-plugin将CSS从JS中提取，或者使用optimize-css-assets-webpack-plugin进一步优化。 - 使用客户端 hydration：确保在客户端渲染的HTML和最初的SSR内容一致，避免不一致的渲染。
具体实施时，可以根据项目的具体情况选择适合的策略。
评论已关闭