react使用antd样式无法先加载的问题，每次都是先加载内容，然后才会渲染样式请问如何先渲染样式？

Question

首先会出现这个页面

然后才会正常显示样式

请问如何才能不出现第一个页面，直接第二个页面，正确显示出来

楼下的大哥，我这是react中的antd，不是引入css和js文件的

Answer 1

由于页面加载顺序，js 会阻塞 html 继续加载的
如果你 .css 文件放在了 .js 后面，的确会有这个问题
所以经常看到建议说，css 放到 head 里面，js 放到 body 最后

把页面里 css 的引用放到最前面去好了

Answer 2

这个问题看着很像是 js 执行的比 css 快的.
一般正常的情况下, css 会阻塞页面的渲染,直到 css 加载完成,才会渲染出来,就算把 css 放到最后面也一样.
也有特殊的情况,比如用了 css 动态加载,或者 css 用了异步加载之类的.
你可以打开chrome的开发者工具.强制刷新,然后在Network里看看各个资源的加载顺序和时间.
或者在Performance选项卡中记录一遍从加载开始到最后加载完成的所有细节,查找原因.
比较的简单的处理,就是加一个loading页,判断 css 加载完成,然后取消loading页.
或者查找真正的原因,解决它,这个没有看代码不好判断,只能靠你自己了.
或者可以把你的代码在codesandbox上重现一遍,然后把链接发出来看看.注意如果有隐私或者不能公开的要替换掉.

Answer 3

请问解决了吗 是怎样解决的 能分享下吗

Answer 4

可以在html页面通过cdn方式引入antd.css样式文件