一、问题描述

有个项目使用的是electron+vue的开发方式,由于渲染进程加载过慢,所以启动时是先弹窗Loading页面提示正在加载中,待加载完成后在mounted()中发送指令到主进程来进行以下操作

1、关闭Loading进程
2、显示主渲染进程窗口

mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                $ipc.send('closeLoadingView')//关闭Loading进程,显示主渲染进程窗口
            }, 1000)//当时在这里加个延时是为了确保页面都显示出来了,问题就出自这里
        })
    }

之后发现这样会使主页面显示之后偶发出现空白,或者页面卡住不动的情况,然而通过鼠标操作发现,页面的按钮在鼠标经过时虽然没有hover的效果,但是鼠标会显示CSS的cursor: pointer;效果。当用鼠标拖动窗口大小时,页面就会恢复正常

二、个人推测

1、electron的渲染问题:当我把延时调为0时,此情况就会消失,推测是当主渲染进程窗口成功加载时,我没有第一时间显示出来,导致electron不对这个窗口进行渲染了。估计是为了防止性能有过多的损耗,而将那些不显示的窗口停止渲染。但这其实也并不能解释延时之后再显示渲染进程窗口会出现此种情况,因为既然已经显示窗口,也应该要恢复渲染才对,所以这也解释不通(除非有bug)。
2、没时间详细分析了,暂时处理方法是把延时取消就行了,所以处理方式就是第一时间显示加载完成的窗口(如有错误请在评论指出谢谢)

Logo

前往低代码交流专区

更多推荐