Anda harus meletakkan kode JS Anda di file terpisah karena ini membuatnya lebih mudah untuk menguji dan mengembangkan. Pertanyaan tentang bagaimana Anda menyajikan kode adalah masalah yang berbeda.
Melayani HTML dan JS secara terpisah memiliki keuntungan bahwa klien dapat men-cache JS. Ini mengharuskan Anda untuk mengirim tajuk yang tepat sehingga klien tidak mengeluarkan permintaan baru setiap kali. Caching bermasalah jika Anda ingin melakukan pembaruan dan dengan demikian ingin membatalkan cache klien. Salah satu metode adalah dengan memasukkan nomor versi dalam nama file, misalnya /static/mylibrary-1.12.2.js.
Jika JS berada dalam file terpisah, Anda tidak dapat membatasi akses ke sana: Sulit (secara teknis: tidak mungkin) untuk mengetahui apakah permintaan ke file JS dibuat karena Anda mereferensikannya pada halaman HTML Anda, atau karena seseorang ingin mengunduhnya langsung. Namun Anda dapat menggunakan cookie dan menolak untuk melayani klien yang tidak mengirimkan cookie tertentu (tapi itu konyol).
Melayani JS di dalam HTML meningkatkan ukuran setiap halaman - tetapi ini OK jika klien tidak mungkin melihat beberapa halaman. Karena klien tidak mengeluarkan permintaan terpisah untuk JS, strategi ini memuat halaman lebih cepat - setidaknya untuk pertama kalinya, tetapi ada titik impas di mana caching lebih baik. Anda dapat memasukkan JS misalnya melalui PHP.
Di sini klien tidak perlu akses terpisah ke file JS, yang bisa disembunyikan jika Anda suka. Tapi siapa pun masih bisa melihat kode JS di dalam HTML.
Strategi lain untuk meminimalkan waktu muat termasuk
Minifikasi JS yang mengurangi ukuran file JS yang Anda layani. Karena minifikasi hanya terjadi satu kali ketika menggunakan kode, ini adalah metode yang sangat efisien untuk menghemat byte. OTOH ini membuat kode Anda lebih sulit dipahami oleh pengunjung yang tertarik.
Terkait dengan minifikasi adalah praktik menggabungkan semua file JS Anda dalam satu file. Ini mengurangi jumlah permintaan yang diperlukan.
Kompresi, yang menambahkan overhead komputasi untuk setiap permintaan pada klien dan server. Namun waktu yang dihabiskan (de-) kompresi biasanya lebih kecil daripada waktu yang dihabiskan untuk mentransmisikan data yang tidak terkompresi. Kompresi biasanya ditangani secara transparan oleh perangkat lunak server.
Teknik-teknik ini juga berlaku untuk sumber daya lain seperti gambar.
- Gambar dapat diuraikan ke dalam HTML atau CSS dengan data-URL. Ini hanya praktis untuk gambar kecil dan sederhana karena encoding base64 mengembang ukurannya. Ini masih bisa lebih cepat dari permintaan lain.
- Beberapa gambar kecil (ikon, tombol) dapat digabungkan menjadi satu gambar, dan kemudian diekstraksi sebagai sprite.
- Gambar dapat dikurangi oleh server ke ukuran di mana mereka sebenarnya digunakan di situs web, yang menghemat bandwidth. Bandingkan gambar thumbnail.
- Untuk beberapa grafik, gambar berbasis teks seperti SVG bisa jauh lebih kecil.
Jika Anda benar-benar hanya memiliki satu halaman maka ya, lebih baik (dari sudut pandang kinerja) untuk melayani segala sesuatu dalam satu file ... stylesheet, JavaScript, dan bahkan gambar (gambar kecil yang diuraikan dengan data-URI). Ini menghilangkan permintaan HTTP tambahan yang diperlukan untuk mengambil sumber daya eksternal yang relatif lambat.
File yang dihasilkan harus di-gzip sebelum disajikan, yang akan secara besar-besaran mengurangi ukuran semua respons teks.
Anda masih harus mempertimbangkan memiliki gambar besar di luar halaman, karena ada batasan ukuran data-URI dan kompatibilitas browser. (mis. IE8 memiliki batas 32KB, yang setara dengan ukuran file aktual sekitar 23KB karena sifat pengkodean base64.)
Tidak. Paling-paling kode itu dapat dikaburkan untuk "menyembunyikannya" dari pengamat biasa, tetapi tidak menawarkan perlindungan nyata.
sumber
Kode JS sisi klien harus dilihat oleh browser (yaitu, jika halaman perlu menggunakan JS secara langsung) - itu berarti harus diunduh oleh browser.
Anda tidak dapat memiliki browser menggunakan JS pada halaman jika tidak bisa mengunduhnya.
Dalam hal itu, tidak ada bedanya jika Anda sebaris JS atau memasukkannya ke dalam file, meskipun praktik umum adalah menggunakan file JS (pemisahan kekhawatiran untuk satu).
Jika Anda memiliki kode yang tidak ingin diekspos melalui browser, Anda harus menggunakan kode sisi server (katakanlah node.js, php, perl, asp.net, jsp - ada begitu banyak opsi) dan berinteraksi dengannya dari browser - baik pada pemuatan halaman awal atau menggunakan AJAX .
sumber
Yah itu tergantung pada jumlah kode, dan seberapa serius Anda tentang menjadi seorang programmer / insinyur perangkat lunak dibandingkan hanya seorang pembuat kode. Saya bekerja dengan sekelompok desainer yang menempatkan potongan kode pendek langsung ke HTML, dan sementara saya merasa ngeri - itu benar-benar bekerja.
Meskipun itu bukan sesuatu yang akan saya lakukan sendiri, dan jika Anda ingin mengetahui praktik terbaik pengembangan perangkat lunak, saya sangat menyarankan Anda untuk memilah semuanya dalam
*.jsfile eksternal dan memuatnya melalui<script>tag.Mengenai poin kedua Anda, tidak, Anda tidak dapat menyangkal pengguna atau browser untuk melihat kode Anda, ada sesuatu yang disebut
obfuscationyang akan membuat kode Anda lebih sulit dibaca, namun kinerjanya akan menurun.sumber
Lebih baik membuat file eksternal untuk kode JS Anda. Lebih baik memiliki satu atau dua file yang Anda layani untuk klien. Tapi, juga lebih baik untuk memiliki kode JS Anda dibagi di beberapa file untuk masalah pemeliharaan. Untuk dapat melakukan ini, Anda dapat menggunakan preprosesor seperti Gulp yang akan menggabungkan file JS yang berbeda ke satu file.
Menayangkan lebih sedikit file lebih baik karena klien akan memiliki lebih sedikit permintaan HTTP untuk ditangani.
Ya, jelas lebih cepat karena Anda hanya melakukan satu permintaan untuk HTML, sementara Anda akan melakukan banyak permintaan (setidaknya 2) dengan kode JS Anda sebagai eksternal. Ini hanya jika kode JS Anda tidak dikecilkan di kedua sisi, dan ini tidak memperhitungkan seberapa sulit untuk mempertahankan kode Anda jika semuanya dalam satu halaman HTML tunggal.
Tidak, kamu tidak bisa. Kode JS, seperti kode CSS dan kode HTML adalah konten statis. Itu berarti begitu ada di browser, klien dapat mengunduhnya dan isinya sepenuhnya. Setiap file, gambar, skrip terbuka untuk diunduh. Tetapi , Anda dapat memperkecil / mengklasifikasikan kode Anda sehingga lebih sulit bagi manusia untuk menggunakannya. Itu hanya konsekuensi dari jeleknya, yang dibuat untuk kinerja pertama.
sumber
Banyak Manfaat memisahkan konten html dan javascript menjadi file terpisah:
sumber