浏览器内核

手机浏览器种类:

UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,其他杂牌浏览器

国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自助研发的内核,就像国内的手机操作系统都是基于Android修改的

 

全球仅有四大浏览器内核
  目前全球仅有四个独立的浏览器内核,分别为微软IE的Trident、网景最初研发后卖给Mozilla基金会并演化成火狐的GeckoKDE的开源内核Webkit以及Opera(欧朋)的Presto。其中,Presto是历史最悠久的内核。
  目前微软的Trident在移动终端上主要为WP7系统内置浏览器
      Opera的Presto内核在所有联网设备上都使用,移动终端上主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版
      Webkit内核的适用范围则较为广泛,Android原生浏览器、苹果的Safari、谷歌的Chrome(Android4.0使用)都是基于Webkit开源内核开发的

从实际情况出发:

对于Android手机而言,使用率最高的就是Webkit内核,我们看到很多手机浏览器厂商都宣称有着自主内核,比如手机UC就号称采用了U3内核、而华为也经常标榜自己的天天浏览器采用了T9内核,事实上,他们都是基于开源内核Webkit进行二次开发的,并不是完全的自主内核。

而在iOS以及WP7平台上,由于系统封闭,不允许除系统自带浏览器内核以外的浏览器内核进入,因此各家浏览器的开发均为在Safari或者IE内核的基础上进行二次开发,优化功能和自制UI。比如海豚、遨游等浏览器就是直接采用系统自带浏览器的内核,这点从这几款浏览器的HTML5评分与系统自带浏览器评分结果完全一致就可以看出。

四大浏览器内核优缺点
  1.Trident:因为在早期IE占有大量的市场份额,所以以前有很多网页是根据这个Trident的标准来编写的,但是实际上这个内核对真正的网页标准支持不是很好,同时存在许多安全Bug。
  2.Gecko:优点就是功能强大、丰富,可以支持很多复杂网页效果和浏览器扩展接口,缺点是消耗很多的资源,比如内存。
  3.Webkit:优点就是Webkit拥有清晰的源码结构、极快的渲染速度,缺点是对网页代码的兼容性较低,会使一些编写不标准的网页无法正确显示。

  4.Presto:Presto内核被称为公认的浏览网页速度最快的内核,同时也是处理JS脚本最兼容的内核,能在Windows、Mac及Linux操作系统下完美运行。

Webkit渲染过程



由于资源加载过程和网络模块都可以多并发多线程的执行,所以可以请多个URL没有必要等到上一次url执行完毕之后在处理下一个URL,但即便如此也是需要一个url缓存的以便于应对多并发的情况。

经过资源加载和网络模块之后,由于在整个渲染过程中,这个模块是非常慢的,只至于能把这一部分的优化做好可能对整个网络提升至关重要。当得到用户输入的url之后,就会请求资源加载模块进行资源加载,同时这个模块依赖于网络模块进行信息请求和链接。这个url请求可能来自于用户输入也可能来自于对html文档中链接的处理。但是无非就是请求html、css、js、图片视频等资源。对于这些资源请求过程中,只有js的请求是与生成DOM树同步的,其他资源的请求都是异步的。


由于js同步阻塞DOM进程的渲染,所以说应该在资源加载顺序上做一个权衡,以便于尽最小的时间加载更多的资源。同时webkit浏览器在这方面也做出了优化,那就是在请求js代码的时候,虽然阻塞的主进程对DOM树的渲染,但是他会开一个线程浏览后面的html代码,然后将所有的请求文件URL都发送url缓存中进行资源的请求工作,所以js虽然阻塞的DOM树的生成,但是不会阻塞资源的请求。


资源加载慢有一个很重要的弊端变现在图片的加载上,比如:DOM树便利到img元素的时候进行图片的加载,但是很有可能DOM树绘制完成进行布局了,但是在布局的时候因为没有明确img长宽、图片也没有加载进来,所以布局并不知道图片的大小。只能默认的处理,如果布局有依赖这种方式的比如瀑布流可能要明确的加上图片的大小信息了。


当DOM建立完成只有会执行DOMcontent事件,当所有的资源加载完毕之后,会执行onlaod事件。


当DOM树构建完成,css也解析完毕形成内部表示形式了,就可以对DOM中每一个元素进行创建一个RenderObject对象,这个对象是将DOM中的节点与对应的CSS样式结合在一起,与此同时会进行CSS布局计算,根据元素的层次结构生成一颗一颗的RenderLayout树,同时构建该树的抽象绘图上下文。


绘图上下文是抽象的,要依托具体的绘图实现类进行实现操作,这个实现类可能很简单也有可能很复杂,比如chrome中会用到多线程机制和GPU硬件加速机制进行图片的绘制,然后将图片保存到2D图像库和3D图像库中,最终对绘制完毕之后,将图像库中的图像进行合并最终显示给用户。


上述的过程仅仅是图像绘制过程的主要的步骤,同时,可能后续由于用户的交互操作和视频等媒体的引入会不断的重复某些过程。最显然意见的就是,js对DOM树的操作,如果在用户交互比如事件发生之后,如果对DOM树进行修改,那么将会从DOM树到最终图像重新执行,如果对CSS大小和布局样式进行修改,那么将重新执行布局、绘图过程,如果仅仅对颜色更信息进行修改则仅仅对RenderObject树修改之后、重新绘制该元素。

具体实现过程源码分析一:

