1、浏览器内核

webkit 架构

实现部分webcore时共享部分，虚线部分不同浏览器有不同的实现；

基于blink（webkit）的chromium

content 接口、content模块将下面的渲染、安全、插件机制隐藏起来，提供一个接口类;沙箱模型、h5、gpu等功能在这里实现；
chromium 是一个完整的浏览器，可以渲染用户界面；
content shell是一个浏览器壳，用于测试渲染，硬件加速和android上；
android webview 满足android的weview设计

2、webcore

HTML解析后会产生 DOM Tree，
解析 CSS 会产生 CSS Rule Tree，
Javascript 会通过 DOM API 和 CSS Object Model（CSSOM） API 来操作 DOM Tree 和 CSS Rule Tree

3、渲染引擎和js引擎互相调用

渲染引擎和js引擎是两个独立的模块

渲染引擎通过桥接接口让js有访问dom的能力；
js提供调用接口给渲染引擎，以便处理js代码和获取结果；
js可获取浏览器dom和bom对象；

4、js扩展机制

使用宿主chrome的本地代码扩展js引擎里的对象和方法。

4.1 js绑定

需要和v8引擎代码一起编译，扩展dom的实现就是v8绑定机制。

使用IDL类定义js接口（对象和方法）
按照引擎的标准接口为基础，c++来实现具体接口类
通过v8的注册函数 V8DOMConfiguration::configure::Template将信息注册到引擎中

4.2 v8 extension

能够动态扩展，不需要和v8引擎代码一起编译；

基类Extension
全局注册函数

class MYExtension : public v8::Extension {
    public:
        MYExtension() : v8::Extension("v8/My", "native function my();") {}
        virtual v8::Handle<v8::FunctionTemplate> GetNativeFunction (v8::Handle<v8::String> name) {
            // 可以根据name来返回不同的函数
            return v8::FunctionTemplate::New(MYExtention::MY);
        }
        static v8::Handle<v8::Value> MY(const v8::Arguments& args) {
            // Do sth here
            return v8::Undefined();
        }
};
MYExtension extension;
RegisterExtension(&extension);

1.基于Extension基类构建一个它的子类，并实现它的虚函数—GetNativeFunction，根据参数name来决定返回实函数； 2.创建一个该子类的对象，并通过注册函数将该对象注册到V8引擎，当JavaScript调用’my’函数时就可被调用到。

欢迎关注我的前端自检清单，我和你一起成长

3.3.浏览器内核与js引擎