SlideShare a Scribd company logo
1 of 17
Go With the Reflow Experiments testing browser rendering ,[object Object],[object Object],[object Object],[object Object]
What is Reflow? ,[object Object]
What is Reflow? ,[object Object]
What is Reflow? ,[object Object],[object Object],[object Object]
What is Reflow? ,[object Object],[object Object],[object Object]
What Can Cause a Reflow? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],The box model
What Can Make Reflow Slow? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Testing ,[object Object],[object Object],[object Object],[object Object],[object Object]
Testing ,[object Object],[object Object]
How Slow? http://code.google.com/events/io/sessions/EvenFasterWebsites.html
Reflow Testing 400 Elements, 1000 CSS Rules (#contents *)‏
Reflow Testing #contents div #contents html #contents a #contents * CSS Specificity Matters!
Reflow Testing 2X Difference in Triton prior to IE8 Webkit is very flat = good
Reflow Testing Is the 4X time for the four sides of the box model in IE6,7?
Reflow Testing More To Come! Divs vs Tables Overflow vs. Inline Block Grids “ CSS is Awesome” Gotchas Having fun yet?!
Speed Up Your Reflows ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Thanks ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side OptimizationPatrick Huesler
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. PerformanceSergeyChernyshev
 
AtlasCamp 2014: Static Connect Add-ons
AtlasCamp 2014: Static Connect Add-onsAtlasCamp 2014: Static Connect Add-ons
AtlasCamp 2014: Static Connect Add-onsAtlassian
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17GreeceJS
 
Altitude San Francisco 2018: HTTP Invalidation Workshop
Altitude San Francisco 2018: HTTP Invalidation WorkshopAltitude San Francisco 2018: HTTP Invalidation Workshop
Altitude San Francisco 2018: HTTP Invalidation WorkshopFastly
 
Consuming Web Services in Android
Consuming Web Services in AndroidConsuming Web Services in Android
Consuming Web Services in AndroidDavid Truxall
 
Client side performance analysis
Client side performance analysisClient side performance analysis
Client side performance analysisTsimafei Avilin
 
Concepts on Mean Stack Development
Concepts on Mean Stack DevelopmentConcepts on Mean Stack Development
Concepts on Mean Stack DevelopmentChristopher Sharkey
 
About Caching
About CachingAbout Caching
About CachingWeng Wei
 
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJSModern Static Site with GatsbyJS
Modern Static Site with GatsbyJSRiza Fahmi
 
The State of Rust Web Frameworks
The State of Rust Web FrameworksThe State of Rust Web Frameworks
The State of Rust Web FrameworksIanWagner10
 
How to Start Performance Testing?
How to Start Performance Testing?How to Start Performance Testing?
How to Start Performance Testing?Nebojša Videnov
 
Intro to Front End Development with Angular + Firebase
Intro to Front End Development with Angular + FirebaseIntro to Front End Development with Angular + Firebase
Intro to Front End Development with Angular + FirebaseBen Drucker
 
Back to the future with static site generators
Back to the future with static site generatorsBack to the future with static site generators
Back to the future with static site generatorsChris Ward
 

What's hot (20)

web optimizations
web optimizationsweb optimizations
web optimizations
 
Client Side Optimization
Client Side OptimizationClient Side Optimization
Client Side Optimization
 
Scalability vs. Performance
Scalability vs. PerformanceScalability vs. Performance
Scalability vs. Performance
 
Metarefresh
MetarefreshMetarefresh
Metarefresh
 
AtlasCamp 2014: Static Connect Add-ons
AtlasCamp 2014: Static Connect Add-onsAtlasCamp 2014: Static Connect Add-ons
AtlasCamp 2014: Static Connect Add-ons
 
Meta Refresh 2014
Meta Refresh 2014Meta Refresh 2014
Meta Refresh 2014
 
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17Challenges of angular in production (Tasos Bekos) - GreeceJS #17
Challenges of angular in production (Tasos Bekos) - GreeceJS #17
 
Altitude San Francisco 2018: HTTP Invalidation Workshop
Altitude San Francisco 2018: HTTP Invalidation WorkshopAltitude San Francisco 2018: HTTP Invalidation Workshop
Altitude San Francisco 2018: HTTP Invalidation Workshop
 
Gatsby intro
Gatsby introGatsby intro
Gatsby intro
 
A faster web
A faster webA faster web
A faster web
 
Consuming Web Services in Android
Consuming Web Services in AndroidConsuming Web Services in Android
Consuming Web Services in Android
 
Client side performance analysis
Client side performance analysisClient side performance analysis
Client side performance analysis
 
Concepts on Mean Stack Development
Concepts on Mean Stack DevelopmentConcepts on Mean Stack Development
Concepts on Mean Stack Development
 
About Caching
About CachingAbout Caching
About Caching
 
Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015
 
Modern Static Site with GatsbyJS
Modern Static Site with GatsbyJSModern Static Site with GatsbyJS
Modern Static Site with GatsbyJS
 
The State of Rust Web Frameworks
The State of Rust Web FrameworksThe State of Rust Web Frameworks
The State of Rust Web Frameworks
 
How to Start Performance Testing?
How to Start Performance Testing?How to Start Performance Testing?
How to Start Performance Testing?
 
Intro to Front End Development with Angular + Firebase
Intro to Front End Development with Angular + FirebaseIntro to Front End Development with Angular + Firebase
Intro to Front End Development with Angular + Firebase
 
Back to the future with static site generators
Back to the future with static site generatorsBack to the future with static site generators
Back to the future with static site generators
 

Similar to Go With The Reflow

Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsArtur Cistov
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Artur Cistov
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizationsChris Love
 
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
Rencore Webinar: Developing Secure and Performant JavaScript for SharePointRencore Webinar: Developing Secure and Performant JavaScript for SharePoint
Rencore Webinar: Developing Secure and Performant JavaScript for SharePointRencore
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiMika Josting
 
Technology Trends
Technology TrendsTechnology Trends
Technology TrendsHenry Jacob
 
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice  and guideline refresh! ZZ BC#7.5 asp.net mvc practice  and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh! Chalermpon Areepong
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
Practicing at the Cutting Edge: Learning and Unlearning about Java PerformancePracticing at the Cutting Edge: Learning and Unlearning about Java Performance
Practicing at the Cutting Edge: Learning and Unlearning about Java PerformanceC4Media
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
Web app and more
Web app and moreWeb app and more
Web app and morefaming su
 
SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersElena-Oana Tabaranu
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moiblemarkuskobler
 
Developing a Struts & Tiles application using WebSphere Studio
Developing a Struts & Tiles application using WebSphere StudioDeveloping a Struts & Tiles application using WebSphere Studio
Developing a Struts & Tiles application using WebSphere Studioelliando dias
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance toolsArtur Cistov
 

Similar to Go With The Reflow (20)

Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery InternalsFront-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
 
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
 
JavaScript front end performance optimizations
JavaScript front end performance optimizationsJavaScript front end performance optimizations
JavaScript front end performance optimizations
 
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
Rencore Webinar: Developing Secure and Performant JavaScript for SharePointRencore Webinar: Developing Secure and Performant JavaScript for SharePoint
Rencore Webinar: Developing Secure and Performant JavaScript for SharePoint
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
Sexy React Stack
Sexy React StackSexy React Stack
Sexy React Stack
 
Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Technology Trends
Technology TrendsTechnology Trends
Technology Trends
 
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
ZZ BC#7.5 asp.net mvc practice  and guideline refresh! ZZ BC#7.5 asp.net mvc practice  and guideline refresh!
ZZ BC#7.5 asp.net mvc practice and guideline refresh!
 
Coding the UI
Coding the UICoding the UI
Coding the UI
 
Coding Ui
Coding UiCoding Ui
Coding Ui
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
Practicing at the Cutting Edge: Learning and Unlearning about Java PerformancePracticing at the Cutting Edge: Learning and Unlearning about Java Performance
Practicing at the Cutting Edge: Learning and Unlearning about Java Performance
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
Web app and more
Web app and moreWeb app and more
Web app and more
 
SXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBustersSXSW 2012 JavaScript MythBusters
SXSW 2012 JavaScript MythBusters
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
Developing a Struts & Tiles application using WebSphere Studio
Developing a Struts & Tiles application using WebSphere StudioDeveloping a Struts & Tiles application using WebSphere Studio
Developing a Struts & Tiles application using WebSphere Studio
 
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるIt is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考える
 
Open-source website performance tools
Open-source website performance toolsOpen-source website performance tools
Open-source website performance tools
 

Recently uploaded

AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfSeasiaInfotech2
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...Fwdays
 

Recently uploaded (20)

AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
The Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdfThe Future of Software Development - Devin AI Innovative Approach.pdf
The Future of Software Development - Devin AI Innovative Approach.pdf
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks..."LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
 

Go With The Reflow