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

了解浏览器

  1. 浏览器内核概念

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

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

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

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

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

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

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

    (refer:JavaScriptCore深度解析
  4. Chromium/BlinkChromium基于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

 

参考

原文:https://juejin.im/post/5c0492a36fb9a049e82b435a

(文中有些细节仅做参考,有些问题,我后面有空修改下)

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » 简述Chromium, CEF, Webkit, JavaScriptCore, V8, Blink

赞 (1) 打赏

评论 0

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