Mengapa saya harus menghindari skrip inline?

Seorang teman yang berpengetahuan baru-baru ini melihat sebuah situs web yang saya bantu luncurkan, dan berkomentar sesuatu seperti "situs yang sangat keren, malu tentang skrip inline dalam kode sumber".

Saya jelas berada dalam posisi untuk menghapus skrip inline di tempat terjadinya; Samar-samar saya sadar bahwa itu "hal yang buruk". Pertanyaan saya adalah: apa masalah sebenarnya dengan skrip inline? Apakah ada masalah kinerja yang signifikan, atau sebagian besar hanya masalah gaya yang baik? Dapatkah saya membenarkan tindakan langsung di bagian depan skrip inline kepada atasan saya, ketika ada hal-hal lain untuk dikerjakan yang mungkin memiliki dampak yang lebih jelas di situs? Jika Anda membuka situs web, dan mengintip kode sumbernya, faktor apa yang akan mengarahkan Anda untuk mengatakan "hmm, kerja profesional di sini", dan apa yang akan menyebabkan Anda mundur dari pekerjaan yang jelas-jelas amatir?

Oke, pertanyaan itu berubah menjadi beberapa pertanyaan dalam penulisan. Tapi pada dasarnya, skrip inline - apa masalahnya?

apa masalah sebenarnya dengan skrip inline? Apakah ada masalah kinerja yang signifikan, atau sebagian besar hanya masalah gaya yang baik?

Keuntungannya bukan berbasis kinerja, melainkan (seperti yang ditunjukkan Michael dalam komentarnya) lebih berkaitan dengan pemisahan tampilan dan pengontrol. File HTML / CSS harus, idealnya, hanya berisi presentasi dan file terpisah harus digunakan untuk skrip. Itu membuatnya lebih mudah bagi Anda (dan teman-teman Anda) untuk membaca dan memelihara aspek visual dan fungsional.

Dapatkah saya membenarkan tindakan langsung di bagian depan skrip inline kepada atasan saya, ketika ada hal-hal lain untuk dikerjakan yang mungkin memiliki dampak yang lebih jelas di situs?

Tidak, mungkin juga tidak. Mungkin sangat sulit untuk meyakinkan kekuatan yang ada pada pekerjaan pemeliharaan murni, bahkan jika Anda yakin itu akan menghemat uang dalam jangka panjang. Namun dalam hal ini, saya pikir itu tidak begitu penting sehingga Anda harus menghentikan semuanya dan menyingkirkan skrip inline Anda. Alih-alih, pastikan saja Anda melakukan upaya sadar untuk memperbaiki area saat Anda mengerjakannya karena alasan lain. Kode refactoring harus menjadi sesuatu yang Anda lakukan secara teratur tetapi hanya sedikit demi sedikit.

Jika Anda membuka situs web, dan mengintip kode sumbernya, faktor apa yang akan mengarahkan Anda untuk mengatakan "hmm, kerja profesional di sini", dan apa yang akan menyebabkan Anda mundur dari pekerjaan yang jelas-jelas amatir?

Faktor nomor satu yang akan memberitahu saya itu tidak profesional adalah terlalu sering menggunakan tabel atau div. Berikut adalah artikel yang menjelaskan mengapa keduanya tidak boleh digunakan secara berlebihan.

Saya tidak akan menjadi pendukung iblis, tetapi tidak ada hubungan yang ketat antara pekerjaan amatir dan JavaScript sebaris. Mari kita lihat kode sumber dari beberapa situs web yang paling dikenal:

• Google,
• Wikipedia,
• Microsoft,
• Adobe,
• Dell,
• IBM.

Setiap halaman beranda mereka menggunakan JavaScript sebaris. Apakah ini berarti bahwa semua perusahaan tersebut mempekerjakan orang-orang amatir untuk membuat beranda mereka?

