Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of browser kernel and compatible problem case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this browser kernel and compatible problem case analysis article. Let's take a look.

1. Browser kernel

  RenderingEngine, which has many names translated into Chinese, typesetting engine, interpretation engine, rendering engine, is now popularly called browser kernel. To render the content of a web page and convert the content and typesetting code of a web page into a visual page, a browser may have more than one kernel.

1. Typesetting engine

(1) Trident (Windows) 360IE

(2) Gecko (cross-platform) MozillaFirefox, MozillaSeaMonkey

(3) KHTML (Linux) Konqueror

(4) WebKit (cross-platform) AppleSafari, Symbian system browser

(5) Chromium (cross-platform) Chromium, GoogleChrome, SRWareIron, ComodoDragon

(6) Presto (cross-platform) Opera

Browser kernel

IE, Baidu, window of the World Trident

Chrome, opera chromium, or Blink

Cheetah, 2345 browser IE+chromium

Firefox Gecko

Safari Webkit

Sogou, Youyou, QQ Browser trident+webkit

2. JavaScript engine

(1) Chakra

Chakra, IE9 enables the new JavaScript engine.

(2) SpiderMonkey/TraceMonkey/JaegerMonkey

The SpiderMonkey application is in MozillaFirefox1.0-3.0 and the JaegerMonkey application is in MozillaFirefox4.0 and later versions.

(3) V8

Apply to Chrome, Aoyou 3.

(4) Nitro

Apply to Safari4 and subsequent versions.

(5) LinearA/LinearB/Futhark/Carakan

LinearA is applied to Opera4.0-6.1, LinearB to Opera7.0~9.2, Futhark to Opera9.5-10.2, and Carakan to Opera10.5 and subsequent versions.

(6) KJS

The JavaScript engine corresponding to KHTML.

3. Single and dual core engine

(1) Trident/Gecko dual Core browser

(2) Trident/WebKit dual Core browser

At present, the most mainstream "dual-core" browsers in China are basically this architecture, 360Speed browser, window of the World browser Express version, Aoyou 3 Sogou browser, QQ Browser, Maple browser, Express browser, Baidu browser, A Yun browser (later version), Sunflower browser, the weirdest of which is Aoyou 3. Other dual-core browsers are based on Chromium, while Aoyou is based on WebKit, but happens to use a V8 engine.

(3) Trident/Gecko/WebKit triple core browser

What can be seen now is that Japanese Lunascape,Avant will also be classified here with the addition of the WebKit kernel. To be honest, Lunascape is really hard to use, really weird. Each kernel is relatively independent, the shell itself is not strong enough, and the stability is not high, so it is better to go back to a single-core browser.

II. Compatibility issues

For browser compatibility issues, general points, HTML,Javascript compatibility, CSS compatibility. Among them, the problems related to html are relatively easy to deal with, but the higher version browsers use elements that the lower version browsers cannot recognize, so you can't parse them, so you should pay attention to it. In particular, HTML5 has added many new tags, and low-version browsers have a bit of an impact on the progress of the times.

1. Css compatibility

(1) the default settings of margin and padding of different browsers are different, so use * {margin:0px;padding:0px;}.

(2) the height of this tag in ie6, 7 and roaming is out of control and exceeds the height set by yourself. Add overflow:hidden to this tag

(3) the images are spaced by default and float is used.

(4) the box collapses and the parent element is added (overflow:hidden;) to become the BFC element.

(5) the font size is different in different browsers. Use line-height:14px; to specify the height.

(6) IE6 does not support png transparency.

(7) CSSHack compatibility attribute setting

2. Html compatibility

HTML

(1) style compatibility

(2) weird mode

Weird mode is a compatible mode that does not comply with the W3C specification, where width is the full scope including contentWidth, left and right padding, left and right border (same as height), similar to box-sizing:border-box;, and table's font-size cannot inherit from parent elements. The following situations trigger browser grotesque mode (QuirksMode):

Did not write DOCTYPE to trigger weird mode

Before the addition, the weird mode will be triggered under IE6.

Join in front, IE7 goes into weird mode

Any non-null character in front of it will trigger a weird mode under IE6

Preceded by XML, weird mode will not be triggered under IE7, but there can be no other non-null characters

Check document.compatMode to see which mode the browser works in: the value BackCompat is weird mode, the value CSS1Compat is standard mode

(3) there is a gap between display:inline-block elements

Apple

Banana

Pineapple

Peach

Orange

Apple

Banana

Pineapple

Peach

Orange

(4) the possible temporary invalidation of document style in IE

This is the end of the article on "browser Kernel and compatibility case Analysis". Thank you for reading! I believe everyone has a certain understanding of the knowledge of "browser kernel and compatible problem case analysis". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.