0
JavaScript Engine                    2011-04-19
• 拔赤 淘宝前端开发工程师 http://jayli.github.com
JavaScript引擎
V8CarakanJaegerMonkeyNitroJScript
从源码到可执行代码     解释                编译(compiled)(interpreted)
(function foo(){source.js(源码)           alert(‘helloworld’);                   })();                                  编译he...
(function foo(){source.js(源码)         alert(‘helloworld’);                 })();helloworld.exe                  编译&运行  (二进...
(function foo(){                    alert(‘helloworld’);               })();JavaScript引擎                             编译&运行...
JavaScript 是解释型语言
JavaScript代码执行的过程    词法分析           语法检查    语法分析     预编译            运行时     运行
执行”0=1=2”在语法检查阶段报错 这是一个语法错误 程序没有开始运行
执行”a=b=c”通过了语法检查 在运行时报错程序已经开始运行
词法分析       语法检查语法分析              1,将上下文中var申明                 的变量放入”栈”中               并赋值为undefined预编译        运行时    2,读入”...
alert(a); //会报错吗?var a = 1;
扫描整段代码,将a放入当前上               下文的栈中,赋值为undefined               在栈中找到a并得到值undefinedalert(a);      弹出”undefined”var 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(){//预编译定义,运行时略过   alert(‘helloworld’);}var a = function(){//预编译声明,运行时赋值   alert(‘helloworld’);};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; //不会执行到,亦被声明  }}()
Js执行和浏览器渲染
<!DOCTYPE HTML>       document<html lang="zh">  <head>head</head>            head<body>                               body...
<!DOCTYPE HTML>       document<html lang="zh">  <head>head</head>            head<body>                               body...
阻塞:Js的执行会中断HTML的渲染
Single UI Rendering Thread
Time                      UI Rendering Thread        2,UI update DOM1,构建出DOM
Time                 UI Rendering ThreadRenderUI     渲染出此时的Dom DOM
Time                      UI Rendering ThreadRenderUI    exec JS                  3,JS脚本新增了DOM节点           DOM
Time                     UI Rendering ThreadRenderUI   exec JS   RenderUI                        4,UI update           DOM
Time                     UI Rendering ThreadRenderUI    UIJS RenderUI           exec Update              • Repaint4,UI upd...
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 * ...
Time                       UI Rendering ThreadRenderUI   Run js for long time   RenderUI                                  ...
<div id=“J”>  <script>  for(i=0,str=‘’;i<100;i++){     str+=‘<div>’+i+’</div>’;  }  $(‘J’).append(str);  </script></div>  ...
避免阻塞:同样性能攸关的大事 (异步执行JavaScript)
…                         body<div id=“J”>  <script>                              div#J  setTimeout(function(){     $.writ...
…                         body<div id=“J”>  <script>                                div#J  setTimeout(function(){     $.wr...
…                         body<div id=“J”>  <script>                              div#J  setTimeout(function(){     $.writ...
…                       body<div id=“J”>  <script>                   div#J  setTimeout(function(){                        ...
异步加载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://w...
JavaScript Engine
Upcoming SlideShare
Loading in...5
×

JavaScript Engine

2,738

Published on

js引擎

Published in: Technology
1 Comment
14 Likes
Statistics
Notes
  • 谢谢分享。Tags js
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,738
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
134
Comments
1
Likes
14
Embeds 0
No embeds

No notes for slide

Transcript of "JavaScript Engine"

  1. 1. JavaScript Engine 2011-04-19
  2. 2. • 拔赤 淘宝前端开发工程师 http://jayli.github.com
  3. 3. JavaScript引擎
  4. 4. V8CarakanJaegerMonkeyNitroJScript
  5. 5. 从源码到可执行代码 解释 编译(compiled)(interpreted)
  6. 6. (function foo(){source.js(源码) alert(‘helloworld’); })(); 编译helloworld.exe 01001011101101… (二进制码) 运行 运行时环境 Runtime.exec(‘helloworld.exe’) 编译
  7. 7. (function foo(){source.js(源码) alert(‘helloworld’); })();helloworld.exe 编译&运行 (二进制码)解释器执行伪代码 Runtime.exec(‘中间机器码’) 运行时环境 解释
  8. 8. (function foo(){ alert(‘helloworld’); })();JavaScript引擎 编译&运行 Runtime.exec(‘中间机器码’) 运行时环境(浏览器) 解释
  9. 9. JavaScript 是解释型语言
  10. 10. JavaScript代码执行的过程 词法分析 语法检查 语法分析 预编译 运行时 运行
  11. 11. 执行”0=1=2”在语法检查阶段报错 这是一个语法错误 程序没有开始运行
  12. 12. 执行”a=b=c”通过了语法检查 在运行时报错程序已经开始运行
  13. 13. 词法分析 语法检查语法分析 1,将上下文中var申明 的变量放入”栈”中 并赋值为undefined预编译 运行时 2,读入”定义”的函数 运行
  14. 14. alert(a); //会报错吗?var a = 1;
  15. 15. 扫描整段代码,将a放入当前上 下文的栈中,赋值为undefined 在栈中找到a并得到值undefinedalert(a); 弹出”undefined”var a = 1; 将a赋值为1 局部变量的预编译
  16. 16. a();function a(){ 2,预编译读入a的定义 alert(‘Tom’);}var a = function(){ alert(‘Jim’); 1,变量a入栈};a(); 函数的预编译
  17. 17. a();function a(){ 执行a(),弹出Tom alert(‘Tom’);}var a = function(){ alert(‘Jim’); a被重新赋值};a(); 执行a(),弹出Jim 编译后的运行
  18. 18. function a(){//预编译定义,运行时略过 alert(‘helloworld’);}var a = function(){//预编译声明,运行时赋值 alert(‘helloworld’);};a = function(){//运行时变量赋值 alert(‘helloworld’);};
  19. 19. 下面代码的运行结果?
  20. 20. a();function a(){ alert(1);}a();function a(){ alert(2);}a();var a = function(){ alert(3);};a();
  21. 21. 常见问题
  22. 22. 判断变量存在//a未声明时报错,不推荐alert(a === undefined);//推荐alert(typeof a === ‘undefined’);
  23. 23. 函数执行前,函数内部变 量均被声明function(){ alert(a); //显示undefined,不报错 if(false){ var a = 1; //不会执行到,亦被声明 }}()
  24. 24. Js执行和浏览器渲染
  25. 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. 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
  27. 27. 阻塞:Js的执行会中断HTML的渲染
  28. 28. Single UI Rendering Thread
  29. 29. Time UI Rendering Thread 2,UI update DOM1,构建出DOM
  30. 30. Time UI Rendering ThreadRenderUI 渲染出此时的Dom DOM
  31. 31. Time UI Rendering ThreadRenderUI exec JS 3,JS脚本新增了DOM节点 DOM
  32. 32. Time UI Rendering ThreadRenderUI exec JS RenderUI 4,UI update DOM
  33. 33. Time UI Rendering ThreadRenderUI UIJS RenderUI exec Update • Repaint4,UI update • Reflow DOM
  34. 34. Repaint: • 透明度更改 • 文字颜色变化 • 背景颜色变化 • 背景图片替换
  35. 35. Reflow:• 页面渲染过程中• Dom结构变化• 浏览器窗口大小改变• 布局变化
  36. 36. <div id=“J”> <script> $(‘J’).css(‘color’,’red’); </script></div> Repaint
  37. 37. <div id=“J”> <script> $(‘J’).append(‘<div>txt</div>’); </script></div> Reflow
  38. 38. 减少Reflow/paint:性能攸关的大事!
  39. 39. <div id=“J”> <script> for(i=0;i<100;i++) $(‘J’).append(‘<div>’+i+’</div>’); </script></div> Reflow * 100 !
  40. 40. Time UI Rendering ThreadRenderUI Run js for long time RenderUI UI update UI 没有反应… DOM
  41. 41. <div id=“J”> <script> for(i=0,str=‘’;i<100;i++){ str+=‘<div>’+i+’</div>’; } $(‘J’).append(str); </script></div> Reflow * 1 !
  42. 42. 避免阻塞:同样性能攸关的大事 (异步执行JavaScript)
  43. 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. 44. … body<div id=“J”> <script> div#J setTimeout(function(){ $.write(‘helloworld’); script },100); div </script></div> 浏览器继续渲染html<div>doc</div></body></html>
  45. 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. 46. … body<div id=“J”> <script> div#J setTimeout(function(){ script while(true){ $.write(‘helloworld’); div 100ms } textNode },100); 异步也不是万能的 … </script></div>… Js中低效的Dom操作依然会阻断浏览器的渲染,让浏览器看起来像“冷冻”住
  47. 47. 异步加载JS 减少阻塞Js不要频繁读写Dom 减少reflow/paint
  48. 48. Lovely JavaScript Engine ! 了解她 喜欢她 离不开她
  49. 49. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×