自己动手实现浏览器,21天自制chromium:起手篇

转:https://zhuanlan.zhihu.com/p/29101613?utm_medium=social&utm_source=qq

大家好,我又来了。这篇是21天自制原子弹的姐妹篇。

开个玩笑……从这篇开始, 我们来点干货,如何从blink打造一个可以实用的浏览器组件。

chromium从零几年搞到现在,已经完全变成一个无所不包的庞然大物。

如果你只是想要一个能浏览网页的组件,方便嵌入到自己的程序里,或者想用网页来做界面--例如QQ音乐,网易云音乐那样,

那么chromium的那堆多进程、mojo通信、Chrome Apps 框架、Aura Shell、增量升级系统、Chrome Extensions 、headless模式、P2P 通信库,native_client、pdf、ppapi、沙盒机制等等一堆乱七八糟你听都没听过的东西都不会需要。

然而只要用了chromium的内核(例如cef,elecTron,nwjs之类),这堆东西除了占用系统资源外,你还不得不都打包带上。

这时候你就会有个强烈的想法,我不需要这堆乱七八糟的功能,只要能浏览大部分网页的排版渲染组件可以么。

答案是肯定的。

webkit内核就是为此而生。但这里有个问题,chromium虽然当年是使用webkit内核,但自从和苹果分道扬镳后,把webkit改名成blink不说,代码和结构完全是面目全非,而且最重要的是blink已经不是像webkit那样是一个独立的组件了,而是chromium那堆几百个第三方库里一个小小的组件,所有外部设施都依赖于chromium的其他组件了。

我们来看看blink目前需要依赖哪些组件:

  1. cc层(chromium 合成层,实现网页绘制并贴到屏幕上等操作。这个是最麻烦的,以后专门开一篇来讲如何自制)
  2. base库(chromium基础库,类似字符串操作等一系列c++基础库)
  3. 各种和操作系统打交道的接口,例如菜单、文件读写、窗口操作等。这堆东西可以认为是要实现third_party/WebKit/public/platform/Platform.h里的一系列虚函数(又叫Blink Public或者WebKit Glue)。
  4. 如果你不是打算卖到清真地区,通常icu你也不会想要。这是个占用体积很大的毒瘤,一个数据文件就10几M,作为轻量级内核,你肯定不想带。
  5. 网络层。
  6. v8(js引擎)
  7. skia(底层绘图库)

那我们如何在尽量少的使用chromium代码基础上,实现上诉一堆功能和组件呢?

这是目前我的解决方案:

  1. cc层:我放弃了原版chromium cc层,自己完全重写了一遍。这个工作量相当巨大,如果你不是和我一样这么闲,建议直接使用原版cc。
  2. base库:在chromium四十几版的时候,blink几乎不依赖base。然而高版本把wtf库里的大量实现,直接使用base库。所以如果你是从高版本blink开始撸,可以直接扣取低版本blink里的wtf来实现base相关依赖。此处工作量也甚大。
  3. 各种和操作系统打交道的接口:这块其实没有难度,就是有着巨大的工作量。一个个补齐就好。
  4. icu:直接使用系统相关的接口。例如文字编码转换之类的,windouws就有现成的api。其他高级icu api例如断行断句,如果你只打算运行在中英文地区,那自己实现也很简单。只有阿拉伯文、天成文、藏文这些小众语言那需要那么复杂的规则。
  5. 网络层:直接用webkit里的现成代码吧。
  6. v8:直接使用chromium原始代码即可。毕竟这玩意不依赖其他任何组件。
  7. skia:直接使用chromium原始代码即可。毕竟这玩意不依赖其他任何组件。

说到这里,大家肯定有个疑问:既然这么多都用webkit,那为啥我们直接拿webkit过来不就行了。

其实是可以的。webkit发展到今天,已经完全和chromium分开发展了(当年有一阵子谷歌的人也一直在给webkit提代码,后面苹果把他们都踢走了)。而且webkit就是个完整内核,你用来做轻量级组件正合适。但我有几个原因还是放弃了:

  1. webkit对标准的支持还是有点偏差。例如web组件标准,css gird等等。
  2. webkit的web inspect做的很烂,完全没blink好用。
  3. webkit现在也很大了,我编译出来不算icu,也有26M多。作为一个有追求的程序员,我希望这个大小是10M左右。
  4. 最重要的,webkit的js引擎是javascriptcore。这样实现的组件就无法兼容市面上那堆v8造出来的轮子。例如electron、nwjs、nodejs都是用v8。
  5. 还有个小点就是chromium更新非常快,跟着谷歌大佬走感觉更有保障些,尤其是碰到各种莫名其妙的bug,还可以查chromium的更新记录。

既然放弃了webkit,从chomium开始撸,那必然会遇到吨的伤害。欲知后事如何,且听下回分解

时间: 2024-12-28 09:57:29

自己动手实现浏览器,21天自制chromium:起手篇的相关文章

Fedora/RHEL/openSUSE等Linux安装chrome——Google浏览器(以及安装 Chromium)

