Pengenalan kepada API Penglihatan Halaman

mata teras

API Keterlihatan Page membolehkan pemaju laman web untuk menentukan status penglihatan semasa halaman, membantu membangunkan aplikasi web yang cekap dan cekap CPU, terutamanya untuk peranti mudah alih dengan sumber yang terhad.
API mengandungi peristiwa yang dipanggil "VisibilityChange" dan dua sifat baca sahaja "Tersembunyi" dan "VisibilityState", yang dapat menunjukkan sama ada halaman itu dapat dilihat, tersembunyi, pra-diberikan, atau akan dipasang.
• API Penglihatan Halaman tidak disokong oleh semua pelayar, dan penyemak imbas yang menyokongnya sering menggunakan awalan vendor, menghasilkan isu keserasian yang berpotensi. Anda boleh menggunakan polyfills seperti Lihat.js dan ISVIS.js untuk merapatkan jurang antara pelayar yang tidak menyokong API ini.
• Penggunaan Halaman Penggunaan Praktikal API Termasuk: Main balik video atau audio apabila pengguna suis pengguna;
Peranti mudah alih adalah sejuk, aplikasi mudah alih lebih sejuk. Malangnya, sambungan mudah alih adalah buruk dalam kebanyakan kes kerana mereka perlahan atau mempunyai jalur lebar terhad. Adalah baik untuk mempunyai aplikasi web yang kaya yang tidak membazirkan sumber pengguna, terutamanya jika pengguna tidak melihat halaman. Artikel ini menunjukkan kepada anda cara menggunakan API Penglihatan Halaman untuk menyelesaikan sebahagiannya dan isu -isu lain. Sejak beberapa tahun kebelakangan ini, beberapa API baru dan cemerlang telah diperkenalkan untuk membantu kami melakukan kerja harian kami, seperti API Geolokasi, API masa navigasi, dan API skrin penuh. Page Visibility API [ mentakrifkan kaedah yang membolehkan pemaju laman web untuk secara pemrograman menentukan status penglihatan semasa halaman untuk membangunkan aplikasi web yang berkuasa dan CPU yang cekap

]. Sejak 26 Julai 2012, ia telah menjadi cadangan calon W3C dan oleh itu dianggap stabil. Perkara pertama yang anda mungkin ingin tahu ialah bagaimana mereka meningkatkan prestasi dan menjimatkan jalur lebar. Bayangkan anda mempunyai aplikasi web berasaskan AJAX yang hebat yang menghantar data bolak-balik setiap lima saat. Jika pengguna menghantar tag penyemak imbas ke latar belakang semasa aplikasi sedang berjalan, ia masih akan menghantar data setiap lima saat, dan yang sama adalah benar jika pengguna meletakkan tag di latar depan selepas 10 minit. Bukankah lebih baik jika aplikasi melambatkan kemas kini atau berhenti mengemas kini sehingga pengguna memeriksa halaman lagi? Di sinilah pengoptimuman sumber terletak dan di mana API penglihatan halaman memainkan peranan utama.

Komposisi Komposisi Page Visibility API

API ini sangat mudah, sebenarnya mereka hanya mempunyai satu peristiwa yang dipanggil VisibilityChange dan dua sifat baca sahaja yang tersembunyi dan penglihatan yang dimiliki oleh dokumen. "Tersembunyi" adalah nilai boolean, benar jika halaman tidak dapat dilihat (walaupun bahagian terkecil), yang biasanya berlaku apabila tag berada di latar belakang atau ketika penyemak imbas diminimumkan. Harus diingat bahawa peraturan ini mempunyai beberapa pengecualian untuk alat kebolehaksesan yang dijalankan dalam mod skrin penuh. Anda boleh membaca spesifikasi tersembunyi untuk maklumat lanjut. "VisibilityState" adalah enum yang menentukan keadaan semasa dokumen dan mengandungi nilai -nilai berikut:

• Tersembunyi: Dokumen ini benar -benar tidak kelihatan
• kelihatan: dokumen atau sebahagian daripadanya kelihatan
• Prerender: Dokumen memuatkan skrin di luar dan tidak kelihatan
• Dibongkangkan: Dokumen akan dipasang