Saya salah satu pengembang yang tidak bisa memasukkan kode JavaScript ke dalam HTML. Saya tidak pernah melakukannya di dalam proyek yang saya kerjakan (kecuali mungkin beberapa panggilan seperti <a href="javascript:...">untuk proyek-proyek di mana JavaScript yang tidak mencolok tidak menjadi persyaratan sejak awal, dan saya selalu menghapus inline JavaScript ketika saya memperbaiki kode orang lain. Tetapi apakah itu sepadan dengan usaha ? Tidak begitu yakin.

Dari segi kinerja, Anda tidak selalu memiliki kinerja yang lebih baik saat meletakkan JavaScript di file terpisah. Biasanya, kami tergoda untuk mempertimbangkan bahwa bandwidth limbah inline JavaScript, karena tidak dapat di-cache (kecuali ketika Anda berurusan dengan HTML cacheable statis). Sebaliknya, file .js eksternal hanya dimuat satu kali.

Pada kenyataannya, ini hanyalah optimasi prematur : Anda mungkin berpikir benar bahwa mengeksternalisasi JavaScript akan mempercepat situs web Anda, tetapi Anda juga mungkin salah total:

• Bagaimana jika sebagian besar pengguna Anda datang dengan cache kosong?
• Apakah Anda menganggap bahwa dengan file .js eksternal, permintaan akan dibuat untuk file ini di setiap permintaan halaman, jika situs web tidak dikonfigurasi dengan benar (dan biasanya, tidak),
• Apakah file .js benar-benar di-cache (dengan IIS, mungkin tidak begitu mudah)?

Jadi sebelum mengoptimalkan secara prematur, kumpulkan statistik tentang pengunjung Anda, dan evaluasi kinerja dengan dan tanpa JavaScript sebaris.

Kemudian muncul argumen terakhir: Anda mencampur JavaScript dan HTML di sumber Anda, sehingga Anda payah. Tapi siapa bilang kamu mencampurkan keduanya? Kode sumber yang digunakan oleh browser tidak selalu kode sumber yang Anda tulis. Sebagai contoh, kode sumber dapat dikompresi, minified, atau beberapa CSS atau JS file dapat bergabung ke dalam satu file, tapi ini tidak berarti bahwa Anda benar-benar bernama Anda variabel a, b, c... a1, dll atau bahwa Anda menulis file CSS besar tanpa spasi atau baris baru. Dengan cara yang sama, Anda dapat dengan mudah menyuntikkan kode sumber JavaScript eksternal ke dalam HTML pada waktu kompilasi atau yang lebih baru melalui templat.

Untuk menyimpulkan, jika Anda mencampur JavaScript dan HTML dalam kode sumber yang Anda tulis, Anda harus mempertimbangkan untuk tidak melakukannya di proyek mendatang. Tetapi itu tidak berarti bahwa jika kode sumber yang dikirim ke browser berisi JavaScript sebaris, itu selalu buruk.

• Itu mungkin buruk.
• Sebaliknya mungkin itu pertanda bahwa situs web itu ditulis oleh para profesional yang peduli dengan kinerja, membuat tes khusus, dan menetapkan bahwa akan lebih cepat bagi klien mereka untuk menyejajarkan bagian-bagian JavaScript.
• Atau mungkin tidak ada artinya sama sekali.

jadi agak malu pada orang yang mengatakan "situs yang sangat keren, malu tentang skrip inline dalam kode sumber" dengan melihat sumber yang dikirim ke browser, tanpa mengetahui apa-apa tentang bagaimana situs web dilakukan.

Biasanya baik untuk mencoba menjaga HTML dan JS tetap terpisah. HTML untuk tampilan, JS untuk logika aplikasi. Tetapi dalam pengalaman saya, decoupling ekstrim html dan javascript (demi kemurnian) tidak membuatnya lebih mudah dikelola; sebenarnya bisa kurang dipelihara.

Misalnya, saya kadang-kadang menggunakan pola ini (dipinjam dari ASP.net) dalam mengatur penangan acara:

<input type="button" id="yourId" onclick="clickYourId()" />

atau

<input type="button" id="yourId" onclick="clickYourId(this)" />

Tidak ada misteri apa yang memicu terjadinya suatu peristiwa. Alasannya adalah bahwa enam bulan kemudian Anda dapat memeriksa elemen (misalnya, di Chrome) dan melihat langsung apa yang dipicu peristiwa javascript.

Di sisi lain, bayangkan Anda membaca kode orang lain, yaitu seratus ribu baris, dan Anda menemukan elemen ajaib yang memicu peristiwa javascript:

<input id="yourId"  />

Bagaimana Anda bisa dengan mudah memberi tahu saya metode javascript apa yang dihubungi? Chrome telah mempermudah ini, tetapi mungkin acara terkait dengan id, atau mungkin terikat pada anak pertama dari wadah. Mungkin acara tersebut dilampirkan ke objek induk. Siapa tahu? Semoga berhasil menemukannya. :)

