前端 vue单页面应用使用了iframe来切换首页与目录页,在IE浏览器中切换的时候,页面会闪烁一下。
从目录到首页,有个fadein(),首页会先闪一下再显示出来,闪的时候首页是半透明的状态。
从首页到目录页,目录有个高亮状态,是js逻辑中遍历内存读取的标志,然后对应目录赋css样式。目录页先闪一下,没有半透明,而且是把前边不相干的目录也给高亮了。然后再正确显示。有个1~2秒的间隔。
这个闪烁在页面刷新后不会出现。是多点击几次后,越卡越出现。
谷歌几乎没有,但我发现把network调为slow 3g,谷歌浏览器就也会出现这俩问题了。似乎与网速有关。但从首页到目录页,并没有请求啊。目录页到首页倒是有请求,总时长为1s。
网上百度了半天也不知道具体是啥导致闪烁。找不到病根,也无从下手。有伙伴知道怎么解决吗?
该回答引用GPTᴼᴾᴱᴺᴬᴵ
在 IE 中使用 iframe 进行页面切换时出现闪烁问题可能与浏览器的渲染机制有关。IE 中的渲染机制比较老旧,可能会出现页面闪烁等问题。以下是一些可能的解决方案:
尝试在 CSS 中使用 will-change 属性,让浏览器知道哪些元素会被改变,从而提前进行优化。
尝试在页面切换时使用 CSS 动画,通过过渡动画来减少页面切换时的闪烁。
尝试使用异步加载,将页面分成多个部分,只在需要时才加载对应的部分,从而减少页面切换时的闪烁。
考虑使用其他的前端框架,如 React、Angular 等,这些框架对于浏览器的兼容性和渲染机制做了更好的优化。
另外,建议尽量避免使用 iframe 进行页面切换,可以考虑使用路由进行页面切换,或者使用单页应用框架,如 Vue、React 等,从而提高用户体验。