Apakah JavaScript sebaris baik atau buruk?

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?

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.

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.

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.

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?

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.

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).

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:

• Caching sebaris
• Mengoptimalkan JavaScript dinamis dengan cache inline
• Menjelaskan JavaScript VMs dalam JavaScript - Inline Cache
• Mengapa saya harus menghindari skrip inline? (lihat jawaban MainMa & user1389596)

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