對(duì)于 Web 開(kāi)發(fā)者使用 Electron 構(gòu)建桌面應(yīng)用程序時(shí),經(jīng)常會(huì)遇到如上圖所示的一個(gè)問(wèn)題 —— 窗口加載過(guò)程中長(zhǎng)時(shí)間白屏。在應(yīng)用窗口創(chuàng)建完成到頁(yè)面加載出來(lái)的這段時(shí)間里，出現(xiàn)了長(zhǎng)時(shí)間的白屏，這個(gè)問(wèn)題對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)是一個(gè)老生常談的問(wèn)題,純 Web 端可能就是異步加載、靜態(tài)資源壓縮、CDN 以及骨架屏等等優(yōu)化方案,但是如果是開(kāi)發(fā) Electron 應(yīng)用,場(chǎng)景又有些許不同,因此我們也不能完全按照通用的前端解決白屏的方案進(jìn)行處理,本文就來(lái)探索基于 Electron 場(chǎng)景下啟動(dòng)白屏的解決方案。

問(wèn)題原因分析

1. Electron 主進(jìn)程加載時(shí)間過(guò)長(zhǎng)

Electron 應(yīng)用在啟動(dòng)時(shí)，需要先加載主進(jìn)程，然后由主進(jìn)程去創(chuàng)建瀏覽器窗口和加載頁(yè)面。如果主進(jìn)程加載時(shí)間過(guò)長(zhǎng),就會(huì)導(dǎo)致應(yīng)用一直停留在空白窗口,出現(xiàn)白屏。

主進(jìn)程加載時(shí)間長(zhǎng)的原因可以有:

• 初始化邏輯復(fù)雜,比如加載大量數(shù)據(jù)、執(zhí)行計(jì)算任務(wù)等
• 主進(jìn)程依賴的模塊加載時(shí)間長(zhǎng),例如 Native 模塊編譯耗時(shí)
• 主進(jìn)程代碼進(jìn)行了大量同步 I/O 操作,阻塞了事件循環(huán)

2. Web 部分性能優(yōu)化不足

瀏覽器窗口加載 HTML、JavaScript、CSS 等靜態(tài)資源是一個(gè)漸進(jìn)的過(guò)程，如果資源體積過(guò)大,加載時(shí)間過(guò)長(zhǎng),在加載過(guò)程中就會(huì)短暫出現(xiàn)白屏，這一點(diǎn)其實(shí)就是我們常說(shuō)的前端首屏加載時(shí)間過(guò)長(zhǎng)的問(wèn)題。導(dǎo)致 Web 加載時(shí)間過(guò)長(zhǎng)的原因可以是:

• 頁(yè)面體積大,如加載過(guò)多圖片、視頻等大資源
• 沒(méi)有代碼拆分,一次加載全部 Bundles
• 缺乏緩存機(jī)制,資源無(wú)法命中緩存
• 主線程運(yùn)算量大,頻繁阻塞渲染

解決方案

1. 常規(guī) Web 端性能優(yōu)化

Web 端加載渲染過(guò)程中的白屏,可以采用常規(guī)前端的性能優(yōu)化手段:

• 代碼拆分,異步加載,避免大包導(dǎo)致的加載時(shí)間過(guò)長(zhǎng)
• 靜態(tài)資源壓縮合并、CDN 加速,減少資源加載時(shí)間
• 使用骨架屏技術(shù),先提供頁(yè)面骨架,優(yōu)化用戶體驗(yàn)
• 減少主線程工作量,比如使用 Web Worker 進(jìn)行復(fù)雜計(jì)算
• 避免頻繁布局重排,優(yōu)化 DOM 操作

以上優(yōu)化可以明顯減少 HTML 和資源加載渲染的時(shí)，縮短白屏現(xiàn)象。還是那句話，純 Web 端的性能優(yōu)化對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)老生常談，我這邊不做詳細(xì)的贅述，不提供實(shí)際代碼，開(kāi)發(fā)者可以參考其他大佬寫的性能優(yōu)化文章，本文主要針對(duì)的是 Electron 啟動(dòng)白屏過(guò)長(zhǎng)的問(wèn)題，因?yàn)轶w驗(yàn)下來(lái) Electron 白屏的本質(zhì)問(wèn)題還是要通過(guò) Electron 自身來(lái)解決~

2. 控制 Electron 主進(jìn)程加載時(shí)機(jī)

Electron 啟動(dòng)長(zhǎng)時(shí)間白屏的本質(zhì)原因，前面特意強(qiáng)調(diào)了，解決方案還是得看 Electron 自身的加載時(shí)機(jī)，因?yàn)槲疫@邊將 Web 部分的代碼打包啟動(dòng)，白屏?xí)r間是非常短的，與上面動(dòng)圖里肉眼可見(jiàn)的白屏?xí)r間形成了鮮明的對(duì)比。所以為了解決這個(gè)問(wèn)題，我們還是要探尋 Electron 的加載時(shí)機(jī)，通過(guò)對(duì) Electron 的啟動(dòng)流程分析，我們發(fā)現(xiàn)：

• 如果在主進(jìn)程準(zhǔn)備就緒之前就創(chuàng)建并顯示瀏覽器窗口，由于此時(shí)渲染進(jìn)程和頁(yè)面還未開(kāi)始加載，窗口內(nèi)自然就是空白，因此需要確保在合適的時(shí)機(jī)創(chuàng)建窗口。

• 反之如果創(chuàng)建窗口后，又長(zhǎng)時(shí)間不調(diào)用 window.show() 顯示窗口，那么窗口會(huì)一直在后臺(tái)加載頁(yè)面，用戶也會(huì)看不到，從而出現(xiàn)白屏的效果。

