Browser Series – Browser kernel

Introduction to the

The most important or core part of the browser.

There are usually “Rendering Engine”, “Layout Engine”, “Browser Engine” and other terms.

The browser kernel determines how the browser displays the content and formatting of the page

Mainly responsible for the interpretation, markup, sorting of web page syntax (HTML, JS, CSS), and send the typeset to the output device (monitor, printer, etc.).

Different browsers have different implementations of the kernel, resulting in different interpretations of the syntax for writing a web page. As a result, the same page may render differently in browsers with different cores, which raises a common “browser compatibility issue”.

Common Browser kernels

Here is no more than the development of the kernel, the reader can be extended in the reference article at the end of the article

Browser name The kernel supplement
IE Trident It is mainly stored in the Internet Explorer browser of the Windows operating system
firefox Gecko Gecko is characterized by completely open code and, therefore, a high degree of development
Safari webkit Apple’s own kernel, including WebCore typesetting engine and JavaScriptCore parsing engine
chrome Chromium/Blink/webkit Blink is a branch of the WebCore component of the open source engine WebKit
Opera blink/Webkit/Presto Now follow Chrome’s lead and participate in development

Development timeline

Relationships between kernels

Browser kernel composition

At first, there was no clear distinction between rendering engine and JS engine. As the JS engine became more and more independent over time, the kernel tended to refer only to rendering engine

The core part is the “rendering engine”, which consists of the following threads:

1. GUI rendering thread

  • HTML Parser Parses HTML
  • CSS Parser parses Style data
  • Layout procedure, for each visible node geometry information
  • The Painting process iterates over the Render Tree, calling the UI interface to draw each node

JavaScript engine threads

Responsible for parsing Javascript scripts and running code

3. The timing trigger thread

The browser timing counter is not counted by the JavaScript engine because JavaScript engines are single-threaded. If the JavaScript engine is in the blocking thread state, it will affect the timing accuracy, so it is timed and triggered by a separate thread

4. The event triggers the thread

When an event is triggered, the thread adds the event to the end of the queue, waiting for the JavaScript engine to process it

5. Asynchronous HTTP request threads

The XMLHttpRequest request opens a new thread request in the browser, and when a state change is detected, if a callback function is set, the asynchronous thread generates a state change event and places it in the JavaScript engine’s processing queue

Mobile kernel

Mainly include:

  • Webkit: built-in browser on IOS, before Android4.4
  • Chromium: built in after Android4.4
  • blink
  • Trident:Windows Phone 8 feels like a no-go
  • U3: UC browser > UC browser
  • X5: Tencent build -> QQ browser, Tencent department App built-in Webview

conclusion

compatibility

This is one of the biggest headaches for front-end developers due to the diversity of the kernel

PC

The biggest headache is IE compatibility, although some js capabilities can be supported through Polyfill, but some style capabilities are missing

The mobile terminal

The biggest headache is that when using cross-end development frameworks (Uni-App,React Native, etc.) styles sometimes differ greatly on both ends

Especially on lower versions of Android, it takes a lot of effort to do compatibility testing and view adaptation

The unification of browser kernel capability, still has a long way to go, needs an opportunity

The status quo

  • Google and Opera embrace Blink
  • IOS embrace its
  • Firefox hug Gecko
  • The latest Version of Microsoft Edge has Chromium kernel, the old version is EdgeHTML

reference

  • Wikipedia – Browser engine
  • Baidu Encyclopedia – browser kernel
  • Tencent Cloud + community – see through the browser architecture
  • Brief book – A comprehensive understanding of browser (kernel) history

The original text is first published in personal blog, the special series will sort out many articles, and we learn together, common progress, if there is a mistake, please correct

Browser series

  • 1. Browser Thematic series – Caching Mechanisms
  • 2. Browser Thematic series – Principles of rendering
  • 3. Browser Thematic series – Block rendering
  • 4. Browser Thematic Series – Local Storage
  • 5. Browser Special Series – Web Security
  • 6. Browser Series – Browser kernel
  • 7. Browser Thematic series – Cross domain and cross site
  • 8. Browser Thematic Series – Event loops