Ada banyak kode JavaScript dalam aplikasi web sekarang, dan kami selalu mencari berbagai solusi yang membuatnya lebih cepat.
1. Kami menggunakan proksi acara untuk membuat pemantauan acara lebih efisien.
2. Kami menggunakan teknologi debuncing fungsi untuk membatasi berapa kali metode yang diberikan disebut dalam periode waktu tertentu. Silakan merujuk ke: Cara mencegah pemicu frekuensi tinggi fungsi acara (terjemahan Cina)
3. Kami menggunakan loader JavaScript untuk memuat bagian sumber daya yang benar -benar kami butuhkan, dll.
Ada cara lain untuk membuat halaman kami lebih cepat dan lebih efisien. Yaitu untuk secara dinamis menambahkan dan menghapus gaya tertentu dalam lembar gaya melalui JS, alih -alih terus -menerus meminta elemen DOM dan menerapkan berbagai gaya. Begini cara kerjanya.
Dapatkan stylesheet
Anda dapat memilih lembar gaya apa pun untuk menambahkan aturan gaya. Jika Anda memiliki lembar gaya yang pasti, Anda dapat menambahkan atribut ID ke tag <link> atau <tyle> di halaman HTML, dan kemudian Anda bisa mendapatkan objek cssstylesheet langsung melalui atribut lembar elemen DOM ini. Stylesheets juga dapat dilalui ke:
Salinan kode adalah sebagai berikut:
// kembalikan daftar daftar gaya seperti array (seperti array)
var sheets = document.stylesheets;
/*
Nilai pengembalian mirip dengan yang berikut:
Stylesheetlist
{
0: cssstylesheet,
1: cssstylesheet,
2: cssstylesheet,
3: Cssstylesheet,
4: Cssstylesheet,
Panjang: 5,
Item: Fungsi
}
*/
// Dapatkan lembar pertama, mengabaikan atribut media
var sheet = document.stylesheets [0];
Yang perlu Anda perhatikan adalah atribut media dari style sheet - ketika Anda ingin menampilkannya di layar, Anda tidak boleh menambahkan aturan CSS ke lembar gaya cetak. Anda dapat melihat lebih dekat pada informasi atribut dari objek CSSSTYLESHEET:
Salinan kode adalah sebagai berikut:
// Konsol menghasilkan informasi dari lembar gaya pertama
console.log (document.stylesheets [0]);
/*
Nilai pengembalian:
Cssstylesheet
Cssrules: Cssrulelist [Object]
Dinonaktifkan: Salah
href: "http://davidwalsh.name/somesheet.css"
Media: Medialis [Objek]
OwnerNode: Link [Object]
OwnerRule: NULL
Parentstylesheet: Null
Aturan: Cssrulelist [Object]
Judul: NULL
Jenis: "Teks/CSS"
*/
// Dapatkan jenis media (tipe media)
console.log (document.stylesheets [0] .media.mediatext)
/*
Nilai pengembalian mungkin:
"Semua" atau "cetak" atau media lain diterapkan pada stylesheet ini
*/
Dalam semua kasus, Anda pasti memiliki cara untuk mendapatkan stylesheet untuk menambahkan aturan.
Buat stylesheet baru
Dalam banyak kasus, cara terbaik untuk melakukan ini adalah dengan membuat elemen <tyle> baru untuk menyimpan aturan dinamis ini. Ini juga sangat sederhana:
Salinan kode adalah sebagai berikut:
var sheet = (function () {
// Buat tag <tyle>
var style = document.createElement ("style");
// Anda dapat menambahkan atribut media (/kueri media, kueri media)
// style.setAttribute ("media", "layar")
// style.setAttribute ("Media", "Only Screen dan (Max-Width: 1024px)")
// untuk hack webkit :(
style.appendChild (document.createTextNode (""));
// Tambahkan elemen <style> ke halaman
document.head.appendChild (style);
return style.sheet;
}) ();
Tragedi adalah bahwa webkit membutuhkan sedikit peretasan untuk dibuat dengan benar, tetapi kita hanya perlu peduli dengan lembar ini.
Masukkan aturan
Dalam versi IE sebelumnya, metode intertrule dari stylesheets tidak tersedia, meskipun sekarang menjadi standar untuk injeksi aturan. Metode Insertrule membutuhkan penulisan seluruh aturan CSS, yang sama seperti dalam lembar gaya:
Salinan kode adalah sebagai berikut:
sheet.IserTrule ("header {float: left; opacity: 0.8;}", 1);
Meskipun metode API JavaScript ini terlihat agak pedesaan, itu berfungsi seperti ini. Indeks parameter kedua menunjukkan lokasi (indeks) yang akan dimasukkan dalam aturan. Ini juga sangat berguna sehingga Anda dapat memasukkan aturan/kode yang sama, yang memungkinkan aturan belakang berlaku. Indeks default adalah -1, yang mewakili akhir dari seluruh rangkaian. Jika Anda ingin memiliki aturan kontrol tambahan/malas, Anda juga dapat menambahkan! Tag penting ke aturan tertentu untuk menghindari masalah pengindeksan.
Tambahkan Aturan - Metode Addrule Non -Standar
Objek CSSStylesheet memiliki metode addrule yang memungkinkan Anda untuk mendaftarkan aturan CSS ke dalam stylesheet. Metode Addrule menerima tiga parameter: parameter pertama adalah pemilih, parameter kedua adalah kode aturan CSS, dan yang ketiga adalah indeks integer mulai dari 0, menunjukkan posisi gaya (dalam pemilih yang sama):
Salinan kode adalah sebagai berikut:
sheet.addrule ("#mylist li", "float: left; latar belakang: merah! penting;", 1);
Nilai pengembalian metode addrule selalu -1, jadi nilai ini tidak memiliki signifikansi praktis.
Ingat, keuntungan dari pendekatan ini adalah bahwa elemen yang ditambahkan dari halaman secara otomatis memiliki gaya yang diterapkan padanya, yang berarti Anda tidak perlu menambahkannya ke elemen tertentu, tetapi sebaliknya menyuntikkannya langsung ke halaman. Tentu saja, lebih efisien!
Aturan Aplikasi Keamanan
Karena tidak semua browser mendukung metode insertrule, yang terbaik adalah membuat fungsi pembungkus untuk menangani aplikasi aturan. Berikut ini cara cepat untuk melakukannya:
Salinan kode adalah sebagai berikut:
fungsi addcssrule (lembar, pemilih, aturan, indeks) {
if ("Insertrule" dalam lembar) {
sheet.Insertrule (selector + "{" + aturan + "}", index);
}
lain if ("addrule" dalam lembar) {
sheet.addrule (pemilih, aturan, indeks);
}
}
// Cara menggunakan
addcssrule (document.stylesheets [0], "header", "float: left");
Metode alat ini harus mencakup semua kasus di mana aturan gaya baru ditambahkan. Jika Anda khawatir tentang kesalahan dalam aplikasi Anda, Anda harus membungkus kode untuk metode dengan cobalah {} catch (e) {} blok.
Masukkan aturan kueri media
Ada dua cara untuk menambahkan aturan kueri media. Yang pertama adalah menggunakan metode Insertrule standar:
Salinan kode adalah sebagai berikut:
Sheet.IserTrule (
"@media Only Screen dan (max-width: 1140px) {header {display: none;}}"
);
Tentu saja, karena versi lama IE tidak mendukung insertrule, cara lain adalah dengan membuat elemen gaya, menentukan atribut media yang sesuai, dan kemudian menambahkan gaya ke stylesheet baru. Ini mungkin memerlukan penggunaan beberapa elemen gaya, tetapi juga mudah. Saya dapat membuat objek, menentukan kueri media serta indeks, dan membuat/mendapatkannya seperti itu.
Secara dinamis menambahkan aturan ke stylesheets adalah metode yang efisien, dan mungkin lebih mudah dari yang Anda pikirkan. Ingatlah bahwa solusi ini mungkin perlu digunakan dalam aplikasi besar berikutnya, karena dapat mencegah Anda jatuh ke dalam lubang baik dalam pemrosesan kode dan elemen.