More Related Content
Viewers also liked (8)
Similar to JavaScript Engine (20)
More from jay li (16)
JavaScript Engine
- 1. JavaScript Engine 2011-04-19
- 2. ? 拔赤 淘宝前端开发工程师 http://jayli.github.com
- 3. 闯补惫补厂肠谤颈辫迟引擎
- 5. 从源码到可执行代码 解释 编译(compiled) (interpreted)
- 6. (function foo(){ source.js(源码) alert(‘helloworld’); })(); 编译 helloworld.exe 01001011101101… (二进制码) 运行 运行时环境 Runtime.exec(‘helloworld.exe’) 编译
- 7. (function foo(){ source.js(源码) alert(‘helloworld’); })(); helloworld.exe 编译&运行 (二进制码) 解释器执行伪代码 Runtime.exec(‘中间机器码’) 运行时环境 解释
- 8. (function foo(){ alert(‘helloworld’); })(); 闯补惫补厂肠谤颈辫迟引擎 编译&运行 Runtime.exec(‘中间机器码’) 运行时环境(浏览器) 解释
- 10. 闯补惫补厂肠谤颈辫迟代码执行的过程 词法分析 语法检查 语法分析 预编译 运行时 运行
- 13. 词法分析 语法检查 语法分析 1,将上下文中var申明 的变量放入”栈”中 并赋值为undefined 预编译 运行时 2,读入”定义”的函数 运行
- 14. alert(a); //会报错吗？ var a = 1;
- 15. 扫描整段代码,将补放入当前上 下文的栈中,赋值为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’); };
- 19. 下面代码的运行结果？
- 20. a(); function a(){ alert(1); } a(); function a(){ alert(2); } a(); var a = function(){ alert(3); }; a();
- 21. 常见问题
- 22. 判断变量存在 //a未声明时报错，不推荐 alert(a === undefined); //推荐 alert(typeof a === ‘undefined’);
- 23. 函数执行前，函数内部变 量均被声明 function(){ alert(a); //显示undefined，不报错 if(false){ var a = 1; //不会执行到，亦被声明 } }()
- 24. 闯蝉执行和浏览器渲染
- 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交由箩蝉引擎编译执行
- 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
- 28. Single UI Rendering Thread
- 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
- 34. Repaint: ? 透明度更改 ? 文字颜色变化 ? 背景颜色变化 ? 背景图片替换
- 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操作 依然会阻断浏览器的渲染，让浏览器看起来像“冷冻”住
- 48. Lovely JavaScript Engine ! 了解她 喜欢她 离不开她
- 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