2023年6月21日发(作者：)

Vue页⾯偶现样式错乱问题刷新就⼜好了解决思路遇到这个挺有趣的问题，就花时间整理下解决思路问题前端框架vue，某页⾯在⾸次进⼊时样式错乱，刷新后就好了，并且是偶现的。解决思路第⼀步⾸先排查css是否是样式问题 ，⽐如宽度的百分⽐设置有问题（上述问题是这个原因的可能不⼤）第⼆步在排查完样式没问题之后，就从页⾯加载顺序开始排查，⼀般页⾯都是先加载然后再加载页⾯,CSS跟DOM是同步加载的，但是如果引⽤外部样式或者脚本的话就会使异步加载，⽽⼀般情况我们为了⽅便都会把页⾯CSS单独引⽤，这个时候CSS与DOM就会异步加载也就是说在加载外部⽂件的时候，不会阻塞到后⾯dom等的解析，外部脚本执⾏没有async、defer的属性时，会被外部样式阻塞，也就是说要等到外部css加载完才会执⾏外部脚本，添加async或defer就不会受到阻塞这个知道后就去看我们的代码CSS是否是引⽤过来的，如果是，就看是否在加载CSS的时候出的错第三步如果是第⼆步出现的问题，就需要复现了，偶现的话我们先从⽹络下⼿，是否是⽹络不稳定，浮现⽅法打开控制台，清空缓存，然后将浏览器的⽹络请求速度调慢，看问题是否能够复现解决⽅案如果复现成功，就说明实在上述第⼆步时出的问题，出现这种可能的两种可能：1，⽹络波动导致请求CSS时请求之请求到了部分样式，第⼀次没渲染彻底，但是第⼆次的刷新⼤部分读了浏览器缓存，所以刷新之后好了**解决办法：**让⽹络保持稳定2，引⼊的CSS太⼤，再⽹络稳定的情况下第⼀次请求因为⽂件太⼤没加载完全，导致页⾯⾸次样式错误**解决办法：**定位到对应的CSS⽂件进⾏优化

2023年6月21日发(作者：)

Vue页⾯偶现样式错乱问题刷新就⼜好了解决思路遇到这个挺有趣的问题，就花时间整理下解决思路问题前端框架vue，某页⾯在⾸次进⼊时样式错乱，刷新后就好了，并且是偶现的。解决思路第⼀步⾸先排查css是否是样式问题 ，⽐如宽度的百分⽐设置有问题（上述问题是这个原因的可能不⼤）第⼆步在排查完样式没问题之后，就从页⾯加载顺序开始排查，⼀般页⾯都是先加载然后再加载页⾯,CSS跟DOM是同步加载的，但是如果引⽤外部样式或者脚本的话就会使异步加载，⽽⼀般情况我们为了⽅便都会把页⾯CSS单独引⽤，这个时候CSS与DOM就会异步加载也就是说在加载外部⽂件的时候，不会阻塞到后⾯dom等的解析，外部脚本执⾏没有async、defer的属性时，会被外部样式阻塞，也就是说要等到外部css加载完才会执⾏外部脚本，添加async或defer就不会受到阻塞这个知道后就去看我们的代码CSS是否是引⽤过来的，如果是，就看是否在加载CSS的时候出的错第三步如果是第⼆步出现的问题，就需要复现了，偶现的话我们先从⽹络下⼿，是否是⽹络不稳定，浮现⽅法打开控制台，清空缓存，然后将浏览器的⽹络请求速度调慢，看问题是否能够复现解决⽅案如果复现成功，就说明实在上述第⼆步时出的问题，出现这种可能的两种可能：1，⽹络波动导致请求CSS时请求之请求到了部分样式，第⼀次没渲染彻底，但是第⼆次的刷新⼤部分读了浏览器缓存，所以刷新之后好了**解决办法：**让⽹络保持稳定2，引⼊的CSS太⼤，再⽹络稳定的情况下第⼀次请求因为⽂件太⼤没加载完全，导致页⾯⾸次样式错误**解决办法：**定位到对应的CSS⽂件进⾏优化