More Related Content Similar to JavaScript Engine Similar to JavaScript Engine (20) 8. (function foo(){
alert(‘helloworld’);
})();
JavaScript引擎
编译&运行
Runtime.exec(‘中间机器码’)
运行时环境(浏览器)
解释
13. 词法分析
语法检查
语法分析
1,将上下文中var申明
的变量放入”栈”中
并赋值为undefined
预编译
运行时 2,读入”定义”的函数
运行
15. 扫描整段代码,将a放入当前上
下文的栈中,赋值为undefined
在栈中找到a并得到值undefined
alert(a); 弹出”undefined”
var a = 1;
将a赋值为1
局部变量的预编译
16. a();
function a(){ 2，预编译读入a的定义
alert(‘Tom’);
}
var a = function(){
alert(‘Jim’);
1，变量a入栈
};
a();
函数的预编译
17. a();
function a(){ 执行a()，弹出Tom
alert(‘Tom’);
}
var a = function(){
alert(‘Jim’); a被重新赋值
};
a(); 执行a()，弹出Jim
编译后的运行
18. function a(){//预编译定义,运行时略过
alert(‘helloworld’);
}
var a = function(){//预编译声明，运行时赋值
alert(‘helloworld’);
};
a = function(){//运行时变量赋值
alert(‘helloworld’);
};
20. a();
function a(){
alert(1);
}
a();
function a(){
alert(2);
}
a();
var a = function(){
alert(3);
};
a();
23. 函数执行前，函数内部变
量均被声明
function(){
alert(a); //显示undefined，不报错
if(false){
var a = 1; //不会执行到，亦被声明
}
}()
25. <!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引擎编译执行
26. <!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
29. Time
UI Rendering Thread
2，UI update
DOM
1，构建出DOM
30. Time
UI Rendering Thread
RenderUI
渲染出此时的Dom
DOM
31. Time
UI Rendering Thread
RenderUI exec JS
3,JS脚本新增了DOM节点
DOM
32. Time
UI Rendering Thread
RenderUI exec JS RenderUI
4，UI update
DOM
33. Time
UI Rendering Thread
RenderUI UIJS RenderUI
exec Update
• Repaint4，UI update
• Reflow
DOM
35. Reflow:
• 页面渲染过程中
• Dom结构变化
• 浏览器窗口大小改变
• 布局变化
36. <div id=“J”>
<script>
$(‘J’).css(‘color’,’red’);
</script>
</div> Repaint
37. <div id=“J”>
<script>
$(‘J’).append(‘<div>txt</div>’);
</script>
</div> Reflow
39. <div id=“J”>
<script>
for(i=0;i<100;i++)
$(‘J’).append(‘<div>’+i+’</div>’);
</script>
</div> Reflow * 100 !
40. Time
UI Rendering Thread
RenderUI Run js for long time RenderUI
UI update
UI 没有反应…
DOM
41. <div id=“J”>
<script>
for(i=0,str=‘’;i<100;i++){
str+=‘<div>’+i+’</div>’;
}
$(‘J’).append(str);
</script>
</div> Reflow * 1 !
43. …
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
44. …
body
<div id=“J”>
<script>
div#J
setTimeout(function(){
$.write(‘helloworld’); script
},100);
div
</script>
</div> 浏览器继续渲染html
<div>doc</div>
</body>
</html>
45. …
body
<div id=“J”>
<script>
div#J
setTimeout(function(){
$.write(‘helloworld’); script
},100);
div 100ms
</script> 定时器到时,插入dom
</div> textNode
<div>doc</div>
</body>
</html> 从定时器开启，到write节点完成
中间的HTML渲染没有中断
46. … body
<div id=“J”>
<script> div#J
setTimeout(function(){
script
while(true){
$.write(‘helloworld’); div 100ms
}
textNode
},100); 异步也不是万能的
…
</script>
</div>
… Js中低效的Dom操作
依然会阻断浏览器的渲染，让浏览器看起来像“冷冻”住
