遇到这个挺有趣的问题，就花时间整理下解决思路
问题
前端框架vue，某页面在首次进入时样式错乱，刷新后就好了，并且是偶现的。
解决思路
第一步
首先排查css是否是样式问题 ，比如宽度的百分比设置有问题（上述问题是这个原因的可能不大）
第二步
在排查完样式没问题之后，就从页面加载顺序开始排查，一般页面都是先加载<head>然后再加载页面<body>,CSS跟DOM是同步加载的，但是如果引用外部样式或者脚本的话就会使异步加载，而一般情况我们为了方便都会把页面CSS单独引用，这个时候CSS与DOM就会异步加载
也就是说在加载外部文件的时候，不会阻塞到后面dom等的解析，外部脚本执行没有async、defer的属性时，会被外部样式阻塞，也就是说要等到外部css加载完才会执行外部脚本，添加async或defer就不会受到阻塞
这个知道后就去看我们的代码CSS是否是引用过来的，如果是，就看是否在加载CSS的时候出的错
第三步
如果是第二步出现的问题，就需要复现了，偶现的话我们先从网络下手，是否是网络不稳定，浮现方法打开控制台，清空缓存，然后将浏览器的网络请求速度调慢，看问题是否能够复现
解决方案
如果复现成功，就说明实在上述第二步时出的问题，出现这种可能的两种可能：
1，网络波动导致请求CSS时请求之请求到了部分样式，第一次没渲染彻底，但是第二次的刷新大部分读了浏览器缓存，所以刷新之后好了
**解决办法：**让网络保持稳定
2，引入的CSS太大，再网络稳定的情况下第一次请求因为文件太大没加载完全，导致页面首次样式错误
**解决办法：**定位到对应的CSS文件进行优化
5170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
