SlideShare ist ein Scribd-Unternehmen logo
1 von 9
Downloaden Sie, um offline zu lesen
OPTIMIZING 

INFINITE SCROLL
Paweł Sułkowski
Symptoms
Lost smoothness of the scroll
Problem
Large amount of elements in the DOM
along with too many layout’s recalculations / re-paintings



More about what forces layout/reflow: gist.github.com/paulirish/5d52fb081b3570c81e3a
Solutions
Keep the DOM clean by removing redundant elements
or
Hide not visible elements to remove them from
browser’s render-tree
Algorithm
Add an event handler to onscroll event and set
„display: none” property to elements which are not
visible
Note
If the dimension of an element is not known before rendering don’t forget about caching once you get it.
Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski
Algorithm (2)
Add an event handler to onscroll event and set
„display: none” property to batch of elements which
are not visible
Note
If the dimension of an element is not known before rendering don’t forget about caching once you get it.
Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski
Thanks

Weitere ähnliche Inhalte

Ähnlich wie Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski

Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentMediacurrent
 
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo Kumpera
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo KumperaAdvanced Memory Management on iOS and Android - Mark Probst and Rodrigo Kumpera
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo KumperaXamarin
 
Visualizing Content with Display Suite
Visualizing Content with Display SuiteVisualizing Content with Display Suite
Visualizing Content with Display SuiteMatthias Vandermaesen
 
IBM Drupal Users Group Discussion on Managing and Deploying Configuration
IBM Drupal Users Group Discussion on Managing and Deploying ConfigurationIBM Drupal Users Group Discussion on Managing and Deploying Configuration
IBM Drupal Users Group Discussion on Managing and Deploying ConfigurationDevelopment Seed
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015Brian Coffey
 
Features everywhere
Features everywhere Features everywhere
Features everywhere Mediacurrent
 
Drupal For Dummies
Drupal For DummiesDrupal For Dummies
Drupal For DummiesKoen Delvaux
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Raymond Camden
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1benDesigning
 
Gitter marionette deck
Gitter marionette deckGitter marionette deck
Gitter marionette deckMike Bartlett
 
WPF for developers - optimizing your WPF application
WPF for developers - optimizing your WPF applicationWPF for developers - optimizing your WPF application
WPF for developers - optimizing your WPF applicationTamir Khason
 
Speeding up mobile web apps
Speeding up mobile web appsSpeeding up mobile web apps
Speeding up mobile web appsIvano Malavolta
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerFITC
 
Lightning Components Workshop
Lightning Components WorkshopLightning Components Workshop
Lightning Components WorkshopGordon Bockus
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applicationsIvano Malavolta
 

Ähnlich wie Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski (20)

Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo Kumpera
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo KumperaAdvanced Memory Management on iOS and Android - Mark Probst and Rodrigo Kumpera
Advanced Memory Management on iOS and Android - Mark Probst and Rodrigo Kumpera
 
Features++
Features++Features++
Features++
 
Visualizing Content with Display Suite
Visualizing Content with Display SuiteVisualizing Content with Display Suite
Visualizing Content with Display Suite
 
IBM Drupal Users Group Discussion on Managing and Deploying Configuration
IBM Drupal Users Group Discussion on Managing and Deploying ConfigurationIBM Drupal Users Group Discussion on Managing and Deploying Configuration
IBM Drupal Users Group Discussion on Managing and Deploying Configuration
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015
 
Features everywhere
Features everywhere Features everywhere
Features everywhere
 
Drupal For Dummies
Drupal For DummiesDrupal For Dummies
Drupal For Dummies
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1
 
Using Features
Using FeaturesUsing Features
Using Features
 
Gitter marionette deck
Gitter marionette deckGitter marionette deck
Gitter marionette deck
 
WPF for developers - optimizing your WPF application
WPF for developers - optimizing your WPF applicationWPF for developers - optimizing your WPF application
WPF for developers - optimizing your WPF application
 
Speeding up mobile web apps
Speeding up mobile web appsSpeeding up mobile web apps
Speeding up mobile web apps
 
Reaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and PolymerReaching for the Future with Web Components and Polymer
Reaching for the Future with Web Components and Polymer
 
Lightning Components Workshop
Lightning Components WorkshopLightning Components Workshop
Lightning Components Workshop
 
Developing maintainable Cordova applications
Developing maintainable Cordova applicationsDeveloping maintainable Cordova applications
Developing maintainable Cordova applications
 
test
testtest
test
 
GWT widget development
GWT widget developmentGWT widget development
GWT widget development
 
Fast mobile web apps
Fast mobile web appsFast mobile web apps
Fast mobile web apps
 

Mehr von Pilot

