Native Function, WTF?
How to enhance your browser
内容
- 为什么
- 哪些方法
- 如何实现
Native Function
Number.parseInt.toString()
> "function parseInt() { [native code] }"
Native Function
class Script: public Struct {
public:
// Script types.
enum Type {
TYPE_NATIVE = 0,
TYPE_EXTENSION = 1,
TYPE_NORMAL = 2,
TYPE_WASM = 3,
TYPE_INSPECTOR = 4
};
...Handle<String> JSFunction::ToString(Handle<JSFunction> function) {
Isolate* const isolate = function->GetIsolate();
Handle<SharedFunctionInfo> shared_info(function->shared(), isolate);
// Check if {function} should hide its source code.
if (!shared_info->IsUserJavaScript()) {
return NativeCodeFunctionSourceString(shared_info);
}
...为什么要扩充浏览器的功能
- 实现新规范
- 使用中浏览器内核无法提供的能力
- 自定义扩展机制
- 第三方浏览器或 webview
- 集成其他宿主环境
- ...
浏览器中供 JavaScript 使用的原生功能的来源
- 脚本引擎 (ECMA, extension)
- 渲染引擎 (DOM, BOM, CSSOM, HTML5...)
- 扩展 (浏览器扩展机制, devtools)
- 引入的其他宿主环境 (Node...)
从脚本引擎进行扩展
- V8 Extension
- window.chrome
增加原生接口
v8::Extension(kLoadTimesExtensionName,
"var chrome;"
"if (!chrome)"
" chrome = {};"
"chrome.loadTimes = function() {"
" native function GetLoadTimes();"
" return GetLoadTimes();"
"};"
"chrome.csi = function() {"
" native function GetCSI();"
" return GetCSI();"
"}") {}
...实操：增加一个 JavaScript 接口
chrome.date = function() {
return Date();
};对渲染引擎功能的扩充
实操：增加 timing 接口属性
- IDL
-
readonly attribute unsigned long long firstLayout;
-
-
Implementation
ScriptValue PerformanceTiming::toJSONForBinding
(ScriptState* scriptState) const
{
...
result.addNumber("firstLayout", firstLayout());
return result.scriptValue();
}扩展开发者工具
- monitorEvents, unmonitorEvents
集成 Node
Chromium + Node
- node-webkit -> nw.js
- heX -> dead
- atom-shell -> Electron
Node 的构成
-
node
- V8
- libuv
- openssl
- ...
Node 的启动过程
加入 Node 的同步逻辑
- DidCreateScriptContext
- init
- process
- start node.js
- WillReleaseScriptContext
- dispose
- exit
整合 Node 的异步
- heX
- browser message loop (浏览器进程) 中通知 (IPC) uv_run_once (渲染进程)
- Electron
- Node event loop in worker thread
- run the task in main thread
比较
| 脚本引擎扩展 | 渲染引擎 | V8 API扩展 | 其他宿主 | |
|---|---|---|---|---|
| Pros | 开发成本低 结构简单 可访问内核资源多 |
IDL 规范 接口标准 可访问内核资源多 |
开发成本低 可访问内核资源多 |
功能强大 扩展性 学习成本低 |
| Cons | 接口类型简单 | build 时间长 直接修改内核 |
直接修改内核 | 开发、维护成本高 结构复杂 |
谢谢
nf_wtf
By luyuan
nf_wtf
Native Function, WTF?