Juga, saya berpendapat bahwa menyembunyikan javascript sepenuhnya dari perancang sebenarnya dapat meningkatkan kemungkinan mereka memecahnya pada pembaruan. Jika seseorang mengedit kode untuk elemen aktif secara ajaib, indikasi apa dalam kode yang mereka miliki yang akan membuat mereka tahu ini adalah elemen aktif di halaman?

Jadi singkatnya, praktik terbaik adalah memisahkan HTML dan Javascript. Tetapi juga memahami aturan praktis yang terkadang kontraproduktif saat dijalankan secara ekstrem. Saya akan berdebat untuk pendekatan jalan tengah. Hindari sejumlah besar inline js. Jika Anda menggunakan inline, tanda tangan fungsi harus sangat sederhana seperti:

1. emptyFunction()
2. doCallWithThis(this)
3. atTheExtremOnlyPassOneNumber(2)

Satu argumen yang saya lewatkan di sini adalah kemungkinan peningkatan perlindungan terhadap serangan skrip lintas situs .

Dimungkinkan untuk menonaktifkan eksekusi JavaScript sebaris di browser modern melalui Kebijakan Keamanan Konten . Ini mengurangi risiko situs Anda menjadi korban XSS. Ini mungkin argumen yang lebih meyakinkan untuk membuat manajemen Anda berinvestasi dalam menghapus skrip inline.

Berikut beberapa alasannya.

1. Skrip sebaris tidak dapat diperkecil (dikonversi ke versi yang lebih pendek melalui pengurangan simbol). Bukan masalah broadband tetapi pertimbangkan perangkat seluler di area bandwidth rendah, atau pengguna yang roaming data global - setiap byte mungkin diperhitungkan.

2. Skrip sebaris tidak bisa di-cache oleh browser kecuali halaman itu sendiri dapat di-cache (yang akan membuat halaman menjadi sangat membosankan). File Javascript eksternal hanya perlu diambil sekali, bahkan jika konten halaman berubah setiap saat. Serius dapat mempengaruhi kinerja pada koneksi bandwidth rendah.

3. Skrip inline lebih sulit untuk di-debug karena nomor baris yang dikaitkan dengan kesalahan tidak ada artinya.

4. Skrip inline dianggap mengganggu pertimbangan aksesibilitas (508 / WAI), meskipun itu tidak berarti semua skrip inline menyebabkan masalah. Jika Anda berakhir dengan pembaca layar yang mengumumkan konten skrip Anda memiliki masalah! (Belum pernah melihat ini terjadi).

5. Skrip sebaris tidak dapat diuji secara independen dari halamannya; file Javascript eksternal dapat dijalankan melalui pengujian independen, termasuk pengujian otomatis.

6. Skrip sebaris dapat menyebabkan pemisahan keprihatinan yang buruk (seperti yang dijelaskan oleh banyak jawaban lain di sini).

Ada beberapa alasan yang akan membenarkan tidak termasuk skrip inline:

• Pertama-tama, jawaban yang jelas - itu membuat kode yang lebih bersih, lebih ringkas, lebih mudah dipahami dan dibaca.

