SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
PPT模板下载:www.1ppt.com/moban/

Performance on JS
Briefing

What's this topic about
杨琦 UCWEB 浏览器研发部
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
Variable Scope Management

Scope Chain Matters?
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 ?
Scope Chain ?
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
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)
Data accessing

Data accessing Matters?
Ways of data accessing
Data variables for accessing
– Literal value
– Variable
– Object property
– Array item
The old report
Data variables for accessing
– Literal value
– Variable
– Object property
– Array item
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.
Loop & Functions

What Matters?
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
Functions
Arguments/ Prameters
– args vs params
– Please using parameters.

Function Costs
– Function cost
嗗 Creating stackframes.
嗗 Maintaining local variables.
嗗 GC.

– Try to inline something
ASMJS

Not ready!
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!
Rock & Roll
Write simple code !
Do not use asmjs now!
Use more hint to ignite the v8/squirrelfish !
Q&A
THANKS FOR YOUR LISTENING

Weitere ähnliche Inhalte

Was ist angesagt?

The Future starts with a Promise
The Future starts with a PromiseThe Future starts with a Promise
The Future starts with a Promise
Alexandru Nedelcu
 

Was ist angesagt? (20)

The Future starts with a Promise
The Future starts with a PromiseThe Future starts with a Promise
The Future starts with a Promise
 
Lyonrb 12feb2014-sidekiq
Lyonrb 12feb2014-sidekiqLyonrb 12feb2014-sidekiq
Lyonrb 12feb2014-sidekiq
 
Introduction to Functional Reactive Programming
Introduction to Functional Reactive ProgrammingIntroduction to Functional Reactive Programming
Introduction to Functional Reactive Programming
 
Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular Top 10 RxJs Operators in Angular
Top 10 RxJs Operators in Angular
 
Javantura v4 - Java and lambdas and streams - are they better than for loops ...
Javantura v4 - Java and lambdas and streams - are they better than for loops ...Javantura v4 - Java and lambdas and streams - are they better than for loops ...
Javantura v4 - Java and lambdas and streams - are they better than for loops ...
 
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
Javantura v4 - Java or Scala – Web development with Playframework 2.5.x - Kre...
 
Intro to RxJS
Intro to RxJSIntro to RxJS
Intro to RxJS
 
What’s expected in Spring 5
What’s expected in Spring 5What’s expected in Spring 5
What’s expected in Spring 5
 
Variables in Pharo5
Variables in Pharo5Variables in Pharo5
Variables in Pharo5
 
rx-java-presentation
rx-java-presentationrx-java-presentation
rx-java-presentation
 
Reactive Extensions for JavaScript
Reactive Extensions for JavaScriptReactive Extensions for JavaScript
Reactive Extensions for JavaScript
 
Powering machine learning workflows with Apache Airflow and Python
Powering machine learning workflows with Apache Airflow and PythonPowering machine learning workflows with Apache Airflow and Python
Powering machine learning workflows with Apache Airflow and Python
 
Reactive java - Reactive Programming + RxJava
Reactive java - Reactive Programming + RxJavaReactive java - Reactive Programming + RxJava
Reactive java - Reactive Programming + RxJava
 
Introducing Apache Airflow and how we are using it
Introducing Apache Airflow and how we are using itIntroducing Apache Airflow and how we are using it
Introducing Apache Airflow and how we are using it
 
Apollo server II
Apollo server IIApollo server II
Apollo server II
 
Reactive programming with Rxjava
Reactive programming with RxjavaReactive programming with Rxjava
Reactive programming with Rxjava
 
Apache Airflow
Apache AirflowApache Airflow
Apache Airflow
 
Apache Airflow Introduction
Apache Airflow IntroductionApache Airflow Introduction
Apache Airflow Introduction
 
OASGraph LoopBack 4 Integration
OASGraph LoopBack 4 IntegrationOASGraph LoopBack 4 Integration
OASGraph LoopBack 4 Integration
 
New in Spring Framework 5.0: Functional Web Framework
New in Spring Framework 5.0: Functional Web FrameworkNew in Spring Framework 5.0: Functional Web Framework
New in Spring Framework 5.0: Functional Web Framework
 

