Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

UC主任工程师杨琦在WebReBuild 2013上的分享 via

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. PPT模板下载 Performance on JS
  2. 2. Briefing What's this topic about 杨琦 UCWEB 浏览器研发部
  3. 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. 4. Variable Scope Management Scope Chain Matters?
  5. 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. 6. Scope Chain ?
  7. 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. 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. 9. Data accessing Data accessing Matters?
  10. 10. Ways of data accessing Data variables for accessing – Literal value – Variable – Object property – Array item
  11. 11. The old report Data variables for accessing – Literal value – Variable – Object property – Array item
  12. 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. 13. Loop & Functions What Matters?
  14. 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. 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. 16. ASMJS Not ready!
  17. 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. 18. Rock & Roll Write simple code ! Do not use asmjs now! Use more hint to ignite the v8/squirrelfish !
  19. 19. Q&A