Bagaimana saya bisa mengurangi biaya memuat perpustakaan JS besar?

23

Jika saya menggunakan perpustakaan Javascript besar untuk halaman saya, bagaimana saya bisa memastikan bahwa ini tidak mengganggu penggunaan situs oleh pengguna?

javascript performance Macha
sumber

Jawaban:

25

Ada 4 hal yang bisa Anda lakukan.

  1. Perkecil File JS Anda. Ini menghapus semua komentar dan Whitespace untuk mengurangi ukurannya.
  2. Gabungkan File JS Anda di setiap halaman sehingga hanya ada 1 file.
  3. Gunakan paket untuk gzip file Anda saat Anda mengirimnya. Ini akan membuat mereka lebih kecil
  4. Masukkan Javascript yang tidak diperlukan segera di bagian bawah halaman sehingga memuat di akhir. Ini akan memungkinkan pengguna untuk melihat dan menggunakan halaman bahkan sebelum JS sepenuhnya dimuat.

Dan beberapa orang lain telah menyarankan:

  • Apache akan secara otomatis menangani kompresi (dan caching konten terkompresi) yang secara masif menyederhanakan pengelolaan file
  • Membuat JavaScript dengan benar dapat menyimpan cache akan menghasilkan manfaat besar.
  • Domain wildcard (dengan beberapa URI) akan memungkinkan koneksi yang lebih bersamaan. Pra-pengambilan bukan hanya untuk gambar /
Ben Hoffman
sumber
Ada banyak hal yang dapat Anda lakukan, dan cara-cara yang lebih baik untuk melakukannya. Apache akan secara otomatis menangani kompresi (dan caching konten terkompresi) yang secara besar-besaran menyederhanakan pengelolaan arsip. Membuat javascript dapat di-cache dengan baik akan menghasilkan banyak manfaat. Domain wildcard (dengan beberapa URI) akan memungkinkan koneksi yang lebih bersamaan. Pre-fetching bukan hanya untuk gambar /
symcbean
21

Jika Anda menggunakan perpustakaan umum (seperti jQuery, Prototype atau Dojo), Anda dapat menurunkan file ke Google dan membuatnya melayani , ini memberi Anda beberapa keuntungan:

  • Anda tidak perlu khawatir tentang minifying dan zipping dll
  • Ini bukan bandwidth Anda
  • File-file ini berasal dari domain yang berbeda, sehingga Anda dapat (setidaknya sebagian) mengatasi batas 2 permintaan paralel per nama host
  • Jika Anda beruntung, pengguna telah mengunjungi beberapa situs lain yang menggunakan pustaka yang sama dari penyedia yang sama, sehingga mereka sudah memilikinya di cache browser.

Catatan: Versi yang Anda minta dapat memiliki dampak besar pada karakteristik caching: meminta jQuery 1.4.2 akan memberi Anda file yang bisa di-cache selama setahun, tetapi 1.4 hanya bisa di-cache selama satu jam.

Cebjyre
sumber
1
+1 untuk CDN, dan scriptsrc.net agar lebih mudah;)
Agos
1
Bisakah Anda memperluas 'catatan' Anda? Mengapa ada perbedaan dalam waktu caching?
theycallmemorty
2
@ theycallmemorty: Meskipun saya belum memeriksa dokumen, saya akan berasumsi bahwa itu karena dengan menentukan 1.4.2 Anda menjadi sangat spesifik tentang versi yang Anda inginkan, sementara meminta 1.4 pada dasarnya Anda mengatakan "beri aku yang paling versi terbaru di bawah 1.4 ", sehingga mereka tidak terlalu caching.
Zhaph - Ben Duguid
Juga patut dicatat adalah bahwa Microsoft membuat beberapa perpustakaan JS (jQuery dan beberapa yang spesifik MS) tersedia di CDN mereka yang juga mendukung https (yang banyak CDN skrip lainnya tidak mendukung) asp.net/ajaxlibrary/cdn.ashx
Bert Lamb
6

Anda dapat menempatkan seluruh perpustakaan menjadi satu file js dan kompres file tersebut. Namun, itu hanya penting untuk pemuatan halaman pertama. Setelah ini, file js Anda akan di-cache di browser, khususnya jika Anda mengatur cache-expiration cukup lama. Karenanya setiap klik berurutan tidak akan memuat file js Anda lagi.

txwikinger
sumber
+1 untuk Anda dapat menempatkan seluruh perpustakaan dalam satu file dan mengompresnya. Tidak memikirkan itu.
Gordon Gustafson
4

Selain jawaban di atas, Anda dapat menggunakan Google Closure Compiler untuk secara otomatis mengompresi dan mengoptimalkan JS Anda sambil berintegrasi dengan perpustakaan pihak ketiga lainnya (jQuery, YUI, mootools, dll.)

mereka memanggil saya
sumber
0

Jika Anda memiliki sejumlah elemen halaman & akses ke domain terpisah, Anda dapat mempertimbangkan meng-hosting semua file statis termasuk file JS besar di domain kedua.

Seperti yang dicatat Steve Souders dalam blog Situs Web Kinerja Tinggi -

... dalam beberapa situasi, ada baiknya mengambil banyak sumber daya yang sedang diunduh pada satu domain dan membaginya ke beberapa domain. Saya menyebut domain ini pecahan. Melakukan ini memungkinkan lebih banyak sumber daya untuk diunduh secara paralel, mengurangi waktu pemuatan keseluruhan halaman.

di tempat lain dia menulis ..

Browser membuka sejumlah koneksi per domain ... Memisahkan, atau membagi, permintaan di dua domain, dibandingkan dengan satu domain, menghasilkan halaman yang lebih cepat, terutama di IE 6 & 7

mvark
sumber