JavaScript Engine

JavaScript Engine

2011-04-19

• 拔赤
淘宝前端开发工程师
http://jayli.github.com

V8
Carakan
JaegerMonkey
Nitro
JScript

从源码到可执行代码

解释
编译(compiled)
(interpreted)

(function foo(){
source.js(源码) alert(‘helloworld’);
})();

编译
helloworld.exe 01001011101101…
(二进制码)
运行

运行时环境 Runtime.exec(‘helloworld.exe’)

编译

(function foo(){
source.js(源码) alert(‘helloworld’);
})();

helloworld.exe 编译&运行
(二进制码)

解释器执行伪代码 Runtime.exec(‘中间机器码’)

运行时环境

解释

(function foo(){
alert(‘helloworld’);
})();

JavaScript引擎
编译&运行

Runtime.exec(‘中间机器码’)

运行时环境(浏览器)

解释

JavaScript代码执行的过程

词法分析

语法检查
语法分析

预编译
运行时
运行

执行”0=1=2”

在语法检查阶段报错
这是一个语法错误
程序没有开始运行

执行”a=b=c”

通过了语法检查
在运行时报错
程序已经开始运行

词法分析

语法检查
语法分析
1,将上下文中var申明
的变量放入”栈”中
并赋值为undefined
预编译
运行时 2,读入”定义”的函数
运行

alert(a); //会报错吗？
var a = 1;

扫描整段代码,将a放入当前上
下文的栈中,赋值为undefined

在栈中找到a并得到值undefined
alert(a); 弹出”undefined”
var a = 1;
将a赋值为1

局部变量的预编译

a();
function a(){ 2，预编译读入a的定义
alert(‘Tom’);
}
var a = function(){
alert(‘Jim’);
1，变量a入栈
};
a();

函数的预编译

a();
function a(){ 执行a()，弹出Tom
alert(‘Tom’);
}
var a = function(){
alert(‘Jim’); a被重新赋值
};
a(); 执行a()，弹出Jim

编译后的运行

function a(){//预编译定义,运行时略过
}
var a = function(){//预编译声明，运行时赋值
};
a = function(){//运行时变量赋值
};

下面代码的运行结果？

a();
function a(){
alert(1);
}
a();
function a(){
alert(2);
}
a();
var a = function(){
alert(3);
};
a();

判断变量存在

//a未声明时报错，不推荐
alert(a === undefined);

//推荐
alert(typeof a === ‘undefined’);

函数执行前，函数内部变
量均被声明

function(){
alert(a); //显示undefined，不报错
if(false){
var a = 1; //不会执行到，亦被声明
}
}()

<!DOCTYPE HTML> document
<html lang="zh">
<head>head</head> head
<body>
body
<div id=“J”>
<script>
div#J
$.write(‘helloworld’);
</script> script

</div>
… 渲染出Script节点
</body>
浏览器暂停渲染HTML
</html> 将script交由js引擎编译执行

<!DOCTYPE HTML> document

<html lang="zh">
<head>head</head> head

<body>
body
<div id=“J”>
<script> div#J

$.write(‘helloworld’);
script
</script>
</div> Js引擎创建了
textNode
textNode
…
</body> Js引擎执行代码段结束
</html> 将渲染主动权交给浏览器继续渲染HTML

阻塞：
Js的执行会中断HTML的渲染

Time
UI Rendering Thread

2，UI update

DOM
1，构建出DOM

Time
UI Rendering Thread

RenderUI

渲染出此时的Dom

DOM

Time
UI Rendering Thread

RenderUI exec JS

3,JS脚本新增了DOM节点

DOM

Time
UI Rendering Thread

RenderUI exec JS RenderUI

4，UI update

DOM

Time
UI Rendering Thread

RenderUI UIJS RenderUI
exec Update
• Repaint4，UI update

• Reflow
DOM

Repaint:
• 透明度更改
• 文字颜色变化
• 背景颜色变化
• 背景图片替换

Reflow:
• 页面渲染过程中
• Dom结构变化
• 浏览器窗口大小改变
• 布局变化

<div id=“J”>
<script>
$(‘J’).css(‘color’,’red’);
</script>
</div> Repaint

<div id=“J”>
<script>
$(‘J’).append(‘<div>txt</div>’);
</script>
</div> Reflow

减少Reflow/paint：性能攸关的大事！

<div id=“J”>
<script>
for(i=0;i<100;i++)
$(‘J’).append(‘<div>’+i+’</div>’);
</script>
</div> Reflow * 100 !

Time
UI Rendering Thread

RenderUI Run js for long time RenderUI

UI update
UI 没有反应…

DOM

<div id=“J”>
<script>
for(i=0,str=‘’;i<100;i++){
str+=‘<div>’+i+’</div>’;
}
$(‘J’).append(str);
</script>
</div> Reflow * 1 !

避免阻塞：同样性能攸关的大事
（异步执行JavaScript)

…
body
<div id=“J”>
<script>
div#J
setTimeout(function(){
$.write(‘helloworld’); script

},100);
</script> Js引擎开启了定时器
</div>
<div>doc</div>
</body>
</html>
Js引擎只启动了定时器，没有”write”操作
浏览器可以很快获得DOM渲染权，继续渲染HTML

…
body
<div id=“J”>
<script>
div#J

},100);
div
</script>
</div> 浏览器继续渲染html
<div>doc</div>
</body>
</html>

…
body
<div id=“J”>
<script>
div#J

},100);
div 100ms
</script> 定时器到时,插入dom
</div> textNode

<div>doc</div>
</body>
</html> 从定时器开启，到write节点完成
中间的HTML渲染没有中断

… body
<div id=“J”>
<script> div#J

script
while(true){
$.write(‘helloworld’); div 100ms

}
textNode
},100); 异步也不是万能的
…
</script>
</div>
… Js中低效的Dom操作
依然会阻断浏览器的渲染，让浏览器看起来像“冷冻”住

异步加载JS 减少阻塞
Js不要频繁读写Dom 减少reflow/paint

Lovely JavaScript Engine !

了解她
喜欢她
离不开她

ref

• http://www.slideshare.net/nzakas/high-
performance-javascript-jquery-conference-
sf-bay-area-2010-3843763
• http://www.slideshare.net/madrobby/extr
eme-javascript-performance

JavaScript Engine

Recommended

More Related Content

Similar to JavaScript Engine (20)

More from jay li (20)

JavaScript Engine