侧边栏壁纸
  • 累计撰写 46 篇文章
  • 累计创建 38 个标签
  • 累计收到 2 条评论
隐藏侧边栏
VUE

Vue页面偶现样式错乱问题刷新就又好了解决思路

哒卟刘先生
2022-01-10 / 0 评论 / 0 点赞 / 94 阅读 / 683 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-01-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

遇到这个挺有趣的问题,就花时间整理下解决思路

问题

前端框架vue,某页面在首次进入时样式错乱,刷新后就好了,并且是偶现的。

解决思路

第一步

首先排查css是否是样式问题 ,比如宽度的百分比设置有问题(上述问题是这个原因的可能不大)

第二步

在排查完样式没问题之后,就从页面加载顺序开始排查,一般页面都是先加载<head>然后再加载页面<body>,CSS跟DOM是同步加载的,但是如果引用外部样式或者脚本的话就会使异步加载,而一般情况我们为了方便都会把页面CSS单独引用,这个时候CSS与DOM就会异步加载

也就是说在加载外部文件的时候,不会阻塞到后面dom等的解析,外部脚本执行没有async、defer的属性时,会被外部样式阻塞,也就是说要等到外部css加载完才会执行外部脚本,添加async或defer就不会受到阻塞

这个知道后就去看我们的代码CSS是否是引用过来的,如果是,就看是否在加载CSS的时候出的错

第三步

如果是第二步出现的问题,就需要复现了,偶现的话我们先从网络下手,是否是网络不稳定,浮现方法打开控制台,清空缓存,然后将浏览器的网络请求速度调慢,看问题是否能够复现
在这里插入图片描述

解决方案

如果复现成功,就说明实在上述第二步时出的问题,出现这种可能的两种可能:
1,网络波动导致请求CSS时请求之请求到了部分样式,第一次没渲染彻底,但是第二次的刷新大部分读了浏览器缓存,所以刷新之后好了
**解决办法:**让网络保持稳定
2,引入的CSS太大,再网络稳定的情况下第一次请求因为文件太大没加载完全,导致页面首次样式错误
**解决办法:**定位到对应的CSS文件进行优化

0

评论区