UC主任工程师杨琦在WebReBuild 2013上的分享 via http://tech.uc.cn/

1. PPT模板下载：www.1ppt.com/moban/
Performance on JS

2. Briefing
What's this topic about
杨琦 UCWEB 浏览器研发部

3. 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

4. Variable Scope Management
Scope Chain Matters?

5. 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 ?

6. Scope Chain ?

7. 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

8. 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)

9. Data accessing
Data accessing Matters?

10. Ways of data accessing
Data variables for accessing
– Literal value
– Variable
– Object property
– Array item

11. The old report
Data variables for accessing
– Literal value
– Variable
– Object property
– Array item

12. 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.

13. Loop & Functions
What Matters?

14. 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

15. Functions
Arguments/ Prameters
– args vs params
– Please using parameters.
Function Costs
– Function cost
嗗 Creating stackframes.
嗗 Maintaining local variables.
嗗 GC.
– Try to inline something

16. ASMJS
Not ready!

17. 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!

18. Rock & Roll
Write simple code !
Do not use asmjs now!
Use more hint to ignite the v8/squirrelfish !

19. Q&A

20. THANKS FOR YOUR LISTENING