chrome浏览器安装指南 chrome版本分支介绍 (摘自 http://gethosts.sinaapp.com/help/download.html) Stable Channel / 稳定版.正式版,为追求稳定的普通用户使用,更新很慢: Beta Channel / 测试版,用于稳定版发布前的公开测试.基本不会添加新功能,主要进行 Bug 修正/安全测试,可能会存在不稳定情况,适合喜欢较稳定又可尝鲜的朋友下载使用: Dev Channel / 开发版,主要为功能上的测试,可能存在稳定性问

Linux江湖21:虚拟机体验之VirtualBox篇——性能强大的经典架构

前两篇体验了QEMU和经过KVM加速的QEMU,并体验了第三方虚拟机管理工具virt-manager,让我们见识了开源社区的强大和开源虚拟机软件的高质量和高性能.这一篇,我来剖析一下VirtualBox.VirtualBox号称是目前开源界最强大的虚拟机产品,在Linux平台上,基本上都被大家选择为首选的虚拟机软件.VirtualBox的强大不是盖的,毕竟其后台是超有钱的Oracle公司.VirtualBox的任性也不是盖的,它硬是没有使用我前文所述的那些qemu.kvm.libvirt等被各个

2016.9.21 鸟哥私房菜服务器篇-第二章网络基础-总结

第二章-网络的基本概念 2.1网络 操作系统很多,比如windows/linux/os X等,这么多的操作系统(不同国家的人)如何进行网络沟通(语言交流)呢? 制定共同的标准.然后在你的系统里提供可以加入该标准的程序代码. 网络是跨平台的. 2.1.1 什么是网络 网络就是几部计算机主机或者网络打印机之类的接口设备,通过网线或者无线网络技术,将这些主机与设备连接起来,使得数据可以通过网络介质(网线或者网卡等硬件)来传输的一种方式. 以太网已经是一项公认的标准接口了,大家可以依据这个标准来开发自己

多浏览器兼容性问题及解决方案之Javascript篇

CSS跟JavaScript开发中,最令大家头疼的问题就是浏览器兼容性了,虽然很多文章有这方面的文章,但依然让很多开发人员晕头转向,而且也不够全面.这篇文章,将全面收集css和javascript在各种浏览器下的兼容性报告,也期待各位不断补充. 由于发觉内容收集越来越多,决定将CSS跟JavaScript分开. 一.document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 do

robotframework+selenium搭配chrome浏览器,web测试案例(搭建篇)

这两天发布版本 做的事情有点多,都没有时间努力学习了,先给自己个差评,今天折腾了一天, 把robotframework 和 selenium 还有appnium 都研究了一下 ,大概有个谱,先说说web篇的故事 首先,上次是把ride做完 那么其实我们打开ride以后 最主要的是 添加库 左上角新建案例 库,等 到了这个界面以后 对 进行操作 那么,问题来了 为什么要进行库操作呢 因为只有在库加载以后 你才能调用里边的一些语法等东西 前提下 是你在 cmd 情况下 输入 pip list 能够找

【自制CPU之学习篇00】开篇

从今天开始决定用面包板制作一个8位的CPU,实现几个简单的指令.我给自己分两大部分计划,第一部分是学习制作CPU的理论知识,第二部分是实践.并打算实施计划的同时用博客的方式记录下来.理论知识的部分重点不在于CPU的逻辑结构,而在于如何用具体材料搭建. 启蒙书籍:<编码——隐匿在计算机软硬件背后的语言上> 理论基础:<计算机组成原理> 参考视频:用面包板制作8-bit计算机 物料清单:CPU物料清单.xml 物料清单参考:https://eater.net/category/8-bi

【自制CPU之学习篇01】识别四色环电阻

制作CPU的好多部分都用到了各种阻值的电阻,由于我选购的是色环电阻,即电阻表面涂上一定颜色的色环,来代表这个电阻的阻值.因此通过色环来快速识别电阻阻值需要作为储备知识,不然一堆电阻插在面包板上很快就乱了.下图为我选购电阻的实拍图. 四色环电阻计算: 色环电阻有四色.五色.六色三种,我选购的为四色环电阻,因此下面介绍一下四色换电阻的计算方式. 四色环电阻的前三环的颜色范围都是:黑0 棕1 红2 橙3 黄4 绿5 蓝6 紫7 灰8 白9:第四环的颜色范围是:金5%, 银10%,无20%,代表误差.各

【从零开始自制CPU之学习篇03】锁存器与触发器

本篇学习了两种锁存器:SR Latch和D Latch,一种触发器:D flip flop SR Latch:SR—锁存器 初始状态下,S和R都为0,Q和Q‘随机有一个为1另一个 为0(取决于电流速度).当把S弄成1后,Q为1,此后无论S怎么变化Q都为1.对R也是如此. 一句话总结就是:输出端可以记住S和R最后一次为1的是哪个.这个记住就是存了. D Latch:D—锁存器 此为对SR锁存器的优化,D相当于原来的S和R,这不但方便操作,还屏蔽了S和R均为1这种不规范操作. EN是enable的意

【从零开始自制CPU之学习篇04】电容

电解电容: 多数在1μF以上,直接用数字表示.如:4.7μF.100μF.220μF等等.这种电容的两极有正负之分,长脚是正极. 独石电容: 独石电容器是多层陶瓷电容器的别称, 简称MLCC 读数方法:把"色环表示法"用到电容上来:这又是一种巧妙的演绎!我们在一些瓷片电容上往往看到这样的标记:"103","104","473"等,这里,第三个数字(个位数字)并非通常理解的个位数,它和四色环电阻的第三环一样,告诉人们前两位数字后