• Dari sudut pandang yang lebih praktis, Anda sering ingin menggunakan kembali skrip / CSS / dll. di seluruh situs web Anda - dengan menggarisbawahi bagian-bagian ini berarti harus mengedit setiap halaman setiap kali Anda melakukan perubahan kecil.

• Jika Anda menggunakan SCM untuk proyek Anda, maka memisahkan komponen yang berbeda akan membuat pelacakan perubahan dan melakukan lebih mudah untuk semua orang yang terlibat.

Sejauh yang saya tahu, kinerja tidak akan menjadi perhatian. Itu akan tergantung pada banyak hal yang berkaitan dengan sifat situs web Anda, spesifikasi server Anda, dll. Misalnya, jika halaman web Anda menggunakan banyak javascript, browser Anda dapat men-cache skrip, yang akan menghasilkan kinerja yang lebih baik ketika kode dipisahkan dalam beberapa file. Di sisi lain, saya akan tergoda untuk mengatakan bahwa beberapa server mungkin melayani satu file besar lebih cepat daripada beberapa file kecil - dalam hal ini orang dapat berargumen bahwa tidak memisahkan kode adalah kinerja yang lebih baik.

Saya tidak mengetahui adanya tes formal di bidang ini, meskipun sangat mungkin seseorang telah melakukannya.

Pada akhirnya, saya akan mengatakan bahwa ini adalah masalah praktik yang baik lebih dari yang lain, dan bahwa keuntungan dalam hal keterbacaan dan organisasi (khususnya poin 2) membuat memisahkan kode dalam file yang berbeda menjadi pilihan yang jauh lebih baik.

Jawabannya sangat tergantung pada bagaimana kode in-line (dengan asumsi javascript) digunakan.

Kami menggunakan kombinasi kode inline, SSI (sisi server termasuk), file js dan file css untuk membuat efek yang kami inginkan dan juga mengurangi perjalanan kembali server untuk acara onClick.

Jadi bagi seseorang untuk membuat pernyataan selimut bahwa penggunaan "kode in-line" adalah buruk tanpa sepenuhnya memahami bagaimana itu digunakan dapat menyesatkan.

Karena itu, jika setiap halaman memiliki salinan dan kode javascript yang sama disisipkan daripada menggunakan file js saya katakan itu buruk.

Jika setiap halaman memiliki salinannya sendiri dan menempelkan bagian CCS daripada menggunakan file css saya katakan itu buruk.

Ini juga banyak overhead untuk menyertakan seluruh perpustakaan js Anda pada setiap halaman, terutama jika tidak ada fungsi yang digunakan pada halaman itu.

Saya akan mengasumsikan javascript inline di sini.

Tanpa melihat kode, sulit untuk memastikan. Saya curiga dia merujuk pada salah satu dari dua hal berikut:

1. Anda telah <script>tersebar di seluruh halaman
2. Semua yang Anda JS ada di header halaman, bukan di file eksternal

Yang pertama adalah keputusan desain yang buruk. Menyebarkan skrip di seluruh file sumber membuat halaman lebih sulit untuk dipelihara, karena Anda harus mencari skrip yang diberikan. Jauh lebih baik menyimpan semua kode itu di satu tempat (saya lebih suka di bagian atas file sumber).

Adapun yang kedua - itu belum tentu hal yang buruk. Kode khusus halaman harus ada di halaman itu. Jika Anda memiliki kode duplikat antar halaman, Anda harus mengeksternalisasi menggunakan <script src>. Kemudian ketika Anda pergi untuk membuat halaman baru, Anda dapat dengan mudah memasukkan file itu dan bug apa pun yang Anda perbaiki tidak perlu ditinjau kembali.