Andere mochten auch

Mapa planificación.
Mapa planificación.Mapa planificación.
Mapa planificación.
Dayana Mendez
 
гуп презентация нефт. промышленность
гуп презентация нефт. промышленностьгуп презентация нефт. промышленность
гуп презентация нефт. промышленность
gcmoo
 
Technology & Social Interaction
Technology & Social InteractionTechnology & Social Interaction
Technology & Social Interaction
QuadBee Aderonke
 
Mapa de los recursos audiovisuales
Mapa de los recursos audiovisualesMapa de los recursos audiovisuales
Mapa de los recursos audiovisuales
Dayana Mendez
 
Actividades de tercero y cuarto primaria
Actividades de tercero y cuarto primariaActividades de tercero y cuarto primaria
Actividades de tercero y cuarto primaria
Yoselin Hernández P
 

Andere mochten auch (17)

375
375375
375
 
Sr. Jorge Mujíca, Director de Tecnologías (CTO) de IBM Chile, "IBM Watson: e...
 Sr. Jorge Mujíca, Director de Tecnologías (CTO) de IBM Chile, "IBM Watson: e... Sr. Jorge Mujíca, Director de Tecnologías (CTO) de IBM Chile, "IBM Watson: e...
Sr. Jorge Mujíca, Director de Tecnologías (CTO) de IBM Chile, "IBM Watson: e...
 
Dell PowerEdge Porfolio 2013
Dell PowerEdge Porfolio 2013Dell PowerEdge Porfolio 2013
Dell PowerEdge Porfolio 2013
 
Mapa planificación.
Mapa planificación.Mapa planificación.
Mapa planificación.
 
Bomba de veneno(3)
Bomba de veneno(3)Bomba de veneno(3)
Bomba de veneno(3)
 
Reaching 100s of milllions at WWF
Reaching 100s of milllions at WWFReaching 100s of milllions at WWF
Reaching 100s of milllions at WWF
 
Incoterm
IncotermIncoterm
Incoterm
 
гуп презентация нефт. промышленность
гуп презентация нефт. промышленностьгуп презентация нефт. промышленность
гуп презентация нефт. промышленность
 
Hader bustos vacation
Hader bustos vacationHader bustos vacation
Hader bustos vacation
 
El rubi lectura y escritura
El rubi   lectura y escrituraEl rubi   lectura y escritura
El rubi lectura y escritura
 
Technology & Social Interaction
Technology & Social InteractionTechnology & Social Interaction
Technology & Social Interaction
 
Mapa de los recursos audiovisuales
Mapa de los recursos audiovisualesMapa de los recursos audiovisuales
Mapa de los recursos audiovisuales
 
7. Mensaje de Emanuel Swedenborg
7. Mensaje de Emanuel Swedenborg7. Mensaje de Emanuel Swedenborg
7. Mensaje de Emanuel Swedenborg
 
Egipat
Egipat Egipat
Egipat
 
Birthday celebrators for the month of October- Tondo High School Teachers Tea...
Birthday celebrators for the month of October- Tondo High School Teachers Tea...Birthday celebrators for the month of October- Tondo High School Teachers Tea...
Birthday celebrators for the month of October- Tondo High School Teachers Tea...
 
Actividades de tercero y cuarto primaria
Actividades de tercero y cuarto primariaActividades de tercero y cuarto primaria
Actividades de tercero y cuarto primaria
 
Chemical & hygiene systems pdf document aqua middle east fzc
Chemical & hygiene systems pdf document aqua middle east fzcChemical & hygiene systems pdf document aqua middle east fzc
Chemical & hygiene systems pdf document aqua middle east fzc
 

Ähnlich wie 面向引擎——编写高效率JS

2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
2015 01-17 Lambda Architecture with Apache Spark, NextML Conference2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
DB Tsai
 
Java Serialization Facts and Fallacies
Java Serialization Facts and FallaciesJava Serialization Facts and Fallacies
Java Serialization Facts and Fallacies
Roman Elizarov
 
