Selamat siang teman!Pada artikel ini, kami akan memperkenalkan Intersection Observer API, alat canggih baru untuk memuat gambar dengan malas dan elemen lainnya pada halaman, didukung oleh semua browser modern. Kita dapat menggunakan alat ini untuk mengontrol visibilitas elemen dengan mendefinisikan pemuatan awal atau yang tertunda dari konten DOM kami.Saat web berkembang, browser mendukung lebih banyak fitur dan API baru, tetapi sesuatu masih menyakiti pengembang - rendering DOM. Ketika kita mulai mengembangkan aplikasi baru, membuat komponen, memikirkan struktur HTML, elemen gaya dengan CSS, kita juga memikirkan proses rendering, bagaimana tampilan halaman kita secara umum, dan beberapa hal penting lainnya yang memerlukan penanganan dan pengaruh yang cermat. rendering aplikasi.Ini, pada gilirannya, mempengaruhi bagaimana kita membuat elemen kita, bagaimana CSS kita akan diatur, perpustakaan dan kerangka kerja mana yang akan digunakan dalam proyek, dll. Inilah sebabnya mengapa rendering sangat penting bagi pengembang.Salah satu alasan popularitas perpustakaan Bereaksi di komunitas pengembang adalah kenyataan bahwa ia menggunakan DOM virtual. Intinya, ini adalah representasi virtual dari DOM nyata, yang dapat Anda kontrol sesuai keinginan. Setelah semua pembaruan, DOM virtual memutuskan perubahan apa yang perlu dilakukan pada DOM asli, dan membuat perubahan ini dengan cara "mulus"; tidak perlu me-refresh seluruh halaman saat mengubah satu elemen. Ini adalah salah satu keuntungan paling signifikan dari Bereaksi dibandingkan perpustakaan dan kerangka kerja lainnya. Render DOM adalah tugas yang mahal (dalam hal kinerja) yang Bereaksi baik-baik saja tanpa masalah.Beberapa perpustakaan dan API memungkinkan kami meningkatkan rendering elemen aplikasi kami. Kita akan berkenalan dengan salah satu dari mereka - Intersection Observer API. Tapi pertama-tama, mari kita cari tahu apa yang memuat gambar "malas".Bagaimana cara kerja lazy memuat gambar?
Memuat malas adalah salah satu teknik untuk merender konten halaman. Konsep pemuatan "lazy" adalah bahwa alih-alih memuat halaman sepenuhnya, kami hanya memuat bagian yang diperlukan dan menunda (menunda) pemuatan bagian yang tersisa hingga dibutuhkan oleh pengguna.Contoh unduhan "malas", yang mungkin Anda pernah dengar atau Anda temui, adalah pengguliran halaman yang tak ada habisnya. Ini berfungsi seperti ini: pengguna mengunjungi halaman, konten awal dimuat, dan hanya setelah pengguna menggulir halaman ke bawah sampai akhir, bagian selanjutnya dari konten dimuat. Dalam hal ini, tidak perlu mengunduh semua konten sekaligus, yang sangat memudahkan aplikasi.Jika unduhan "malas" hanya berfungsi untuk mengunduh konten "yang dibuat pengguna", teknik apa yang disebut sebaliknya? Beberapa telah mendengar tentang pemuatan malas sebelumnya, tetapi belum mendengar yang sebaliknya. Kebalikan dari pemuatan "malas" adalah pemuatan "energik" (opsi lain tidak sabar, bergerak cepat) - ketika semua konten langsung dirender.Apakah Anda tahu bahwa ada atribut HTML untuk malas memuat gambar? Untuk menggunakannya, cukup tambahkan memuat = "malas" ke elemen "img" atau "iframe".
Dengan menggunakan teknik ini, kami mendapatkan banyak keuntungan: hanya memuat sumber daya yang diperlukan akan mengurangi konsumsi memori dan, pada akhirnya, waktu pemuatan halaman. Ini juga mencegah rendering kode "tidak diklaim", yang mengoptimalkan aplikasi untuk bekerja dalam kondisi bandwidth jaringan yang rendah. Namun, ada beberapa kelemahan: ini dapat mempengaruhi peringkat halaman oleh mesin pencari. Selain itu, perlu waktu untuk memilih perpustakaan atau API yang tepat untuk bekerja dengannya.API Pengamat titik-temu
JavaScript berkembang sangat cepat sehingga kami mendapatkan API baru hampir setiap tahun. Tujuan utama API baru adalah membantu membuat aplikasi dan halaman yang luar biasa.Pengamat titik-temu adalah API yang memungkinkan Anda untuk memantau visibilitas dan posisi elemen DOM. Masalahnya adalah bahwa ia bekerja secara tidak sinkron, memungkinkan Anda untuk dengan lancar (tanpa terasa) mengubah visibilitas elemen, menentukan pemuatan awal atau yang tertunda dari konten DOM kami.
Beberapa tahun yang lalu, kami tidak memiliki API atau alat lain untuk penentuan posisi dan pelacakan elemen. Kami harus menulis fungsi yang gila dan besar, menciptakan metode yang mahal (dalam hal kinerja) yang menciptakan lebih banyak masalah. Menggunakan Intersection Observer API, kita dapat melakukan hal-hal keren seperti:- Pengguliran halaman tanpa akhir - membuat pengguliran tak berujung dari tabel, daftar, wadah kotak, dll. Tidak pernah semudah ini.
- Gambar - mengapa mengunggah semua gambar sekaligus, ketika Anda dapat menggunakan unduhan "malas" dan hanya menampilkan konten yang dibutuhkan pengguna saat ini?
- Elemen pemantauan - Anda dapat memonitor elemen pada halaman. Misalnya, Anda dapat menerima pesan tentang penutupan iklan.
Di sinilah semuanya dimulai:let myFirstObserver = new IntersectionObserver(callback, options)
Kami menginisialisasi konstruktor IntersectionObserver dan meneruskan dua parameter untuk itu. Parameter pertama adalah fungsi callback, yang disebut sebagai respons terhadap persimpangan elemen kami dengan viewport (mis., Ketika elemen melampaui batas viewport) atau dengan elemen lain. Parameter opsi adalah objek yang mengontrol kondisi untuk meluncurkan fungsi panggilan balik. Objek ini memiliki bidang-bidang berikut:- root - elemen induk yang berfungsi sebagai viewport untuk elemen target (untuk elemen yang kami amati)
- rootMargin - margin luar di sekitar elemen root (nilai-nilai bidang ini mirip dengan nilai margin di CSS). Nilai-nilai ini dapat berubah untuk setiap sisi root sebelum melakukan persimpangan.
- threshold - angka atau array angka yang menentukan persentase persimpangan elemen target dengan elemen root, di mana fungsi callback diluncurkan
Mari kita lihat menggunakan Intersection Observer API:let options = {
root: document.querySelector('.scroll-list'),
rootMargin: '5px',
threshold: 0.5
}
let myFirstObserver = new IntersectionObserver(elements => { elements.forEach(element => console.log('element', element)) }, options)
Untuk memulai "pemantauan" suatu elemen, Anda perlu menentukan target dan memanggil pengamat menggunakan metode "mengamati", melewati target sebagai parameter:let myDivTarget = document.querySelector('.header')
observer.observe(myDivTarget)
Harus diingat bahwa semua elemen yang diamati oleh pengamat adalah persegi panjang. Elemen berbentuk tidak teratur masuk ke dalam persegi panjang terkecil.Bagaimana dengan dukungan browser? API Intersection Observer didukung oleh semua browser modern seperti Chrome, Edge, Firefox dan Opera.
Jika Anda akan bekerja dengan banyak data, misalnya, dengan tabel yang berisi banyak informasi, Intersection Observer API akan sangat berguna bagi Anda.Salah satu kelebihan API ini adalah untuk mengatasi masalah seperti itu Anda tidak perlu lagi menggunakan perpustakaan apa pun.Kesimpulan
Kami mempelajari Intersection Observer API dan penggunaannya untuk pemuatan malas, mengamati posisi elemen DOM, dll. Browser mendukung semakin banyak API yang mengurangi waktu rendering halaman, terutama untuk pengguna dengan koneksi yang lambat, mengurangi ukuran proyek dan hanya menampilkan konten yang relevan.Dari seorang penerjemah: artikel itu bagi saya tampaknya kurang informatif, jadi di sini ada tautan ke literatur tambahan:Terima kasih atas perhatian Anda.