perf onjs final

20
PPT 模模模模www.1ppt.com/moban/ Performance on JS Performance on JS

Upload: qi-yang

Post on 14-Jun-2015

46 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Perf onjs final

PPT 模板下载: www.1ppt.com/moban/

Performance on JSPerformance on JS

Page 2: Perf onjs final

What's this topic about

Briefing

杨琦 UCWEB 浏览器研发部

Page 3: Perf onjs final

Topics

Scope:– Single-page application

– Ajax and Web 2.0

– Download and execute more code as you interact

Topics:– Variable Scope Management

– Data accessing

– Loops & Functions

– ASMJS

Page 4: Perf onjs final

Scope Chain Matters?

Variable Scope Management

Page 5: Perf onjs final

Scope Chain ?

How to find out a variable ?– Variable inside javascript: Data Reference.

– How to locate a variable in functions: From Local to Global

– What does the VM do before execution a function?• Create a stackframe before getting into functions

• Reference all the outer function variables by pointers to array in stackframe

• Referencing local variables in stackframe

• Push stackframe into vm's execution context

• All the stackframes => Scope Chain

– What does the VM do during execution ?

Page 6: Perf onjs final

Scope Chain ?

Page 7: Perf onjs final

Matters ?

It really matters?– Testing cases:

• scope chain lookups

• Scope Chain

• Simple Test

– ResuIt: It does NOT matter !

Special cases– try/catch

– try/catch with fail

Page 8: Perf onjs final

Scope Chain ?

Why ?– Just in time compiler!

• All the variables is looked up inside the scope chain as less times as possible.

• Once referenced, cached it!

• Check the type & avaibilities on the fly with minus cost (usually assembly code)

– The state of art javascript vm supporting jit!

What matters ?– Calling slower routings (exception blow up)

– Variable type changed during executions (delete a.b)

Page 9: Perf onjs final

Data accessing Matters?

Data accessing

Page 10: Perf onjs final

Ways of data accessing

Data variables for accessing– Literal value

– Variable

– Object property

– Array item

Page 11: Perf onjs final

The old report

Data variables for accessing– Literal value

– Variable

– Object property

– Array item

Page 12: Perf onjs final

The latest report

Data variables for accessing– Variable vs Object property

• Nearly the same. Thanks to hidden class and jit.

• A hidden class is some hint that provide the jit how to access the property data inside a object.

– Array item vs Object property• Object is faster than array in dealing with sparse data.

Page 13: Perf onjs final

What Matters?

Loop & Functions

Page 14: Perf onjs final

Loops

for (a in b) / forEach– Loops tests– for (A in B )?

• Same:– Pickout A from B each loop– Create reference on the fly

• Diff:– foreach use iterator & generator – for-in track whether this property is enumable.

– Using normal while/for loop will be better.

For / While– For vs While– It is nearly the same

Page 15: Perf onjs final

Functions

Arguments/ Prameters– args vs params

– Please using parameters.

Function Costs– Function cost

• Creating stackframes.

• Maintaining local variables.

• GC.

– Try to inline something

Page 16: Perf onjs final

Not ready!

ASMJS

Page 17: Perf onjs final

ASMJS

ASMJS ?– an extraordinarily optimizable, low-level subset of JavaScript

Performance Boost?– fib normal vs asm

• Using asmjs slower! (Due to compilation overhead)

• DFG etc is enough to find out the data types.

– asm vs no-asm

Conclusion– Better NOT use it now!

Page 18: Perf onjs final

Rock & Roll

Write simple code !

Do not use asmjs now!

Use more hint to ignite the v8/squirrelfish !

Page 19: Perf onjs final

Q&A

Page 20: Perf onjs final

THANKS FOR YOUR LISTENING