Heim Web-Frontend HTML-Tutorial 浏览器内核总结

浏览器内核总结

Mar 25, 2017 am 11:06 AM
Kernel 浏览器

 一般来讲,浏览器分为外壳部分和渲染部分。外壳部分就是用户看得见摸得到的外观和操作界面;而渲染部分则包括了浏览器内核和JS引擎,其中JS引擎主要负责执行javascript语言实现网页上的动作,而内核则负责渲染网页,把数据变成用户可以看得见的网页内容。

     浏览器内核也就是浏览器所采用的渲染引擎“Rendering Engine”,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是前端人员需要在不同内核的浏览器中测试网页显示效果的原因。
内核分类:

Trident:
该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到IE11,也被普遍称作”IE内核”。
Trident内核的常见浏览器有:
IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);360安全浏览器(1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink)猎豹极轻浏览器,360极速浏览器(7.5之前为Trident+Webkit,7.5为Trident+Blink)猎豹安全浏览器(1.0-4.2版本为Trident+Webkit,4.3及以后版本为Trident+Blink)猎豹极轻浏览器,傲游浏览器(傲游1.x、2.x为IE内核,3.x为IE与Webkit双核)、百度浏览器(早期版本)、世界之窗浏览器(最初为IE内核,2013年采用Chrome+IE内核)、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器(1.x为Trident,2.0及以后版本为Trident+Webkit)、阿云浏览器(早期版本)、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器(12 之前版本)、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器(iPhone/iPad/Android)、UC浏览器(Blink内核+Trident内核)等。其中部分浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”或“极速模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。

Gecko:
Gecko的特点是代码完全公开,因为这是个开源内核,因此受到许多人的青睐,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。不过事实上,Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多,所以有时也会被称为Firefox内核。
Gecko内核常见的浏览器: Mozilla Firefox、Mozilla SeaMonkey、Epiphany(早期版本)、Flock(早期版本)、K-Meleon

Presto (已废弃):
Opera12.17及更早版本曾经采用的内核,现已停止开发并废弃。Opera现已改用Google Chrome的Blink内核。

Webkit:
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎。
WebKit内核常见的浏览器:傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

Blink:
由Google和Opera Software基于Webkit引擎研发的排版引擎。2013年4月3日,谷歌在Chromium Blog上发表博客,称将与苹果的开源浏览器核心Webkit分道扬镳,在Chromium项目中研发Blink渲染引擎(即浏览器核心),内置于Chrome浏览器之中。

移动端浏览器内核总结
在移动端浏览器中,根据调查各种产品的市场占有率如下图:

UC浏览器
UC手机浏览器使用u2/3/4内核开发,本质是基于开源内核Webkit开发,在Webkit的基础上进行二次优化,并不能算是完全的自主内核。  

QQ浏览器
腾讯X5内核是基于Webki引擎,进行了深度优化和拓展,具有超强的云压缩加速能力,腾讯的产品不仅手机QQ浏览器,手机QQ和微信都用的X5内核,这要比原生内核要安全稳定,也不会出现卡顿,加载超时这些情况。所以用QQ浏览器看网页的体验要远远高于那种普通的搭载原生内核的APP的。

百度手机浏览器
T5内核是百度手机浏览器团队为用户打造的专属内核,该内核可对手机上网进行全面提速,优化了对JavaScript,HTML5的支持,优化WebAPP体验效果,提升浏览器对网页的兼容性,百度方面称这一版本不同于绝大多数Android手机浏览器直接调用系统自带的内核浏览器,而是通过移植最新的webkit浏览器内核。

360手机浏览器
中国著名互联网安全公司360发布360手机浏览器G5内核版,G5内核版是基于Chrome深度修改定制的,在大多浏览器尚且停留在使用webkit内核时,360后来居上,直接将目光投向了当前最先进的Chrome内核上

对于这几种浏览器的内核技术PK,可参考UC、QQ、360手机浏览器内核技术大比拼

     不管是UC的U3内核、QQ的X5内核、百度的T5内核、360的G5,都是在WebKit上二次开发的内核。这些浏览器都是基于Chromium开发的,所以有的说是采用了Chrome内核,而Chrome、Chromium的内核就是Webkit排版引擎,所以又有的说是采用了Webkit。

