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

16b6c87229eaf58768d25ed7b2bbbf52?s=128

CodeFest

April 09, 2018
Tweet

Transcript

  1. INTERSECTION OBSERVER

  2. Hello! I AM JO FRANCHETTI Web developer advocate @samsunginternet @thisisjofrank

    https://medium.com/@jofranchetti
  3. 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.
  4. 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/
  5. INTERSECTION OBSERVER

  6. 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 ?
  7. Sluggish, janky interactions

  8. Large downloads

  9. No need to watch/poll for intersections

  10. No need for 3rd party libraries

  11. Intersection Observer API

  12. “ 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.
  13. EXAMPLE https://codepen.io/thisisjofrank/pen/pdQzMr

  14. LAZY LOADING IMAGES https://www.livenation.co.uk/ https://medium.com/@aganglada/intersection-observer-in-act ion-efc118062366

  15. INFINITE SCROLL https://codepen.io/tutsplus/pen/oppZpq

  16. None
  17. None
  18. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  19. Creating an intersection observer Root Target

  20. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  21. Creating an intersection observer Root Margin Target

  22. None
  23. None
  24. Creating an intersection observer var options = { root: document.querySelector('#scrollArea'),

    rootMargin: '0px', threshold: 1.0 } var observer = new IntersectionObserver(callback, options);
  25. Creating an intersection observer Callback executed! Callback executed!

  26. 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);
  27. 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 }); }
  28. 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.
  29. 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 ?
  30. 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
  31. Creating an intersection observer

  32. Creating an intersection observer

  33. Creating an intersection observer

  34. Creating an intersection observer

  35. v But wait! There’s more! DeltaV conf deltavconf.com

  36. GO FORTH AND OBSERVE INTERSECTIONS

  37. Thank you! Any questions? @thisisjofrank @samsunginternet ?