Salah satu alasan untuk TIDAK menggunakan InLine Javascript (bahkan onclick = "DoThis (this)" pada tombol), adalah jika Anda bermaksud menjadikan aplikasi web Anda sebagai Aplikasi Chrome. Jadi, jika Anda berencana untuk port aplikasi web Anda ke Native Chrome App, mulailah dengan TIDAK termasuk javascript inline. Ini dijelaskan tepat di awal apa yang perlu Anda ubah (wajib) dari aplikasi web Anda jika Anda bermaksud untuk "Chrome-etize" itu.

Apa masalah sebenarnya dengan skrip inline?

Skrip sebaris itu buruk dan harus dihindari karena membuat kode lebih sulit dibaca.

Kode yang sulit dibaca sulit dipertahankan. Jika Anda tidak dapat dengan mudah membacanya dan memahami apa yang terjadi, Anda tidak akan dapat dengan mudah menemukan bug. Jika sulit untuk mempertahankannya, itu akan membuang lebih banyak waktu Anda nanti ketika ada masalah.

Kesulitan biasanya berasal dari pengkodean bersarang. Ada masalah di baris kode berikutnya, dapatkah Anda menemukannya?

<a onclick='alert("What\'s going wrong here?")'>Alert!</a>

Kode idealnya ditulis dengan cara yang membuatnya mudah dikenali ketika ada kesalahan. Joel Spolsky menulis artikel bagus yang menekankan hal ini pada tahun 2005 . Contoh kode dapat menggunakan beberapa peningkatan signifikan, karena mereka menunjukkan usia mereka 9 tahun, tetapi konsep dasarnya masih kuat: tulis kode dengan cara yang membuatnya mudah untuk memilih bug.

Apakah ada masalah kinerja yang signifikan, atau sebagian besar hanya masalah gaya yang baik?

Script sebaris mengarah ke pengulangan. Alih-alih mengubah satu baris kode untuk mempengaruhi 100 halaman, Anda mungkin perlu mengubah 100 halaman secara terpisah. Ini bersama dengan keterbacaan yang buruk sangat mempengaruhi kinerja pengelola . Waktu pemrograman memiliki biaya nyata yang memengaruhi garis bawah bisnis lebih cepat daripada beberapa milidetik dari sebagian besar optimasi kode. Tentu saja mengoptimalkan kemacetan adalah penting, tetapi perbedaan kinerja kode diabaikan dalam kasus ini.

Dapatkah saya membenarkan tindakan langsung di bagian depan skrip inline kepada atasan saya, ketika ada hal-hal lain untuk dikerjakan yang mungkin memiliki dampak yang lebih jelas di situs?

Tidak. Jika itu bodoh dan berhasil, itu tidak bodoh.

Pemograman yang wajar adalah: jika ini kode bodoh dan berfungsi, itu bukan kode bodoh. Fokus pada masalah yang sebenarnya sebelum mencoba memperbaiki sesuatu yang tidak rusak. Ketika kode inline pada akhirnya membutuhkan pembaruan, apakah itu dalam enam jam, enam bulan, atau enam tahun, perbaiki kode sedemikian rupa sehingga memudahkan pemeliharaan di masa mendatang.

Faktor-faktor apa yang akan membuat Anda berkata "hmm, kerja profesional di sini", dan apa yang akan menyebabkan Anda mundur dari pekerjaan yang jelas-jelas amatir?

Saya cenderung lebih suka mendefinisikan "profesional" hanya sebagai seseorang yang dibayar untuk melakukan tugas, daripada menganggap bahwa mereka memiliki kemampuan signifikan dalam apa yang harus mereka lakukan. Banyak profesional yang mampu melakukan pekerjaan dengan baik, tetapi lebih sering saya merasa ngeri dengan pekerjaan yang mengerikan yang dilakukan oleh para profesional lain daripada sesuatu yang muncul dari seorang amatir. Sebagian besar pekerjaan saya hingga saat ini melibatkan penyelamatan proyek kecelakaan kereta api yang dirusak oleh pengembang awal, sehingga jarak tempuh Anda mungkin bervariasi.

Dengan semua yang dikatakan, umumnya mudah untuk memilih pemrograman kualitas perusahaan