Electronのpreload、executeJavaScriptや、各種イベントの発生順序を調べてみた

Electronにはウィンドウオープン時の[preload](http://electron.atom.io/docs/v0.36.5/api/browser-window/#new-browserwindowoptions)オプションとか`executeJavaScript`関数とかの、Javascriptを埋め込んで実行する便利機能がありますが、他のイベントと併せてこいつらはどういう順番で実行されるの？ と混乱してきたので実験してみました。

#テストプログラム
- main.jsからindex.htmlを開く
- index.htmlのpreloadオプションにpreload_index.jsを指定
- index.html内に[webviewタグ](http://electron.atom.io/docs/v0.36.5/api/web-view-tag/)でwebview.htmlを読み込む
- webview.htmlのpreloadにpreload_webview.jsを指定

イベントが発生したら、[ipc](http://electron.atom.io/docs/v0.36.5/api/ipc-renderer)でメインプロセスにメッセージを送信し、それを表示しています。
イベントの発生順にconsole.logにメッセージが表示されるはずです。

```js:main.js
'use strict';
const {app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');

let mainWindow = null;
app.on('window-all-closed', ()=>app.quit());

let webContentJs = `
let ipcRender = require('electron').ipcRenderer;
ipcRender.send('ipc', 'WebContents.executeJavaScriptで実行されたJavascript');`;

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.resolve(path.join(__dirname, 'preload_index.js')),
        },
    });
    mainWindow.loadURL(`file://${__dirname}/index.html`);

    mainWindow.webContents.executeJavaScript(webContentJs);
    mainWindow.webContents.on('did-finish-load', ()=> console.log('WebContents.did-finish-loadイベント'));
    mainWindow.webContents.on('did-start-loading', ()=> console.log('WebContents.did-start-loadingイベント'));
    mainWindow.webContents.on('dom-ready', ()=> console.log('WebContents.dom-readyイベント'));

    ipcMain.on('ipc', (event, arg)=> console.log(arg));

    mainWindow.on('closed', ()=> mainWindow = null);
    mainWindow.webContents.openDevTools({mode:'undocked'});
});
```
```html:index.html
<!DOCTYPE html>
<!-- メインウィンドウ-->
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <script>
            const {ipcRenderer} = require('electron');
            ipcRenderer.send('ipc', 'index.html内の<script>タグ');
            window.addEventListener('load', function() {
                ipcRenderer.send('ipc', 'index.htmlのwindow.onload');
            });
        </script>
    </head>
    <body>
        てすと<br>
        <webview class="wv" src="webview.html" preload="./preload_webview.js"></webview>
    </body>
</html>
```
```js:preload_index.js
//" a script that will be loaded before other scripts run in the page."
const {ipcRenderer} = require('electron');
window.addEventListener('load', ()=> ipcRenderer.send('ipc', 'index.htmlのpreloadのwindow.onload'));
ipcRenderer.send('ipc', 'index.htmlのpreload');
```
```html:webview.html
<!DOCTYPE html>
<!--index.html内に読み込まれるwebview-->
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>webview</title>
</head>
<body>
    webview<br>
</body>
</html>
```
```js:preload_webview.js
const {ipcRenderer} = require('electron');
window.addEventListener('load', ()=> ipcRenderer.send('ipc', 'webview.htmlのpreloadのwindow.onload'));
ipcRenderer.send('ipc', 'webview.htmlのpreload');
```
#実行結果
こんな感じになりました。

```
index.htmlのpreload
index.html内の<script>タグ
WebContents.dom-readyイベント
index.htmlのpreloadのwindow.onload
index.htmlのwindow.onload
WebContents.did-finish-loadイベント
WebContents.executeJavaScriptで実行されたJavascript
webview.htmlのpreload
webview.htmlのpreloadのwindow.onload
```
WebContents.did-start-loadingは発生しないんですね。
リロードしてみました。

```
WebContents.did-start-loadingイベント
index.htmlのpreload
index.html内の<script>タグ
WebContents.dom-readyイベント
index.htmlのpreloadのwindow.onload
index.htmlのwindow.onload
WebContents.did-finish-loadイベント
webview.htmlのpreload
webview.htmlのpreloadのwindow.onload
```

webviewのpreloadは、WebContents.did-finish-loadingより先に実行されるかと思っていました。
しかもリロード時は、executeJavascriptは実行されないんですね。

実験してみるものですね。