首页 > 编程知识 正文

简述三大浏览器的内核,浏览器最核心的部分是浏览器内核,关于浏览器内核

时间:2023-05-06 17:17:06 阅读:262067 作者:2543

浏览器功能

展示各种应用的资源(HTML、XML、CSS、JS、JSON、PDF 等),资源的位置在URI(Uniform Resource Indentifier)中。

浏览器组成

 

一、 User Interface

除了主窗口显示请求的页面,其他任何显示部分都是User Inteface。比如地址栏、前进/后退、书签、刷新、主页等

二、Browser engine

marshals actions between the UI and the rendering engine.

在UI与rendering engine间传递命令

marshal英文意思:If you marshal people or things, you gather them together and arrange them for a particular purpose. 召集; 安排

三、Rendering Engine 主流程main flow Process HTML markup and bulid the DOM treeProcess CSS markup and bulid the CSSOM treeCombine the DOM and CSSOM into  a render treeRun layout on the render tree to compute geometry of each nodePaint the individual nodes to the screen

主流浏览器Chrome(Wekit)、FireFox(Gecko)的流程图

 

1.render tree

树中每个圆圈都是Node(比如Image、Text block、Button、Ordered List、Horizontal reference)

DOM树构建参考:https://blog.csdn.net/jiangshangchunjiezi/article/details/76687168

2. layout

 giving each node the exact coordinates(坐标) where it should appear on the screen.

render tree中每个节点在屏幕中的位置。HTML采用基于流的布局模型,这意味这大多数情况只需一次遍历就能计算出几何位置,并且靠后的位置并不影响前面的几何位置,因此布局可以从左到右、从上到下的遍历render tree。例外,比如表格需要不止一次遍历。

3. Paint

使用UI Back-end Layer将每个节点画在屏幕上。绘制顺序:background color, background image, border, children, outline

需要注意的是,这个main flow是渐进的过程,为了提升用户体验,Rendering Engine会尽快将画面展示在屏幕上,而不是等到整个HTML文档parse完,才构建render tree等后续操作。在不断从网络接收过程中,会将parse部分内容呈现出来。

 

四、Networking

1. Networking handle all aspects of Internet Communication and handles URLs to use HTTP, FTP.
2. Implements a cache of retrieve documents to minimize network traffic.

五、JavaScript Interpreter — Scripting Engines JavaScript Interpreter executes the JS code and result to rendering engine.Each browser use various scripting engines like Chrome uses V8, Firefox uses Spider Monkey, IE Edge uses Chakra (JavaScript Engine), Internet Explorer uses Chakra (JScript Engine), Safari uses Nitro (JavaScript Core)六、UI Back-end

Back-end helps to draw widgets like select box, input box and check box etc.

七、Data Persistence

This layer is persistence and this helps browser to store data locally like Cookie, Local Storage, Session Storage, IndexedDB, WebSQL and FileSystem.

 

Rendering Engine

在浏览器七大组成部分中Rendering Engine是核心。

