First, the problem and the reason
In the production of front-end web developer friends often encounter such a problem : when the same front-end code to run on different browsers, display out of the effect is different.
This problem occurs reasons are: different different browser kernel, resulting in different browsers there are some differences to resolve the page. This problem is often referred to by the industry: browser compatibility issues.
Second, the browser kernel
Browser kernel brief description of
a complete browser contains a kernel shell browser and browser (shell). Browser kernel can be divided into two parts: the rendering engine (Layout Engine, or Rendering Engine) and JS engines. Since the JS engine more and more independent, the kernel tends to refer only to the rendering engine.
Third, the browser constitution
Browsers generally consists of seven modules, User Interface (UI), Browser engine (the browser engine), Rendering engine (rendering engine), Networking (network), JavaScript Interprete (js interpreter), UI Backend (UI backend ), Date persistence (persistent data storage)
1. User interface (the User Interface) - including the address bar, back / forward buttons, bookmarks directory, etc., that is, you - see page displays in addition to other parts of the outside of the window
2. The browser engine (Browser Engine) - also said the browser kernel. Commands may be transmitted between the user interface and the rendering engine to read and write data at the client or local cache, it is browsers communicate with each other between the respective core portions
3. The rendering engine (Rendering Engine) - CSS rules and parse the document DOM layout and content to the browser style interface is displayed, it was also known layout engine, we often say that the browser kernel mainly refers to the rendering engine.
4. Network (Networking) - used to complete the call or network resource downloading module
5.UI rear end (the UI the Backend) - used to draw the basic browser window controls, such as input boxes, buttons, radio buttons, etc., in accordance with different browser rendering of visual effects are different, but the functionality is the same.
6.JS interpreter (JavaScript Interprete) - also known as JS engine. JS script to explain the implementation of the module, such as chrome V8 engine, JavaScriptCore
7. data storage (a Date Persistence) - the browser stores a variety of data cookie, localStorage, etc. in the hard disk, can be provided by the API call browser engine. HTML5 adds web database technology, a complete, lightweight client-side storage techniques.
A main part schematic browser:
- 1. User Interface
- 2. The browser engine (responsible for the window manager, Tab process management, etc.)
- 3. rendering engine (also known as the kernel, is responsible for parsing HTML, page rendering)
- 4.JS engine (JS interpreter, such as Chrome and Nodejs employed V8)
Fourth, the mainstream browser kernel (rendering engine) and JS engines
5 large kernel and browser:
| Rendering engine | Browser |
| Trident kernel | Using IE browser, IE is also often called the kernel . In addition, the use of browsers include Trident core: the I E6, IE7, IE8 (Trident 4.0), IE9 (Trident 5.0), the IE10 (Trident 6.0); 360 secure browser, the browser 360 speed (using the kernel Chrome + IE), travel browser (aoyou 1.x, 2.x kernel for IE, IE and Webkit 3.x as dual-core), Baidu browser (earlier) , Window of the World browser (initially IE core, 2013 adoption Chrome + IE core), 2345 browser, Tencent TT, Taobao browser, and editors read the browser, Sogou browser, A cloud browser (earlier versions), Rising secure browser, Slim browser, GreenBrowser, Avant browser (the previous version 12), 115 browsers, 155 browser, flash tour browser, N carbon dioxide browser, UC browser (Blink kernel + Trident kernel) Wait |
| Note: The above part of the new version of which browser is the "dual core" or even "core", which is a kernel Trident, then add one other kernel. Domestic manufacturers generally to other kernel called "high-speed browsing mode", while Trident is "compatible browsing mode", the user can switch back and forth. Trident kernel can not be used on other operating systems other than Windows, so it can not be cross-platform use . | |
| Gecko kernel | Using Mozilla FireFox, Firefox also called the kernel . In addition, using the Gecko browser kernel also: Mozilla Firefox, Mozilla SeaMonkey, Epiphany ( earlier versions), Flock (earlier versions), K-Meleon |
| Note: Gecko is characterized by the code completely open ( open source kernel ). So any programmer can write a code to add functionality. And, Gecko is a cross-platform kernel , can be used in Windows, BSD, Linux and Mac OS X in. | |
| Presto kernel | Before the kernel Opera browser (Opera12.17 and earlier versions of the kernel) Opera now use Google Chrome's Blink kernel. At present, the kernel in Opera has stopped development and discarded. Presto is a commercial engine, in addition to the Opera, only NDS Browser, WiiInternet Channle, Nokia770 web browser, etc. |
| Note: The kernel was first used in the 2003 Opera7, the characteristics of Which engine is optimized rendering speed has reached the extreme, but at the expense of compatibility page. | |
| Webkit core | Safari browser kernel, Chrome prototype kernel, open source . Google Chrome, 360 speed browser Sogou browser and a high-speed mode also uses web kit as a kernel (in terms of understanding the script, Chrome uses its own research and development of V8 engines). Web Kit core application on the phone is also very broad, such as Google's phone Gphone, Apple's iPhone, Nokia's Series 60 browser used, etc. Browser core engine, are based on Web Kit. WebKit core common browsers: travel browser 3, Apple Safari (Win / Mac / iPhone / iPad), Symbian mobile browser, Android default browser, |
| Note : It is Apple's own kernel, it is Apple's Safari browser used. Limited to the use of Mac OS X and Safari are not widely used to just Mac OS X-specific browser, not the market range, but launched the Windows version of Safari 3, the current rise in popularity. | |
| Blink kernel | Google's latest kernel. In addition, in Chrome (28 and later versions), using (15 and later versions) and Yandex browser Opera. |
| Note: Apple uses in Safari Web kit core, and in 2005 the Web kit open to open source software. Google then uses Apple's Web kit to build the core of the Chrome browser. And with Opera Software to develop Blink kernel. April 3, 2013, Google published in the Chromium Blog blog, said it would open source the core of Apple's Webkit browser parted ways, research and development Blink rendering engine (ie browser core) in the Chromium project, Chorme built into the browser. |
JS engine, and browser:
| Browser | JS engine |
| IE | Chakra |
| Edge | Chakra |
| Firefox | SpiderMonkey |
| Chrome | V8 (famous) |
| Safari | Javascriptcore |
| Opera | how |