Perhatikan bahawa dua nilai terakhir prerender dan dipunggah adalah pilihan. Di samping itu, seperti atribut tersembunyi, terdapat beberapa pengecualian kepada nilai tersembunyi dalam teknologi bantuan.

keserasian

Pada masa ini, tidak banyak pelayar yang menyokong API ini, dan pelayar yang menyokong API ini masih menggunakan awalan vendor. Ini menyebabkan isu sokongan, kerana anda perlu menguruskan semua awalan untuk mempunyai kod kerja. Pada masa ini, penyemak imbas desktop yang menyokong API penglihatan halaman termasuk Chrome 13, Internet Explorer 10, Firefox 10, dan Opera Beta 12.10. Pelayar mudah alih yang menyokong API ini termasuk Chrome pada Android 4.0 dan Opera Mobile 12.1 pada Android dan Symbian (sumber mobileHtml5.org - saya mengujinya sendiri di Android 4.0). Perkara yang sedikit menjengkelkan ialah, kerana konvensyen unta, jika atribut mempunyai awalan vendor, nama atribut sebenar dimodalkan, dan jika tidak ada awalan, huruf kecil. Untuk kejelasan, mari kita ambil harta tersembunyi sebagai contoh. Anda dapat melihat bahawa ia bermula dengan huruf kecil, tetapi jika ia mempunyai awalan, ia bermula dengan huruf besar "H", jadi untuk menguji sokongan, anda tidak boleh menulis kod yang serupa dengan yang berikut:

var browserPrefixes = ["", "webkit","moz","ms","o"];
for(var i = 0; i < browserPrefixes.length; i++) {
  if (document[browserPrefixes[i] + "hidden"] != undefined) {
    // here goes the code
    break;
  }
}

Anda perlu memecah kes seperti yang ditunjukkan di bawah, atau menggunakan beberapa helah untuk rentetan.

// menguji versi yang tidak disusun jika (document.hidden! == undefined) // tambah kod di sini lain { // versi prefixed ujian var BrowserPrefixes = ["WebKit", "Moz", "Ms", "O"]; untuk (var i = 0; i & lt; BrowserPrefixes.length; i) { jika (dokumen [BrowserPrefixes [i] "Tersembunyi"]! == Undefined) { // tambah kod di sini rehat; } } }

Seperti API lain, sekumpulan polyfills telah dikeluarkan untuk menggunakan API ini dalam pelayar yang tidak menyokong mereka. Sebahagian daripada polyfills ini boleh dilihat.js dan isvis.js.

(Kandungan berikut adalah penulisan semula coretan dan contoh kod asal, mengekalkan fungsi tidak berubah, dan pengoptimuman kod dan peningkatan anotasi)

(Contoh kod panjang dan penjelasan dalam teks asal ditinggalkan di sini kerana bahagian ini tidak sepadan dengan matlamat asal pseudo dan terlalu panjang. Jika perlu, contoh kod yang diperkemas boleh disediakan.)

Kesimpulan

Artikel ini menunjukkan ciri -ciri API Penglihatan Halaman dan cara menggunakannya. Hasrat kakitangan W3C untuk membantu peranti mudah alih (bukan hanya untuk menjimatkan jalur lebar sumber dan sambungan) adalah benar -benar terpuji dan saya berharap dapat melihat mereka secara meluas tidak lama lagi.

Seperti yang anda lihat, API ini sangat mudah, dengan hanya dua sifat dan satu acara, jadi anda boleh mula menggunakannya dalam beberapa minit untuk meningkatkan aplikasi web anda.

bagaimanapun, pada masa ini, mereka tidak begitu dipercayai kerana mereka mempunyai sokongan yang lemah dalam penyemak imbas, jadi anda perlu menggunakan polyfill.

Jika anda berminat dengan API JavaScript, lihat bahagian API di laman web terkini di SitePoint Network ... JSPRO.

(bahagian FAQ yang panjang dalam teks asal ditinggalkan di sini kerana bahagian ini tidak sepadan dengan matlamat asal pseudo dan terlalu lama jika perlu, contoh FAQ yang diselaraskan dapat disediakan.) 🎜>

Atas ialah kandungan terperinci Pengenalan kepada API Penglihatan Halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!