“🌟🌟🌟🌟🌟“

“Taste: Spicy tripe“

“Cooking time: 10min“

Github github.com/Geekhyt, welcome to the canteen, if you think the food is delicious, a Star is a great encouragement to the canteen owner.

eggs

Last night when I went home, I saw Peter posted a message on wechat moments. Tencent cloud game platform START was released in public test. He was playing LOL on MAC. After all, LOL is the youth of my generation. I don’t have much time to play it after work.

Choose EZ wave wave ~ (talent did not have time to change)


I easily won the first game in 20 minutes (after all, S2 is an old player and matches the regular operation of the game). The overall experience is still very good. There is basically no lag under home Internet speed, except the mouse is a little uncomfortable when adjusting the camera view in window mode. (Please turn off the trigger corner if you want to experience it.)

The “cloud” model of cloud gaming platform completely liberates the imagination of “cross-platform”. With the arrival of 5G, could it be the best solution to cross-platform in the future? What new challenges await us front-end engineers? Welcome students to leave a message to discuss ~

Back to the book, I’m currently working on the Electron project, and Electron has made a lot of efforts to achieve cross-platform. (Contrast that with cloud-based gaming platforms.) Let’s take a look.

Browser Architecture Evolution


Let’s start with the evolution of browser architectures. Increasingly complex business requirements push browser architectures to evolve and iterate.

Take Chrome, our favorite, for example. From single-process architecture before 2007 to multi-process architecture now, the browser has become more stable, smoother, and more secure because of the architecture changes. The latest Chrome browser you can see now should include the following processes:

  • 1 main Browser process
  • One GPU process
  • One NetWork process
  • Multiple renderers (running in sandbox mode)
  • Multiple plug-in processes

Software engineering, however, has no silver bullet. The architecture of the browser has also become more complex and more resource-intensive.

How to strike a balance between resource footprint and complex architecture becomes a challenge.

“Kids make choices. I want both my fish and my PAWS!“

The Chrome team designed the new Chrome Architecture in 2016 using the idea of "Services Oriented Architecture" (SOA).

The Chrome team has reconstituted modules into separate services that run in separate processes and must be accessed using defined interfaces that communicate via IPC. Such an architecture is undoubtedly more cohesive, loosely coupled, and easy to maintain and extend.

Chromium architecture


Chromium is the open source version of Chrome, which is also a browser.

  • The main processRenderProcessHostAnd the rendering processRenderProcessDesigned to handleIPCEvents.
  • Renderer proceduralRenderView: This is where our page is basedWebkitTypography shows it.
  • ResourceDispatcherHandles resource requests and passes when the page needs to request resourcesResourceDispatcherCreate a requestIDForwarded to theIPCIn theBrowserProcess and return.

Electron architecture


  • Exposed in various processesNative API (Main Native API, Renderer Native API)
  • The introduction ofNode.js

This way, Chromium and Node.js can do fun things in Electron!

But before we do that, there’s one more difficulty: how to integrate Node.js and Chromiums?

Node.js event loops are based on Libuv, but Chromium is based on Message_pump.

There are two main ways to solve this problem:

  • 1. TheChromiumIntegrated into theNode.js:libuvimplementationmessage_pump.
  • 2.Node.jsIntegrated into theChromium 。

The first solution, Nw.js, does just that. Electron did the same thing in the early stage, and found that it was easy to implement in the rendering process, but difficult to implement in the main process, because the GUI implementation of each system is different. Mac is NSRunLoop, Linux is Glib. And some boundary cases are tricky to deal with.

Later, the author took a different approach and tried again, polling GUI events with a timer at a small interval, and found that GUI responses were very slow and the CPU was out of order.

It wasn’t until libuv introduced the concept of backend_fd, the libuv equivalent of polling the file descriptor for an event, that it was possible to poll Backend_FD to get a new libuv event. The second idea is to integrate Node.js into Chromium.

If you want to know more, you can also check out the author’s answer below

  • What’s it like to maintain a large open source project?

summary

How to integrate Node.js into Chromium:

Electron starts a new security thread to poll backend_fd, and when node.js has a new event, it forwards it to the Chromium event loop via PostTask, thus realizing the Electron event fusion.

reference

  • Working Principle and Practice of browser li Bing
  • The Electron development actual combat deng Yaolong

❤️ Love triple punch

1. If you think the food and drinks in the canteen are ok with you, please give me a thumbs-up. Your thumbs-up is my biggest motivation.

2. Pay attention to the front canteen of public account, “eat every meal!”

3. Like, comment, forward === urge more!