Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CodeFest 2018. Jo Franchetti (Samsung Internet) — Improve web performance with Intersection Observer

CodeFest 2018. Jo Franchetti (Samsung Internet) — Improve web performance with Intersection Observer

Посмотрите выступление Jo: https://2018.codefest.ru/lecture/1298/

Is your site suffering from a giant payload caused by a large number of images? Intersection Observer may be the API for you! I'll introduce how to use this new API and then explain how to lazy load your images once they scroll into view. With examples and statistics from a recent project

CodeFest

April 09, 2018
Tweet

More Decks by CodeFest

Other Decks in Programming

Transcript

  1. SAMSUNG INTERNET ◦ Our team speaks at events and helps

    to support communities ◦ We produce code demos and blog posts ◦ Our team is super friendly and love to work on projects with users of our browser, come speak to me after the talk.
  2. SAMSUNG INTERNET ◦ Web browser for android phones ◦ Specific

    UX for our users (privacy, VR) ◦ 3rd most popular mobile browser ◦ Available on android 5.0+ devices https://samsunginter.net/
  3. WHAT’S THE PROBLEM? Large number of images on the page

    Infinite scrolling 3rd party page-impression scripts cause bloat Difficult/process intensive to calculate ?
  4. “ The Intersection Observer API provides a way to asynchronously

    observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
  5. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  6. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  7. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  8. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options); var target = document.querySelector('#element'); observer.observe(target);
  9. Creating an intersection observer var callback = function(entries, observer) {

    entries.forEach(entry => { // entry.boundingClientRect // entry.intersectionRatio // entry.intersectionRect // entry.isIntersecting // entry.rootBounds // entry.target // entry.time }); }
  10. THIS IS A SLIDE TITLE Here you have: ◦ A

    list of items ◦ And some text ◦ But remember not to overload your slides with content Your audience will listen to you or read the content, but won’t do both.
  11. DOWNSIDES? Not Pixel perfect Not low latency Values will be

    ‘out of date’ by the time you get to use them Spending too much time in the callback will cause lag Differing levels of support across browsers ?
  12. Examples https://slow-cats.glitch.me/ (lots of images, no intersection observer) https://fast-cats.glitch.me/ (same

    number of images, with intersection observer) https://www.webpagetest.org Test the performance of your sites