electron如何解决白屏问题

html-css010

electron如何解决白屏问题,第1张

electron白屏问题主要出现在两方面:

1、electron未加载完毕html,electron自身产生的白色背景;

2、electron加载html,html处于加载渲染过程中产生的短暂白屏;

1中可设置electron自带的transparent属性进行处理。

2中问题可通过提高首屏渲染速度

但是,1中可能会由于设置了 app.allowRendererProcessReuse = false导致设置背景透明失效。

2中的首屏渲染也只能无限接近,虽然可以在渲染前通过 设置html loading ,避免白屏的问题,但是在一些业务场景中是 不符合业务需求 的。

步骤:

1、预加载browserWindow,设置show:false。

因为该窗口只是隐藏,并不是关闭,所以内部的html地址仍然会加载执行。

2、但是,在mac的多桌面、mac与windows的多扩展屏会出现,show窗口的时候。

窗口只会出现在第一次创建的窗口的桌面;

如果之前拖动过窗口,窗口再次被show时,只会出现在最后拖动完成的位置。

故此,可以采用以下的方法处理问题。

若是通过点击或者触发某个窗口(已经存在)的位置来唤起。

1)通过设置父子窗口来完成。

2)异步解除父子窗口关系。

先从网络方面检测,再从js和css方面检测。

从网络方面检测:先确保网络连接顺畅、再检查 URL 地址是否错误、打开 控制台 查看是否有报错信息、查看接口访问 是否有请求、查看路由是否有path错误,导致加载了不存在的页面。

从js和css方面检测:排除了网络问题以后,如果还是白屏,那一般都是css和js加载造成的;css和js会造成阻塞渲染。比如不正确的引入css和js,就会导致它们的加载速度过长,从而导致白屏现象。

正确的引入方式是:在 标签中引入css,因为在加载HTML前不先渲染css的话,整个页面会乱掉;在 标签之前、body 标签中html 内容的后面,引入js,因为浏览器加载script标签时,处理内部代码的顺序都是从上到下依次执行的,如果在html内容前就引入js的话,那么就会导致,在所有的代码处理完毕之前,会阻塞其他资源的加载;会导致页面的其他内容都无法显示,因此如果不规范引入js的话,会对页面的其他内容带来影响。