• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Engine
 

JavaScript Engine

on

  • 2,189 views

js引擎

js引擎

Statistics

Views

Total Views
2,189
Views on SlideShare
2,128
Embed Views
61

Actions

Likes
9
Downloads
99
Comments
1

2 Embeds 61

http://wiki.ued.taobao.net 58
http://www.techgig.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 谢谢分享。Tags js
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Engine JavaScript Engine Presentation Transcript

    • JavaScript Engine 2011-04-19
    • • 拔赤 淘宝前端开发工程师 http://jayli.github.com
    • JavaScript引擎
    • V8CarakanJaegerMonkeyNitroJScript
    • 从源码到可执行代码 解释 编译(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 是解释型语言
    • 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赋值为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(){//运行时变量赋值 alert(‘helloworld’);};
    • 下面代码的运行结果?
    • 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 <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的渲染
    • 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 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 ThreadRenderUI 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 setTimeout(function(){ $.write(‘helloworld’); script },100); div </script></div> 浏览器继续渲染html<div>doc</div></body></html>
    • … 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渲染没有中断
    • … body<div id=“J”> <script> div#J setTimeout(function(){ 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