简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介:一、了解浏览器浏览器内核分为两部分:渲染引擎(render engin)、js引擎(js engin)渲染引擎:负责对网页语法的解释(HTML、javaScript、引入css等),并渲染(显示)网页

一、了解浏览器

  1. 浏览器内核概念

浏览器内核分为两部分:渲染引擎(render engin)、js引擎(js engin)

渲染引擎:负责对网页语法的解释(HTML、javaScript、引入css等),并渲染(显示)网页

js引擎:javaScript的解释、编译、执行

主流内核:Trident(IE)、Gecko(FireFox)、Webkit(Safari)、Presto(opera前内核、已废弃)、blink(Chrome)

2. webkit浏览器渲染引擎的进度史

简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

3. webkit浏览器内核部分内容介绍

简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

HTML解释器:解释HTML文本的解释器,主要作用是将HTML文本解释成DOM树,DOM是一种文档表示方法。

CSS解释器:级联样式表的解释器,它的作用是为DOM中的各个元素对象计算出样式信息,从而为计算最后网页的布局提供基础设施。

布局:在DOM创建之后,webkit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部比偶表示模型。

JavaScript引擎:使用JavaScript代码可以修改网页的内容,也能修改CSS的信息,JavaScript引擎能解释JavaScript代码并通过DOM接口和CSSOM视图模式来修改网页内容和样式信息,从而改变渲染结果。

绘图:使用图形库将布局计算后的各个网页的节点绘制成图像结果。

二、Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

  1. V8
  2. Webkit
    (refer: Webkit技术内幕)

    苹果公司基于KDE(Linux桌面系统)的KHTML开源,包括Webcore和JavaScriptCore两个引擎。苹果比较了Gecko和KHTML之后,选择后者的原因,是KHTML拥有清晰的源码结构和极快的渲染速度。2008年,谷歌公司发布的chrome浏览器,采用的chromium内核是基于Webkit而来

    应用:safari, mail, app store等应用

    webkit布局:

    当webkit创建RenderObject对象之后,每个对象是不知道自己的位置、大小等信息的,webkit根据盒模型来计算他们的位置、大小等信息的过程称为布局计算/排版。

    布局计算分类:第一类是对整个RenderObject树进行的计算;第二类是对RenderObject树中某个子树的计算,常见于文本元素或者overflow:auto块的计算。

    布局计算:布局计算是一个递归的过程,这是因为一个节点的大小通常需要先计算它的子节点的位置、大小等信息。

    补充:

    为什么说transform实现动画较直接设置几何属性性能较好?

    1.webkit渲染过程:style -> Layout(reflow发生在这) -> Paint(repaint发生在这) -> Composite,transform是位于’Composite(渲染层合并)‘,而width、left、margin等则是位于‘Layout(布局)’层,这必定导致reflow。

    2.现代浏览器针对transform等开启GPU加速。

    style -> Layout(reflow发生在这) -> Paint(repaint发生在这) -> Composite(transform发生在这个时候)

    (refer:

    CSS Animation性能优化

    从重绘重排角度讲解transform的动画性能

  3. JavaScriptCore 引擎

    一开始它是基于KJS开发的,是基于抽象语法树的解释器,性能较差。2008年苹果重写了编译器和字节码解释器,叫SquirrelFish

    简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

    (refer:J avaScriptCore深度解析

  4. Chromium/Blink

    Chromium基于webkit,却把Webkit的代码梳理得可读性更高,多进程框架

    Chromium加载网页的过程,需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起,向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析,解析之后得到一个DOM Tree。有了这个DOM Tree之后,Render进程就可以对网页进行渲染了

    (refer: Chromium网页加载介绍)

    Blink:Chromium项目中研发的渲染引擎,基于并脱离Webkit

    更强大的渲染和布局:

    1. 追求多线程布局
    2. 样式的重新计算
    3. 不为隐藏的iframe创建渲染器
    4. 为插件设置为display:none时,修复插件卸载等旧错误
    5. 异步卸载iframe,速度更快

    (refer:blink的开发者FAQ)

5. CEF(Chromium Embeded Framework)

一个将浏览器功能(页面渲染、js执行)嵌入到其他应用程序的框架,支持windows, Linux, Mac平台

CEF的历史:

  • CEF有两种版本的Chromium Embedded Framework:CEF 1和CEF 3
  • 在Chromium Content API出现后,CEF 2的开发被放弃。
  • CEF 1是基于Chromium WebKit API的单进程实现。它不再积极发展或支持。
  • CEF 3是基于Chromium Content API的多进程实现,其性能类似于Google Chrome。

应用:

1)做一个浏览器

2) 跨平台的桌面底层方案electron.js

3) 客户端(如:桌面端app应用)

好处:开发web和native混合的应用非常方便

三、总结

V8引擎是谷歌公司自主研发的js引擎

Webkit基于KHTML,包含JavaScriptCore

Chromium基于Webkit,衍生出Blink

CEF是包含Chromium浏览器的应用框架

一切鼻祖:KHTML


以上所述就是小编给大家介绍的《简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java程序设计

Java程序设计

宋中山 严千钧 等编 / 清华大学出版社 / 2005-8 / 27.00元

本书全面、系统地介绍了Java语言的基本概念、基本语法和编程方法。主要内容包括:Java语言概述、数据类型与运算符、流程控制语句、类与对象、继承与多态、异常处理、工具类和算法、Applet小应用程序、图形用户界面、输入和输出、Java多线程以及Java高级编程。每章后面附有习题,读者可参考使用。 本书内容丰富,结构合理,语言简洁,深入浅出,通俗易懂。基础知识与程序实例相结合,示例典型......一起来看看 《Java程序设计》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码