故在前端人员编写的移动端网页css文件时,主要考虑webkit内核就可以了。顺便再此推荐几款移动端网页调试工具DebugGap、browsersync

相关文章:

主流浏览器内核及JS引擎

浏览器内核信息整理

php获取浏览器内核版本

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie kann man das Größensymbol durch CSS anpassen und es mit der Hintergrundfarbe einheitlich machen? Wie kann man das Größensymbol durch CSS anpassen und es mit der Hintergrundfarbe einheitlich machen? Apr 05, 2025 pm 02:30 PM

Die Methode zur Anpassung der Größe der Größe der Größe der Größe in CSS ist mit Hintergrundfarben einheitlich. In der täglichen Entwicklung begegnen wir häufig Situationen, in denen wir die Details der Benutzeroberfläche wie Anpassung anpassen müssen ...

Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Wie zeige ich die lokal installierte 'Jingnan Mai Round Body' auf der Webseite richtig? Apr 05, 2025 pm 10:33 PM

Mit lokal installierten Schriftdateien auf Webseiten kürzlich habe ich eine kostenlose Schriftart aus dem Internet heruntergeladen und sie erfolgreich in mein System installiert. Jetzt...

Wie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen? Wie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen? Apr 05, 2025 am 07:48 AM

Erkennen Sie den Lückeneffekt des Karten -Gutschein -Layouts. Beim Entwerfen von Karten -Gutschein -Layout begegnen Sie häufig die Notwendigkeit, Lücken zu Karten -Gutscheinen hinzuzufügen, insbesondere wenn der Hintergrund Gradient ist ...

Der Text unter Flex -Layout wird weggelassen, aber der Behälter wird geöffnet? Wie löst ich es? Der Text unter Flex -Layout wird weggelassen, aber der Behälter wird geöffnet? Wie löst ich es? Apr 05, 2025 pm 11:00 PM

Das Problem der Containeröffnung aufgrund einer übermäßigen Auslassung von Text unter Flex -Layout und Lösungen werden verwendet ...

Warum wirkt sich negative Margen in einigen Fällen nicht wirksam? Wie löst ich dieses Problem? Warum wirkt sich negative Margen in einigen Fällen nicht wirksam? Wie löst ich dieses Problem? Apr 05, 2025 pm 10:18 PM

Warum werden negative Margen in einigen Fällen nicht wirksam? Während der Programmierung negative Margen in CSS (negativ ...

Wie erhalten Sie Echtzeit-Anwendungs- und Zuschauerdaten auf der Arbeit von 58.com? Wie erhalten Sie Echtzeit-Anwendungs- und Zuschauerdaten auf der Arbeit von 58.com? Apr 05, 2025 am 08:06 AM

Wie erhalte ich dynamische Daten von 58.com Arbeitsseite beim Kriechen? Wenn Sie eine Arbeitsseite von 58.com mit Crawler -Tools kriechen, können Sie auf diese begegnen ...

Warum wird ein bestimmtes Div -Element im Edge -Browser nicht angezeigt? Wie löst ich dieses Problem? Warum wird ein bestimmtes Div -Element im Edge -Browser nicht angezeigt? Wie löst ich dieses Problem? Apr 05, 2025 pm 08:21 PM

Wie löst ich das durch User Agent Style Sheets verursachte Anzeigeproblem? Bei Verwendung des Edge -Browsers kann ein Div -Element im Projekt nicht angezeigt werden. Nachdem ich nachgesehen hatte, habe ich gepostet ...

Wie verwendet ich CSS und Flexbox, um das reaktionsschnelle Layout von Bildern und Text in verschiedenen Bildschirmgrößen zu implementieren? Wie verwendet ich CSS und Flexbox, um das reaktionsschnelle Layout von Bildern und Text in verschiedenen Bildschirmgrößen zu implementieren? Apr 05, 2025 pm 06:06 PM

Implementieren von Responsive Layouts mit CSS, wenn wir Layoutänderungen unter verschiedenen Bildschirmgrößen im Webdesign, CSS ...

See all articles