简述三大浏览器的内核,浏览器最核心的部分是浏览器内核,关于浏览器内核
展示各种应用的资源,资源的位置在URI中。除了主窗口显示请求的页面,其他任何显示部分都是User Inteface。在浏览器七大组成部分中 Rendering Engine 是核心。这就造成一个问题,用Nexus、Mosaic显示不同内容,如何判断浏览器的类型呢?从而Mozilla 战胜了Mosaic,Mosaic退出舞台。Internet Explorer:鉴于响应有框架的是user-agent含Mozilla ,则在IE 的user-agent保留了Mozil
浏览器功能
展示各种应用的资源(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 tr活动:慈云数据爆款香港服务器,CTG+CN2高速带宽、快速稳定、平均延迟10+ms 速度快,免备案,每月仅需19元!! 点击查看ee 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标签:
兼容浏览模式:
兼容模式”下,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/(通俗)
《简述三大浏览器的内核,浏览器最核心的部分是浏览器内核,关于浏览器内核》来自互联网同行内容,若有侵权,请联系我们删除!