Java bytecode and classes
Java bytecode and classesJava bytecode and classes
Java bytecode and classes
yoavwix
 
Pig on Tez - Low Latency ETL with Big Data
Pig on Tez - Low Latency ETL with Big DataPig on Tez - Low Latency ETL with Big Data
Pig on Tez - Low Latency ETL with Big Data
DataWorks Summit
 

Ähnlich wie 面向引擎——编写高效率JS (20)

Build Java Web Application Using Apache Struts
Build Java Web Application Using Apache Struts Build Java Web Application Using Apache Struts
Build Java Web Application Using Apache Struts
 
Understanding Framework Architecture using Eclipse
Understanding Framework Architecture using EclipseUnderstanding Framework Architecture using Eclipse
Understanding Framework Architecture using Eclipse
 
Flink Forward SF 2017: Malo Deniélou - No shard left behind: Dynamic work re...
Flink Forward SF 2017: Malo Deniélou -  No shard left behind: Dynamic work re...Flink Forward SF 2017: Malo Deniélou -  No shard left behind: Dynamic work re...
Flink Forward SF 2017: Malo Deniélou - No shard left behind: Dynamic work re...
 
Vue.js basics
Vue.js basicsVue.js basics
Vue.js basics
 
Scale up your thinking
Scale up your thinkingScale up your thinking
Scale up your thinking
 
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
Testing Vue Apps with Cypress.io (STLJS Meetup April 2018)
 
2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
2015 01-17 Lambda Architecture with Apache Spark, NextML Conference2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
2015 01-17 Lambda Architecture with Apache Spark, NextML Conference
 
Camunda BPM 7.2: Performance and Scalability (English)
Camunda BPM 7.2: Performance and Scalability (English)Camunda BPM 7.2: Performance and Scalability (English)
Camunda BPM 7.2: Performance and Scalability (English)
 
Introducing spring
Introducing springIntroducing spring
Introducing spring
 
Java Serialization Facts and Fallacies
Java Serialization Facts and FallaciesJava Serialization Facts and Fallacies
Java Serialization Facts and Fallacies
 
apidays Paris 2022 - Of graphQL, DX friction, and surgical monolithectomy, Fr...
apidays Paris 2022 - Of graphQL, DX friction, and surgical monolithectomy, Fr...apidays Paris 2022 - Of graphQL, DX friction, and surgical monolithectomy, Fr...
apidays Paris 2022 - Of graphQL, DX friction, and surgical monolithectomy, Fr...
 
Erjang - A journey into Erlang-land
Erjang - A journey into Erlang-landErjang - A journey into Erlang-land
Erjang - A journey into Erlang-land
 
Malo Denielou - No shard left behind: Dynamic work rebalancing in Apache Beam
Malo Denielou - No shard left behind: Dynamic work rebalancing in Apache BeamMalo Denielou - No shard left behind: Dynamic work rebalancing in Apache Beam
Malo Denielou - No shard left behind: Dynamic work rebalancing in Apache Beam
 
Java bytecode and classes
Java bytecode and classesJava bytecode and classes
Java bytecode and classes
 
Java scriptforjavadev part2a
Java scriptforjavadev part2aJava scriptforjavadev part2a
Java scriptforjavadev part2a
 
Nodejs from zero to hero
Nodejs from zero to heroNodejs from zero to hero
Nodejs from zero to hero
 
Pig on Tez - Low Latency ETL with Big Data
Pig on Tez - Low Latency ETL with Big DataPig on Tez - Low Latency ETL with Big Data
Pig on Tez - Low Latency ETL with Big Data
 
G pars
G parsG pars
G pars
 
AJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdfAJS UNIT-1 2021-converted.pdf
AJS UNIT-1 2021-converted.pdf
 
TorqueBox at DC:JBUG - November 2011
TorqueBox at DC:JBUG - November 2011TorqueBox at DC:JBUG - November 2011
TorqueBox at DC:JBUG - November 2011
 

Kürzlich hochgeladen

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Kürzlich hochgeladen (20)

🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 

面向引擎——编写高效率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
  • 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 ?
  • 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)
  • 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.
  • 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
  • 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