因此我們可以通過(guò)控制主進(jìn)程的 Ready 事件時(shí)機(jī)以及 Window 窗口的加載時(shí)機(jī)來(lái)對(duì)這個(gè)問(wèn)題進(jìn)行優(yōu)化，同樣的關(guān)于加載時(shí)機(jī)我們也可以有兩種方案進(jìn)行優(yōu)化：

• 通過(guò)監(jiān)聽(tīng) BrowserWindow 上面的 ready-to-show 事件控制窗口顯示

// 解決白屏問(wèn)題
app.whenReady().then(() => {
  // 將創(chuàng)建窗口的代碼放在 `app.whenReady` 事件回調(diào)中，確保主進(jìn)程啟動(dòng)完成后再創(chuàng)建窗口
  const mainWindow = new BrowserWindow({ show:false });
  // 加載頁(yè)面
  mainWindow.loadURL('index.html');
  // 在 ready-to-show 事件中顯示窗口
  mainWindow..once("ready-to-show", () => {
     mainWindow.show();
  });
});

上述代碼通過(guò)操作 app.whenReady() 和 BrowserWindow 的 mainWindow.once('ready-to-show') 這幾個(gè) Electron 核心啟動(dòng) API，優(yōu)雅地處理了窗口隱藏 + 頁(yè)面加載 + 窗口顯示等問(wèn)題，詳細(xì)流程如下:

• 將創(chuàng)建窗口的代碼放在 app.whenReady 事件回調(diào)中，確保主進(jìn)程啟動(dòng)完成后再創(chuàng)建窗口

• 創(chuàng)建窗口的時(shí)候讓窗口隱藏不顯示{ show: false }，避免頁(yè)面沒(méi)加載完成導(dǎo)致的白屏

• 窗口加載頁(yè)面 win.loadURL，也就是說(shuō)窗口雖然隱藏了，但是不耽誤加載頁(yè)面

• 通過(guò) ready-to-show 事件來(lái)判斷窗口是否已經(jīng)準(zhǔn)備好，這個(gè)事件其實(shí)就代表頁(yè)面已經(jīng)加載完成了，因此此時(shí)調(diào)用 mainWidnow.show() 讓窗口顯示就解決了白屏的問(wèn)題

• 通過(guò)監(jiān)聽(tīng) BrowserWindow.webContents 上面的 did-finish-load 或者 dom-ready 事件來(lái)控制窗口顯示

app.whenReady().then(() => {
  // 將創(chuàng)建窗口的代碼放在 `app.whenReady` 事件回調(diào)中，確保主進(jìn)程啟動(dòng)完成后再創(chuàng)建窗口
  const mainWindow = new BrowserWindow({ show:false });
  // 加載頁(yè)面
  mainWindow.loadURL(indexPage);
  // 通過(guò) webContents 對(duì)應(yīng)事件來(lái)處理窗口顯示
  mainWindow.webContents.on("did-finish-load", () => {
     mainWindow.show();
  });
});

此方案與上述方案的唯一區(qū)別就是，第一個(gè)使用的是 BrowserWindow 的事件來(lái)處理，而此方案通過(guò)判斷 BrowserWindow.webContents 這個(gè)對(duì)象，這個(gè)對(duì)象是 Electron 中用來(lái)渲染以及控制 Web 頁(yè)面的，因此我們可以更直接的使用 did-finish-load 或者直接 dom-ready 這兩個(gè)事件來(lái)判斷頁(yè)面是否加載完成，這兩個(gè) API 的含義相信前端開(kāi)發(fā)者都不陌生，頁(yè)面加載完成以及 DOM Ready 都是前端的概念，通過(guò)這種方式也是可以解決啟動(dòng)白屏的。

最后解決完成的效果如下：

總結(jié)

從上圖來(lái)看最終的效果還是不錯(cuò)的，當(dāng)窗口出現(xiàn)的一瞬間頁(yè)面就直接加載完成了，不過(guò)細(xì)心的小伙伴應(yīng)該會(huì)發(fā)現(xiàn)，這個(gè)方案屬于偷梁換柱，給用戶的感覺(jué)是窗口出現(xiàn)的時(shí)候頁(yè)面就有內(nèi)容了，但是其實(shí)窗口沒(méi)出現(xiàn)的時(shí)間是有空檔期的，大概就是下面這個(gè)意思：

從上圖以及實(shí)際效果來(lái)看，其實(shí)我們的啟動(dòng)時(shí)間是沒(méi)有發(fā)生改變的，但是因?yàn)槎松蠎?yīng)用和我們純 Web 應(yīng)用的使用場(chǎng)景不同，它自身就是有應(yīng)用的啟動(dòng)時(shí)間，所以空檔期如果不長(zhǎng)，這個(gè)方案的體驗(yàn)還是可以的。但是如果前面的空檔期過(guò)長(zhǎng)，那么可能就是 Electron 啟動(dòng)的時(shí)候加載資源過(guò)多造成的了，就需要其他優(yōu)化方案了。由此也可以見(jiàn)得其實(shí)對(duì)于用戶體驗(yàn)來(lái)說(shuō)，可能我們的產(chǎn)品性能并不一定有提升，只要從場(chǎng)景出發(fā)從用戶角度去考慮問(wèn)題，其實(shí)就能提升整個(gè)應(yīng)用的體驗(yàn)。

以上就是Electron啟動(dòng)出現(xiàn)白屏問(wèn)題的解決方案的詳細(xì)內(nèi)容，更多關(guān)于Electron啟動(dòng)白屏的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論