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

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
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
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 ?