INKDROP APP CODE

Most native apps don't need to do that because they are already in binary code and your OS can run them without translating into a machine language.Īnd there is a technique in v8 to speed things up: V8 snapshots.

The most dependencies can't be deferred to be required as they are used immediately.Ĭhromium has to read and evaluate your JS and modules which needs long time than you'd imagine even when from local filesystem (1-2 secs in my app). Now my app launches 200-300ms faster, but still loads slow in the renderer process. Note that you must exclude those dependencies from your app bundle if you are using a module bundler like Webpack. It would improve your startup time without dropping the dependency. You can parse HTML with it like so:Įnter fullscreen mode Exit fullscreen mode It turned out that I don't need jsdom to parse HTML because there is DOMParser in Web API. If you found it heavy to load, you can use a small alternative library if exists. There are several ways to solve such issue.

I added it to parse HTML but found it is a huge library and it requires several hundreds milliseconds to load. That's because it was loading jsdom in the main process on launch. My app main window now shows up a little bit faster than the old version. The first thing you can do to avoid the big loading time is to defer calling require() for your dependencies until they're necessary. If you have a new project, you have to carefully choose libraries for performance. It seems to be difficult to drop those dependencies for the sake of the launch speed. In my case, my app has an enormous number of dependencies in order to provide its plug-in capability, extensible markdown editor and renderer, and so on. How long it takes depends on how many modules/libraries your app depends. You should see requiring modules is taking long time in the timeline. Press Cmd-E or the red dot record button to start capturing runtime performance, then reload the app.Īnd you will see a timeline something like this:

See also: Get Started With Analyzing Runtime Performance | Chrome DevTools.

You can inspect how your app bundle is being loaded in Developer Tools' performance analyzer. The biggest bottleneck in app launch is obviously the process to load JavaScript. So, why do Electron apps tend to start up slowly?

Don't call require() until you need (300ms improved).

I guess there are a lot of developers struggling to solve the same issue, so I'd like to share how I've done it. It's currently in beta and the users told me they are happy with the improved launch speed. You can feel it's quite faster than the previous version.Īs you can see above, the app main window shows up a little quicker, and loading the app bundle in the browser window finishes also quickly. Take a look at the following comparison screencast: I'd say '1,000msecs faster' instead of just '1sec faster' because it is a significant improvement and I've worked very hard for it! The app's TTI (Time to Interactive) has been boosted from 4 seconds to 3 seconds on my mac. My app encountered this issue as well, as I've got complaints about the slow launch speed from some users.īut I'm extremely happy that I accomplished to solve it. On the other side, people often mention about the Electron's downside - the app startup time tends to be slow. If you are a web developer, you can build desktop apps quickly.

It is basically a great framework because you can build desktop apps without learning native frameworks or languages but with JavaScript, HTML and CSS. This app is built on top of Electron, a framework that allows you to build a cross-platform desktop app based on NodeJS and Chromium (browser). Hi, I'm Takuya, an indie developer building a Markdown note-taking app called Inkdrop.

Inkdrop app