摘要:本系列通过分析WebKit的源代码,试图分析WebKit的内核设计架构,模块之间的关系,分析的时候以Qt的移植为参考,涉及移植的东西不多,主要还是以内核为主。在分析内核的时候,Frame是首当其冲的一个类,本文将分析Frame类的代码。

1.    描述

Frame类是WebCore内核同应用之间联系的一个重要的类。它有点像设计模式中的Façade,将内核的各个不同的零配件组装在了一起,但又不是Façade,因为用户很多时候还是要直接去操作里面的组件。除了设计上的考虑,Frame还有语法上的意义,它对应于Page里面的帧。

2.    类结构

 

 

1)              FrameTree对象用来协助管理父帧和子帧的关系,常见的比如main frame之中有iframe元素,就会调用FrameLoaderClientQt::createFrame来产生子帧,产生的子帧会通过appendChild添加到主帧的树状结构中。Frame通过FrameTree对象,可以方便地访问它的父帧,子帧,兄弟帧。

2)              维护FrameLoader对象用来完成frame的加载,FrameLoader是一个非常重要的类,后续进行进一步的分析。

3)              维护NavigationScheduler对象用来管理页面跳转调度(比如重定向,meta refresh等)。

4)              DOMWindow用来管理同DOM相关的事件、属性和消息。

5)              FrameViwe类用于Frame的排版。

6)              Frame文档解析后,对每一个tag或者attr,会有对应的dom节点关联,Document类用来管理这些dom节点。不同的文档类型继承出不同的子类,比如HTML文档对应子类HTMLDocument,XML文档对应于XMLDocument。

7)              SciptController对象,脚本控制器,用来管理脚本的执行和操作。

8)              Editor对象用来处理页面的编辑相关的操作,比如拷贝,粘贴,输入等,Editor对象,它同Page类的EditorClient对象紧密合作。和EditorClient的关系就如同Page同Frame的关系。

9)              SelectionController用来管理Frame中的选取操作。

10)         AnimationControlle,动画控制,控制动画的播放,暂停,继续(同HTML video标签是否有关系?)

11)         EventHandler,事件处理对象,这里的对象主要是同上层应用也就是用户参与的事件,比如鼠标事件,按键事件(快捷键等),滚动事件,resize事件等。这是一个浏览器外壳经常需要打交道的类。

3.    主要接口

3.1   Create

static PassRefPtr<Frame> create(Page*,HTMLFrameOwnerElement*,FrameLoaderClient*)
描述: 调用Frame构造函数,创建出Frame对象。有两个地方会创建Frame对象,一是要加载一个新的页面请求,这个时候会创建main frame,一是在加载子帧的时候,通过FrameLoaderClientQt的createFrame接口,创建子帧对应的Frame对象,在第一种情况中,HTMLFrameOwnerElement参数为NULL,第二种情况传子帧的父元素。在一个tab页内,main frame会重用。

调用系列:

àQwebPage::setView

àQwebPage::setViewportSize

àQwebPage::mainFrame

àQwebPagePrivate::createMainFrame

àQwebFrameData::QwebFrameData

àFrame::create


àFrameLoader::finishedLoading
à……

àHTMLDocumentParser::append

à……

àHTMLTreeBuilder::processToken

à……

àHTMLElementBase::openURL

àSubFrameLoader::requestFrame

à……

àFrameLoaderClientQt::creatFrame

àQwebFrameData::QwebFrameData

àFrame::create

3.2  createView

void createView(const IntSize&, const Color&, bool, const IntSize&, bool,

            ScrollbarMode = ScrollbarAuto, bool horizontalLock = false,

            ScrollbarMode = ScrollbarAuto, bool verticalLock = false)

描述:创建出FrameView对象,以用于之后的排版。应用调用这个函数的时候需要传入同排版有关的一些信息,如初始视窗大小,背景色,滚动条模式等。创建出FrameView以后,即调用Frame::setView设置成当前的FrameView。
函数调用系列:
àFrameLoader::commitProvisionalLoad

àFrameLoader::transitionToCommitted

àFrameLoaderClientQt::transitionToCommittedForNewPage

àFrame::createView

3.3  setDocument

void setDocument(PassRefPtr<Document>)

描述:设置同Frame关联的Document对象(一般是DocumentWriter创建的)。

函数调用系列:

àQWebFrame::QwebFrame

àQwebFramePrivate::init

àFrame::init

àFrameLoader::init

àDocumentWriter::begin

àFrame::setDocument


àDocumentLoader::receivedData
àDocumentLoader::commitLoad

àFrameLoaderClientQt::committedLoad

àDocumentLoader::commitData

àDocumentWriter::setEncoding

àDocumentWriter::willSetEncoding

àFrameLoader::receivedFirstData

àDocumentWriter::begin

àFrameLoader::clear

àFrame::setDocument

3.4  init

void Frame::init

描述:Frame对象初始化,会调用FrameLoader::init初始化FrameLoader对象。

调用系列:
àQWebFrame::QWebFrame

àQwebFramePrivate::init

àFrame::init

3.5  setPageAndTextZoomFactors

void setPageAndTextZoomFactors(float pageZoomFactor, float textZoomFactor)

描述:设置页面放大因子和文字放大因子。在网页缩放或者改变网页字体大小的时候调用

转载于:  https://blog.csdn.net/dlmu2001/article/details/6164873

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页