Saya percaya semua orang tahu bahwa JavaScript adalah bahasa pengembangan tumpukan penuh, dan JS dapat dilihat di browser, ponsel, dan sisi server. Artikel ini akan berbagi beberapa praktik terbaik JavaScript yang efisien untuk meningkatkan pemahaman Anda tentang JS dan prinsip implementasi yang mendasari.
Penyimpanan data
Ada masalah klasik dalam disiplin komputer yang mencapai kinerja baca dan tulis optimal dengan mengubah lokasi penyimpanan data. Dalam JavaScript, lokasi penyimpanan data dapat memiliki dampak signifikan pada kinerja kode. Jika Anda dapat membuat objek dengan {}, jangan gunakan objek baru. Jika Anda dapat membuat array dengan [], jangan gunakan array baru. Kecepatan akses literal di JS lebih tinggi dari objek. Semakin dalam variabel dalam rantai lingkup, semakin lama praktik yang diperlukan untuk akses. Untuk variabel seperti itu, variabel lokal dapat disimpan melalui cache, mengurangi jumlah akses ke rantai lingkup, tidak ada banyak perbedaan antara notasi titik (objek.name) dan operator (objek [nama]). Hanya safari yang akan memiliki perbedaan, dan poin selalu lebih cepat
siklus
Ada beberapa loop umum di JS:
untuk (var i = 0; i <10; i ++) {// lakukan sesuatu} untuk (var prop di objek) {// untuk objek loop} [1,2] .foreach (fungsi (nilai, indeks, array) {// loop berbasis fungsi})Tak perlu diragukan, metode pertama adalah asli, dengan konsumsi kinerja terendah dan kecepatan tercepat. Metode kedua untuk-in menghasilkan lebih banyak overhead (variabel lokal) setiap iterasi, dan kecepatannya hanya 1/7 dari tipe pertama. Metode ketiga jelas menyediakan metode loop yang lebih nyaman, tetapi kecepatannya hanya 1/8 dari loop biasa. Karena itu, Anda dapat memilih metode loop yang sesuai sesuai dengan situasi proyek Anda.
Delegasi Acara
Bayangkan saja menambahkan acara ke setiap tag di halaman. Akankah kami menambahkan satu klik ke setiap tag? Situasi ini dapat memengaruhi kinerja ketika ada sejumlah besar elemen di halaman yang perlu terikat pada pemrosesan peristiwa yang sama. Setiap acara yang mengikat meningkatkan beban pada halaman atau selama pelarian. Untuk aplikasi front-end yang kaya, terlalu banyak binding akan menempati terlalu banyak memori pada halaman dengan interaksi berat. Cara sederhana dan elegan adalah delegasi acara. Ini adalah alur kerja berbasis peristiwa: menangkap lapisan demi lapisan, mencapai target, menggelembung lapisan demi lapisan. Karena ada mekanisme gelembung untuk acara, kita dapat menangani peristiwa yang dimulai dari semua elemen anak dengan mengikat peristiwa ke lapisan luar.
document.geteLementById ('content'). onClick = function (e) {e = e || window.event; var target = e.target || E.Srcelement; // Jika bukan tag A, saya akan keluar jika (target.nodenmae! === 'a') {return} // cetak alamat tautan console.log (target.href)}Mengecat ulang dan mengatur ulang
Setelah browser mengunduh html, css, dan js, dua pohon akan dihasilkan: pohon dom dan pohon rendering. Ketika sifat geometris DOM berubah, seperti lebar dan tinggi DOM, atau warna, posisi, browser perlu menghitung ulang sifat geometris elemen dan membangun kembali pohon rendering. Proses ini disebut redrawing dan penataan ulang.
bodystyle = document.body.style; bodystyle.color = merah; bodystyle.height = 1000px; bodystyke.width = 100%;
Dengan memodifikasi tiga properti dalam metode di atas, browser akan melukis kembali tiga kali. Dalam beberapa kasus, mengurangi pengaturan ulang ini dapat meningkatkan kinerja rendering browser. Metode yang disarankan adalah sebagai berikut: Hanya satu operasi yang dilakukan dan tiga langkah diselesaikan:
bodystyle = document.body.style; bodystyle.csstext 'warna: merah; tinggi: 1000px; lebar: 100%';
Loading JavaScript
IE8, Firefox3.5, dan Chrome2 semuanya memungkinkan pengunduhan file JavaScript yang diperlukan. Jadi <script> tidak akan memblokir unduhan tag lainnya. Sayangnya, proses unduhan JS masih akan memblokir pengunduhan sumber daya lain, seperti gambar. Meskipun browser terbaru meningkatkan kinerja dengan memungkinkan unduhan paralel, pemblokiran skrip masih menjadi masalah. Oleh karena itu, disarankan untuk menempatkan semua tag <script> di bagian bawah tag <body> untuk meminimalkan dampak pada rendering seluruh halaman dan menghindari pengguna dari melihat ruang kosong
Penempatan file JS berkinerja tinggi
Karena Anda sudah tahu bahwa beberapa tag <script> akan memengaruhi kecepatan render halaman, tidak sulit untuk memahami bahwa "mengurangi HTTP yang diperlukan untuk rendering halaman" adalah aturan klasik untuk speedup situs web. Oleh karena itu, menggabungkan semua file JS di lingkungan produk akan mengurangi jumlah permintaan, sehingga mempercepat rendering halaman. Selain menggabungkan file JS, kami juga dapat mengompres file JS. Kompresi mengacu pada pengupasan bagian dari file yang tidak terkait dengan menjalankan. Konten yang dilucuti termasuk karakter whitespace, dan komentar. Proses modifikasi biasanya dapat mengurangi ukuran file hingga setengahnya. Ada juga beberapa alat kompresi yang mengurangi panjang variabel lokal, seperti:
var myname = "foo" + "bar"; // Setelah kompresi, itu menjadi var a = "foobar";
File js cache
Caching Komponen HTTP dapat sangat meningkatkan pengalaman pengguna kunjungan pengembalian situs web. Server web menggunakan "header respons http yang kedaluwarsa" untuk memberi tahu klien berapa lama sumber daya harus di -cache. Tentu saja, Cache juga memiliki kekurangannya sendiri: Ketika aplikasi ditingkatkan, Anda perlu memastikan bahwa pengguna mengunduh konten statis terbaru. Masalah ini dapat diselesaikan dengan mengubah nama file dari sumber daya statis. Anda dapat melihat referensi browser JSApplication-20151123201212.js di lingkungan produk. Ini untuk menyimpan file JS baru di cap waktu, sehingga menyelesaikan masalah cache yang tidak diperbarui.
Meringkaskan
Tentu saja, JS yang efisien bukan hanya tentang hal -hal ini yang dapat ditingkatkan. Jika beberapa kerugian kinerja dapat dikurangi, kita dapat menggunakan JavaScript untuk berkembang secara lebih efisien.