Jika saya mendesain situs web satu halaman, apakah lebih baik membuat file eksternal untuk kode JS saya, atau hanya memasukkannya ke dalam kode html? Apakah meletakkannya di halaman lebih cepat dimuat? Bisakah saya mengubah izin untuk menolak permintaan pengguna untuk kode, tetapi halaman html masih dapat memanggil kode?
Jawaban:
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.
Saya merancang situs web satu halaman
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.)
Bisakah saya mengubah izin untuk menolak permintaan pengguna untuk kode, tetapi halaman html masih dapat memanggil kode?
Tidak. Paling-paling kode itu dapat dikaburkan untuk "menyembunyikannya" dari pengamat biasa, tetapi tidak menawarkan perlindungan nyata.
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 .
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.
apakah lebih baik membuat file eksternal untuk kode JS saya, atau hanya memasukkannya ke dalam kode html?
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.
Apakah meletakkannya di halaman lebih cepat dimuat?
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.
Bisakah saya mengubah izin untuk menolak permintaan pengguna untuk kode, tetapi halaman html masih dapat memanggil kode?
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.
Banyak Manfaat memisahkan konten html dan javascript menjadi file terpisah: