Apakah JavaScript sebaris baik atau buruk?

16

Saat ini saya telah beralih dari WordPress ke kerangka Yii dan pengembang eksternal sedang membangun kembali situs saya.

Satu hal yang saya perhatikan adalah bahwa setiap kali ia memanggil AJAX / jQuery dengan cara Yii, ia memasukkan sisipan JavaScript inline di halaman web. Meskipun tampaknya kode JavaScript ditempatkan di bawah footer, itu masih sebaris.

Secara umum, tampaknya kode JavaScript lebih sering dimasukkan ke dalam halaman web. Saya selalu berpikir bahwa skrip JavaScript harus, sebanyak mungkin, ditempatkan dalam file JavaScript. Apakah ini tren "baru" yang akan datang? Atau haruskah saya masih mencoba menyimpan kode JavaScript dalam file yang terpisah?

Steven
sumber
Apa sebenarnya yang Anda maksudkan dengan memasukkan inline JavaScript di halaman web ?
Salman A
3
Demi orang lain yang menemukan pertanyaan ini dan memikirkan hal-hal seperti <a onClick="function(){/* do stuff */} ">Click Here</a>ini, saya mengerti, dianggap SANGAT buruk dan orang harus memisahkan kode mereka dari HTML mereka. Lihat: Artikel ini
TecBrat
1
@ user1066946 t.co/j1RpJgwoku :-)
Kos
1
@ user1066946 Saya sangat suka menggunakan Angular, saya baru saja mengamati bahwa "web semantik" telah membuat lingkaran (dalam hal menjaga beberapa kode lem di sebelah DOM)
Kos
1
"Meskipun sepertinya kode JavaScript ditempatkan di bawah footer, itu masih sebaris." - Kedengarannya seolah-olah Anda merujuk pada JavaScript yang disematkan , bukan JavaScript "sebaris" (yang dimaksud TecBrat).
MrWhite

Jawaban:

13

JavaScript sebaris meningkatkan waktu unduhan untuk halaman, yang mana tidak bagus. Dengan panggilan ke .jsfile, setidaknya ini bisa panggilan paralel dan waktu unduh konten berkurang. Ya ada saat-saat di mana tidak apa-apa untuk menempatkan JavaScript secara langsung dalam kode HTML, tetapi Anda seringkali lebih baik melepasnya sebanyak mungkin.

Ingatlah bahwa waktu pengunduhan halaman (yaitu, HTML) dan tidak semua panggilan sumber daya memengaruhi metrik yang memengaruhi peringkat (meskipun sebagai PageRank atau dalam SERP, itu tidak masalah). Intinya adalah, itu mempengaruhi kinerja situs untuk SEO namun itu nyata.

closetnoc
sumber
7
Menegosiasikan koneksi kedua ke host yang mungkin sama untuk mengunduh jumlah data yang sama lebih cepat daripada dalam aliran aktif? biasanya jika Anda mendapatkan, misalnya, 50Kbps pada file ke host, memulai sesi kedua dapat memotongnya sehingga keduanya sekarang 25Kbps. Kecuali jika host mencekik per koneksi karena suatu alasan.
EkriirkE
Ada con ke file eksternal sekalipun. Jika tidak dilakukan dengan benar, Anda membuat kode DOMblocking, yaitu pemicu doc.ready lebih lambat, yang memengaruhi kecepatan yang diterima . Tetapi jika dilakukan dengan benar, eksternal adalah cara untuk pergi
Martijn
4
.jsfile lebih baik untuk caching, tidak masuk akal bahwa dua koneksi ke host yang sama secara ajaib akan membuat kecepatan unduhan Anda lebih besar.
Pikiran membagi bandwidth, sementara saya memahami logika Anda dan itu tidak sepenuhnya salah, agak menyesatkan. HTML lebih kecil dengan waktu yang lebih singkat dan panggilan berikutnya benar-benar dapat menunggu.
closetnoc
3
jika Anda mencari waktu, Anda salah melihat bandwidth. lihat profiler pada waktu pemuatan: biasanya waktu koneksi 10-100x LEBIH BESAR daripada waktu pertukaran data nyata. ini berarti bahwa FRAGMENTASI adalah masalah nyata, dan menggunakan file eksternal, berdedikasi, untuk js sangat kecil mungkin yang terburuk sebaris itu. Inline lebih baik di browser yang tidak melakukan paralelisasi nyata
Lesto
29

Di situs konversi mata uang saya, sebagian besar sesi adalah tampilan satu halaman. Ini karena pengguna dapat melakukan perhitungan mata uang mereka langsung di halaman arahan (semua perhitungan ditangani pihak klien dengan JavaScript.)

Halaman saya mengunduh dan merender sekitar setengah waktu ketika semua sumber daya (css, js, dan bahkan gambar ) sejajar dalam halaman. Karena sedikit sekali pengguna saya yang melihat banyak halaman, saya tidak akan mendapat banyak manfaat dari beberapa sumber daya yang di-cache di antara tampilan halaman.

Situs saya tidak khas. Sebagian besar situs memiliki beberapa halaman per sesi dan gambar besar yang akan membuat teknik saya kurang berlaku. Tidak ada satu solusi yang benar untuk pertanyaan ini; itu tergantung pada situs. Anda perlu mengukurnya sendiri berdasarkan perilaku khas pengguna Anda.

Stephen Ostermiller
sumber
12

Ini tidak selalu buruk untuk memiliki JavaScript di dalam file HTML Anda, tetapi Anda harus menghakimi.

Ini adalah buruk jika Anda memiliki sejumlah besar JavaScript yang digunakan di beberapa halaman. Dalam hal itu, JavaScript harus dalam file eksternal, terkompresi, dan dapat diakses dan jika situs Anda memiliki lalu lintas yang sangat berat, Anda harus menggunakan CDN.

Namun, jika Anda memiliki sedikit JavaScript, menyimpannya dalam file eksternal mungkin akan dinegasi oleh fakta bahwa Anda perlu membuat permintaan HTTP tambahan untuk mengambilnya. Dalam hal ini akan lebih efisien untuk menjaga JavaScript di halaman Anda.

Kemudian lagi, jika potongan kecil JavaScript yang sama ini digunakan pada beberapa halaman, akan bermanfaat untuk menempatkannya dalam file eksternal untuk mengambil keuntungan dari caching.

Pada akhirnya Anda harus mempertimbangkan ukuran JavaScript terhadap biaya tambahan untuk membuat permintaan HTTP tambahan. Untuk sebagian besar, untuk situs 'rata-rata', mungkin tidak akan membuat banyak perbedaan hanya dengan meletakkannya di file eksternal.

foamcow
sumber
4

Saya seorang pengembang Yii dan saya dapat memberi tahu Anda, bahwa Yii tidak ada hubungannya dengan ini . Ini sepenuhnya di sisi pengembang , apakah ia meletakkan kode Javascript ke file terpisah dan mendaftarkannya dengan halaman HTML (view) dengan CClientScript::registerScriptFilemetode atau meletakkannya langsung untuk melihat kode (HTML) dan mendaftarkannya menggunakan CClientScript::registerScriptmetode.

Sesuai jawaban Anda, sebagian besar (profesional?) Pengembang Yii sangat memilih pendekatan pertama, yaitu - menjaga kode Javascript sebanyak mungkin dalam file terpisah. Jadi, ini tentunya bukan tren pengkodean yang baru, melainkan praktik pengembang yang buruk. Setidaknya, begitulah yang terlihat di komunitas Yii.

EDIT : Sebenarnya, saya lupa tentang argumen paling penting. Yii (dan juga sebagian besar kerangka kerja PHP profesional lainnya) dibangun berdasarkan pola desain MVC (sebenarnya: pola arsitektur). Dan pola yang sama dapat digunakan di garis depan: Kode HTML adalah model (data), CSS adalah tampilan (dekorator) dan Javascript adalah pengontrol. Semuanya dimasukkan ke dalam file terpisah , .jsdan .cssfile - diperkecil, usang, dan di-gzip dalam skenario terbaik.

Ketika Anda membangun aplikasi Yii Anda, Anda dapat mematahkan pola MVC dan menyimpan semuanya dalam file yang sama. Pertanyaannya adalah - apakah itu layak dilakukan, apa manfaatnya (tidak ada) dan kemana hal itu akan menuntun Anda? Anda dapat menggunakan argumentasi yang sama, ketika bertanya, apakah akan tetap menyimpan kode JS atau tidak?

Trejder
sumber
Baik. Pengembang tampaknya menggunakan widget pihak ke-3 untuk semuanya; Autocomplete, unggah gambar ajax dll. Semua ini menambahkan js inline.
Steven
Tidak, saya tidak setuju. Saya menggunakan Bootstrap Twitter di aplikasi Yii saya (mungkin ekstensi terbesar Yii dan sejumlah besar widget) serta banyak ekstensi Yii lainnya dan tidak ada yang menggunakan inline JS. Pengembang Anda harus benar-benar beruntung menemukan widget dan ekstensi, yang hanya menggunakan Javascript sebaris. Anda harus cukup berpengalaman dalam Yii untuk mulai menulis ekstensi sendiri (dengan pengecualian beberapa, benar-benar ditulis dengan buruk) dan bahkan pengembang Yii semi berpengalaman menggunakan kode sebaris sebagai pilihan terakhir, jika semuanya gagal.
trejder
Menggunakan ekstensi pihak ketiga dan widget di Yii adalah ide bagus (Anda tidak perlu menemukan roda lagi). Tetapi, menggunakan kode JS sebaris di aplikasi atau ekstensi Yii benar-benar adalah sikap yang buruk. Jadi paksa pengembang Anda untuk menulis kode yang lebih baik / gunakan ekstensi dan widget yang lebih baik atau ... dapatkan pengembang yang lebih baik! :]
trejder
Ok, terima kasih atas umpan baliknya. Selain Stackoverflow, di mana saya dapat menemukan komunitas Yii yang bagus?
Steven
Di forum Yii . Sebagian besar halaman dapat diakses secara bebas. Beberapa mengharuskan untuk mendaftarkan akun dan masuk. Sebagian besar pengembang Yii di Stack Overflow memiliki akun sendiri di forum. Setelah hampir enam tahun ada, kerangka kerja Yii telah menghasilkan komunitas pengembang yang besar, jadi jika Anda perhatikan dengan teliti, Anda harus dapat menemukan beberapa pengembang Yii di komunitas lokal Anda atau bahkan di lingkungan Anda. Semoga berhasil.
trejder
3

Ini sebenarnya tergantung pada tujuan halaman web yang Anda kembangkan:

Saya menggunakan sejumlah kecil JavaScript inline, sedangkan saya lebih suka menggunakan file JavaScript eksternal jika ukurannya besar.

Either way, ketika halaman memuat JavaScript, itu harus dijalankan terlebih dahulu. Praktik terbaik adalah menggunakan JavaScript eksternal sehingga tidak memperpanjang konten halaman Anda. Ini juga membuat proses debug lebih mudah.

Abhijith Bhattu
sumber
2

Jawabannya sebenarnya tergantung pada apa yang sedang dilakukan.

Jika Anda melihat inline JavaScript yang digunakan di seluruh situs web (mis. Widget yang menunjukkan di dalam header di semua halaman situs web) maka akan lebih tepat untuk memindahkannya ke file JavaScript "umum".

Bahkan, saya akan memindahkan JavaScript sebanyak mungkin ke file JavaScript umum bahkan jika itu digunakan pada satu halaman. Saya akan mengkonfigurasi server untuk mengirim caching dan header kompresi yang kuat untuk file JavaScript; yang mengurangi ukuran halaman tetapi tidak menambah ukuran file JavaScript dengan banyak.

Di sisi lain, jika JavaScript hanyalah sekelompok opsi konfigurasi / inisialisasi mis:

$(function () {
    myplugin({
        images: ["img1", "img2", "img3"]
    });
});

di mana karena alasan tertentu tidak mungkin untuk memindahkan kode ke file JavaScript eksternal (misalnya ketika parameter gambar berasal dari basis data) saya akan menyimpannya dalam inline. Karena itu, saya akan memilih plugin pihak ketiga yang "tidak mengganggu" (atau mengubahnya seperti itu).

Salman A
sumber
2

Jawaban-jawaban ini tidak tepat sasaran. Lihatlah caching Inline .

Karena Yii dikodekan dalam PHP, pola PHP yang umum (atau mungkin tidak umum) Anda akan temukan adalah bahwa pengembang kadang-kadang akan menulis kode PHP untuk menghasilkan kode Javascript secara dinamis di server - berdasarkan pada beberapa keadaan, kondisi atau nilai yang dikenal oleh server - dan kemudian mengirim semuanya ke klien dalam satu batch, yang memungkinkan klien untuk menjalankan fungsi dan melewatkan beberapa perhitungan yang telah dilakukan oleh server.

Alih-alih mengirim sejumlah besar fungsi Javascript generik dalam file .js ke klien yang tidak memiliki konteks sampai diberikan data (data yang mungkin duduk di server dan memerlukan perjalanan pulang-pergi), kita dapat "mem-bake-in" konteks / data sebagai bagian dari fungsi Javascript. Ini hemat karena itu berarti Anda mengirim fungsionalitas / data bersama, dan hanya mengirim fungsionalitas / data yang mungkin diperlukan klien saat itu, alih-alih mengirim seluruh aplikasi pada pemuatan halaman pertama. Ini juga berarti Anda tidak perlu membuat seluruh aplikasi Anda mudah diunduh dan direkayasa ulang pada pemuatan halaman pertama karena Anda hanya menyuntikkan sebagian kecil fungsi yang dibutuhkan setiap klien pada saat itu. Tidak yakin seberapa baik pertanda untuk SEO, tapi saya yakin itu dapat dioptimalkan sesuai.

Pertimbangkan kasus pengguna akhir menulis halaman di beberapa perangkat lunak CMS menggunakan editor WYSIWYG. Bagaimana pengguna ini akan menambahkan fungsionalitas baru ke halaman ketika mereka tidak memiliki akses ke file .js sumber Anda di server? Mereka beralih ke tab HTML dan menggunakan Javascript inline.

Tidak semua Javascript sebaris itu buruk; terkadang onclick juga baik-baik saja. Sebagai rekomendasi umum, hindari menulis Javascript sebaris dan Anda akan segera membangun kebiasaan yang baik.

Referensi:

Perry
sumber
0

Biasanya kode JS sebaris buruk, seperti yang lain katakan sebelum saya.

Tapi saya memikirkan use case di mana inline JS lebih baik .

Pikirkan CMS yang menyisipkan galeri berbasis JS. Galeri mungkin dilakukan di jQuery. Itu diidentifikasi oleh atribut id, yang tidak hanya unik di halaman, tetapi juga unik di seluruh situs. Dalam hal ini - saya pikir - JS inline akan lebih baik, karena kode JS hanya digunakan pada satu halaman dan Anda tidak memiliki overhead HTTP

Yunzen
sumber