The secret of electron architecture


The secret of electron architecture

Taste: spicy fried tripe

Cooking time: 10min

This article has been included in GitHub, a warehouse with the same name in the front-end to the canteen. If you think the food and wine are delicious, a star is a great encouragement to the canteen owner.

Colored eggs

Last night when I moved the brick home, I saw Peter send a circle of friends, and Tencent cloud game platform start released the public beta. He was playing lol with Mac. I followed closely and experienced a wave. After all, lol is the youth of our generation. I seldom have time to play after work. After using mac, the previous game books have been kept at the bottom of the box for a long time.

Choose an EZ wave ~

The secret of electron architecture

The first victory is easy in 20 minutes (after all, S2 old players, match the regular operation), the comprehensive experience is still very good, the home network speed can not feel the delay, except that the mouse is a little uncomfortable when adjusting the view angle in the window mode. (students who want to experience should turn off the trigger angle first.)

The “cloud” mode of cloud game platform completely liberates the imagination of “cross platform”. With the arrival of 5g, is it possible that it is the best solution to cross platform in the future? For our front-end engineers, what new challenges are waiting for us? Students are welcome to leave a message to discuss ~

The book goes back to the main story. Recently, he is working on the project of electron. Electron has made a lot of efforts to realize cross platform. (it’s just in contrast to the cloud game platform.) Let’s have a look. ​

Browser architecture evolution

The secret of electron architecture

Let’s start with the evolution of browser architecture. The increasingly complex business requirements push the continuous evolution and iteration of browser architecture.

Take our favoriteChromeFor example, from the single process architecture before 2007 to the current multi process architecture, browsers have changed their architecture,
Become more stable, smoother and safer. The latest you can see right nowChromeThe browser should include the following processes:

  • 1 browser main process
  • 1 GPU process
  • 1 network process
  • Multiple rendering processes (running in sandbox mode)
  • Multiple plug-in processes

The secret of electron architecture

However, software engineering has no silver bullet. With the adjustment of browser architecture, it becomes more complex, and also has higher resource consumption.

How to find a balance between resource occupation and complex architecture has become a difficult problem.

Only children make choices, I want fish and bear’s paws!

In 2016, the chrome team designed a new chrome architecture using the idea of "services oriented architecture" (SOA).

ChromeThe team reconstitutes modules into independent services(Service)The service runs in an independent process. If you want to access it, you must use a defined interfaceIPCTo communicate. Such an architecture is undoubtedly more cohesive, loosely coupled, easy to maintain and expand.

Chromium architecture

The secret of electron architecture

ChromiumyesChromeOpen source version of is also a browser.

  • Main processRenderProcessHostAnd rendering processRenderProcessSpecial treatmentIPCevent.
  • Of the rendering processRenderView: our page is based onWebkitIt’s displayed by typesetting.
  • ResourceDispatcherProcess resource requests. When the page needs to request resources, theResourceDispatcher, create a requestIDForward toIPC, inBrowserProcess and then return.

Electron architecture

The secret of electron architecture

  • Exposed in various processesNative API (Main Native API、Renderer Native API)
  • introduceNode.js

So, in theElectronYou can use theChromiumandNode.jsDo something fun!

However, before that, there is still a difficulty to be solved: how toNode.jsandChromiumsIntegration?

Node.jsEvent loop based onlibuv, butChromiumbe based onmessage_pump

There are two main ways to solve this problem

  • 1ChromiumIntegration intoNode.js: withlibuvrealizationmessage_pump
  • 2Node.jsIntegration intoChromium

The first option,NW.jsThat’s what it does.ElectronIn the early stage, it was also tried in this way. The results showed that it was easy to implement in the rendering process, but it was very troublesome in the main process, because of the various systemsGUIThe implementation is different,MacyesNSRunLoopLinuxyesglibIt is not only a huge amount of work, but also very difficult to deal with some boundary conditions.

Later, the author tried again, polling with a small interval timerGUIEvent, discoveryGUIVery slow response,CPUIt’s also a big watch.

Until laterlibuvIntroducedbackend_fdIs equivalent tolibuvThe file descriptor of the event is polled so that thebackend_fdTo get itlibuvIt’s a new event. That is to say, the second way of thinking is toNode.jsIntegration intoChromium

If you want to know more, you can also go to the following author’s Zhihu answer ~

The secret of electron architecture


takeNode.jsIntegration intoChromiumPrinciple in:

ElectronA new safe thread is started to pollbackend_fd, whenNode.jsThere is a new event after passingPostTaskForward toChromiumIn the event loop of theElectronEvent fusion.

reference resources

  • Working principle and practice of browser Li Bing
  • Deng Yaolong

❤️ Three strikes of love

1. If you think the food and wine in the canteen are still acceptable, please give me a complimentFabulousIt’s my biggest motivation.

2. pay attention to the front desk of the official account.Eat every meal!

3. Like, comment, forward = = = urge to change!

The secret of electron architecture

Recommended Today

Comparison and analysis of Py = > redis and python operation redis syntax

preface R: For redis cli P: Redis for Python get ready pip install redis pool = redis.ConnectionPool(host=’′, port=6379, db=1) redis = redis.Redis(connection_pool=pool) Redis. All commands I have omitted all the following commands. If there are conflicts with Python built-in functions, I will add redis Global command Dbsize (number of returned keys) R: dbsize P: print(redis.dbsize()) […]