1.浏览器大事年表 1990年: Nexus(WorldWideWeb)诞生1993年1月23日:Mosaic诞生1994年12月:Netscape(Mozilla)诞生1995年4月:Opera诞生1995年8月16日:Internet Explorer诞生2002年9月23日:Firefox诞生2003年1月7日:Safari诞生2008年9月2日:Chrome诞生2.Rendering engine发展过程 Nexus:世界上第一个浏览器,它只能显示文字,并不能显示图片Mosaic:能够不仅能显示文字,还能显示图片。这就造成一个问题,用Nexus、Mosaic显示不同内容,如何判断浏览器的类型呢?从而有了user-agent,Mosaic把其标记为NCSA_Mosaic/2.0 (Windows 3.1),从而根据客户端的user-agent就能判断响应是否要包含图片了。Mozilla:想要取代Mosaic,但因为 Mozilla = Mosaic + Killer让Mosaic很生气,Mozilla就改名为Netscape,并且user-agent=Mozilla/1.0(Win3.1),因为它支持框架,从而user-agent含Mozilla 则响应有框架的(用户喜欢);发给非Mozilla 是无框架的页面。从而Mozilla 战胜了Mosaic,Mosaic退出舞台。Internet Explorer:鉴于响应有框架的是user-agent含Mozilla ,则在IE 的user-agent保留了Mozilla ,IE与Windows捆绑,市场很大,导致这个传统就留了下来。IE 战胜了Mozilla。Mozilla/1.22(compatible; MSIE 2.0; Windows 95)。IE从4.0开始Rengering engine叫Trident,沿用至今;2015年发布了Microsoft Edge(成为win10内置浏览器),Rendering engine是EdegHTML它是Trident的一个分支,于2019年结束使用,Microsoft Edge再次使用Chrome的blinkFirefox :Netscape成立的非正式组织Mozilla,开发了Gecko,浏览器名为firefox ,user-agent=Mozilla/5.0 (Windows; U; Windows NT 5.1; sv-SE; rv:1.7.5) Gecko/20041108 Firefox/1.0,Gecko是非常好的Rendering engine,其他的浏览器模仿,从而有了Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.7.2) Gecko/20040825 Camino/0.8.1(其实质是Gecko)KHTML:Firefox 很出色,IE追不上,因此user-agent含Gecko的响应提供更好的服务。也导致其他浏览器得不到很好的响应,所以Linux爱好者编写了Konqueror,Rendering engine是KHTML,为了更好响应---伪装成like Gecko ,user-agent=Mozilla/5.0 (compatible; Konqueror/3.2; FreeBSD) (KHTML, like Gecko)Opera:提出新观点让用户决定伪装成哪种浏览器 最初是自己的Presto内核,后来是Webkit,现在是Blink内核;Safari:用KHTML 引擎,加入了新的特性,叫WebKit, user-agent=Mozilla/5.0 (Macintosh; U; PPC Mac OS X; de-de) AppleWebKit/85.7 (KHTML, like Gecko) Safari/85.5

WebKit本身主要是由两个引擎构成的,一个是渲染引擎“WebCore”,另一个则是javascript解释引擎“JSCore”,它们均是从KDE(Linux的桌面系统)的渲染引擎KHTML及javascript解释引擎KJS衍生而来。

    9.Chrome:用Webkit为引擎,因为想要Safari的页面,所以伪装了Safari,user-agent=Mozilla/5.0 (Windows; U; Windows NT         5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13。在2013年Rendering Engine改为         blink(blink是WebKit的WebCore的一个分支)Chrome28+,但是user-agent并没有改。

Chrome使用WebKit,并将自己伪装成Safari,WebKit伪装成KHTML,KHTML伪装成Gecko,最后所有的浏览器都伪装成了Mozilla,这就是为什么所有的浏览器User-Agent里都有Mozilla。

   10.国内并没有开发出新的Rendering Engine,也就是伪装。分为两大阵营:Trident和WebKit 

比如360伪装WebKit 再加上自己名字:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 QIHU 360SE/12.1.2633.0

QQ、搜狗浏览器用Trident

根据统计报告(2019年第四季度):

PC端:IE 34.78%;Firefox 25.60%;Chrome 25.36% ;QQ 2.68%、搜狗 1.91%移动端:Chrome 29.78%;UC 22.37%;QQ 18.18%;vivo 6.82%;OPPO 5.88% ;Safari 5.86%;MIUI 2.24%

 

3.极速浏览模式、兼容浏览模式

浏览器的新版本是“双核”甚至是“多核”,其中一个内核是Trident,然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”,而Trident则是“兼容浏览模式”,用户可以来回切换。

极速浏览模式:Blink内核具有更高的网页浏览速度和更好网页渲染效果。但由于少部分网银、政府、税务、办公系统等网站只支持IE8等低版本浏览器,若打开此类网站发现异常,则切到兼容浏览模式。另外淘宝、360导航强制极速浏览模式。

想用极速模式,增加meta标签:<meta name=renderer content=webkit>

兼容浏览模式:兼容模式”下,360安全浏览器调用Trident内核(IE内核),Trident内核具有网页兼容性好、页面适用性广的特征,对于部分在默认“极速模式”下出现问题的网页(如:使用了Activex控件、页面代码只支持Trident内核、网页中注明使用IE浏览器)的情况下,切换“兼容模式”就可以正常使用网站功能。

高版本的浏览器要浏览低版本时开发的页面,则要用兼容模式。

具体见:http://bbs.360.cn/thread-14958904-1-1.html

 

参考:

https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

https://www.youtube.com/watch?v=z0HN-fG6oT4

https://medium.com/@ramsunvtech/behind-browser-basics-part-1-b733e9f3c0e6

https://webaim.org/blog/user-agent-string-history/

http://litten.me/2014/09/26/history-of-browser-useragent/(通俗)

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。