Pilot Tech Talk #12 — Dependency Injection in Go by Justus Perlwitz
Pilot Tech Talk #12 — Dependency Injection in Go by Justus PerlwitzPilot Tech Talk #12 — Dependency Injection in Go by Justus Perlwitz
Pilot Tech Talk #12 — Dependency Injection in Go by Justus PerlwitzPilot
 
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil CholewińskiPilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil CholewińskiPilot
 
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...Pilot
 
Pilot Tech Talk #6 — Strategy for Better Productivity by Matt Drozdzynski
Pilot Tech Talk #6 —  Strategy for Better Productivity by Matt DrozdzynskiPilot Tech Talk #6 —  Strategy for Better Productivity by Matt Drozdzynski
Pilot Tech Talk #6 — Strategy for Better Productivity by Matt DrozdzynskiPilot
 
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...Pilot
 
Pilot Tech Talk #4 — Building bots for Slack by Matt Drozdzynski
Pilot Tech Talk #4 — Building bots for Slack by Matt DrozdzynskiPilot Tech Talk #4 — Building bots for Slack by Matt Drozdzynski
Pilot Tech Talk #4 — Building bots for Slack by Matt DrozdzynskiPilot
 
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek Kolarzowski
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek KolarzowskiPilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek Kolarzowski
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek KolarzowskiPilot
 
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola Morawska
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola MorawskaPilot Tech Talk #1 — 101 Nonviolent Communication by Karola Morawska
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola MorawskaPilot
 

Mehr von Pilot (8)

Pilot Tech Talk #12 — Dependency Injection in Go by Justus Perlwitz
Pilot Tech Talk #12 — Dependency Injection in Go by Justus PerlwitzPilot Tech Talk #12 — Dependency Injection in Go by Justus Perlwitz
Pilot Tech Talk #12 — Dependency Injection in Go by Justus Perlwitz
 
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil CholewińskiPilot Tech Talk #10 — Practical automation by Kamil Cholewiński
Pilot Tech Talk #10 — Practical automation by Kamil Cholewiński
 
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
Pilot Tech Talk #9 — Ember.js: Productivity without the fatigue by Jacek Gala...
 
Pilot Tech Talk #6 — Strategy for Better Productivity by Matt Drozdzynski
Pilot Tech Talk #6 —  Strategy for Better Productivity by Matt DrozdzynskiPilot Tech Talk #6 —  Strategy for Better Productivity by Matt Drozdzynski
Pilot Tech Talk #6 — Strategy for Better Productivity by Matt Drozdzynski
 
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...
Pilot Tech Talk #5—Managing notifications and messages in Slack by Piotrek Pe...
 
Pilot Tech Talk #4 — Building bots for Slack by Matt Drozdzynski
Pilot Tech Talk #4 — Building bots for Slack by Matt DrozdzynskiPilot Tech Talk #4 — Building bots for Slack by Matt Drozdzynski
Pilot Tech Talk #4 — Building bots for Slack by Matt Drozdzynski
 
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek Kolarzowski
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek KolarzowskiPilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek Kolarzowski
Pilot Tech Talk #3 — Zapier — my top 5 favorite zaps by Staszek Kolarzowski
 
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola Morawska
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola MorawskaPilot Tech Talk #1 — 101 Nonviolent Communication by Karola Morawska
Pilot Tech Talk #1 — 101 Nonviolent Communication by Karola Morawska
 

Kürzlich hochgeladen

UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxKatherine Villaluna
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptxmary850239
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...raviapr7
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 

Kürzlich hochgeladen (20)

UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptxPractical Research 1: Lesson 8 Writing the Thesis Statement.pptx
Practical Research 1: Lesson 8 Writing the Thesis Statement.pptx
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
3.19.24 Urban Uprisings and the Chicago Freedom Movement.pptx
 
Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...Patient Counselling. Definition of patient counseling; steps involved in pati...
Patient Counselling. Definition of patient counseling; steps involved in pati...
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 

Pilot Tech Talk #7 — Optimizing Infinite Scroll by Paweł Sułkowski

  • 3. Problem Large amount of elements in the DOM along with too many layout’s recalculations / re-paintings
 
 More about what forces layout/reflow: gist.github.com/paulirish/5d52fb081b3570c81e3a
  • 4. Solutions Keep the DOM clean by removing redundant elements or Hide not visible elements to remove them from browser’s render-tree
  • 5. Algorithm Add an event handler to onscroll event and set „display: none” property to elements which are not visible Note If the dimension of an element is not known before rendering don’t forget about caching once you get it.
  • 7. Algorithm (2) Add an event handler to onscroll event and set „display: none” property to batch of elements which are not visible Note If the dimension of an element is not known before rendering don’t forget about caching once you get it.