Skip to main content

首屏加载

首屏加载时间是影响用户体验的首要因素,当项目初始化的东西越来越多势必会让首屏加载等待好久,电脑配置低加上网速慢可能要达到 30 秒~1 分钟,这时用户启动软件就会产生疑问:

  • 为什么其他软件启动很快,只有这个软件启动慢。
  • 其他软件启动只需要 3 秒,这个软件启动需要十几秒,还以为启动不了呢。
  • 软件启动这么慢,用户的情绪也会有波动,因为主流软件的启动速度一定是有优化的,根据统计尤其是一些购物网站,加载时间和用户流失量成正比。

基于以上我们必须重视这个问题:

以下是我经过实践经验得出的方案:

    1. 在主窗口之前添加启动页(许多软件也是这个套路,添加了之后相当一部分客户会愿意多一点时间等待),也就是所有程序或插件启动前先加载一个 启动中... 页面,将其放在最前并监听它已经可见,可见之后我们再开始加载必要的初始化程序,接着载入主窗口,载入主窗口的代码中关闭启动页。随着后续的必要业务增加,启动页也可能担任检测更新的任务。
    1. 对代码整体载入顺序进行思考,尤其是对细节的处理和协调。
    1. 根据日志的打印时间计算每一个执行步骤需要的时间,能异步就不要同步,尽量懒加载。
    1. 页面缓存:Electron 使用的谷歌内核本身就有缓存机制,我的经验是大概 12 小时会刷新一次缓存,所以我们还是要利用这个文件缓存机制,不要每次启动都主动清理一遍缓存,这虽然让网页始终保持最新,但是加载速度也确实慢,我们可以设置 loadURL("url?时间戳") 让首页保持最新即可,至于首页内引入文件是否是最新还需要脚手架配合将引入文件路径添加时间戳。