Apa cara terbaik untuk memuat Javascript ke halaman untuk mengoptimalkan kinerja?
Jawaban:
Ada beberapa hal yang dapat Anda lakukan:
Muat HTML dan CSS sebelum javascript. Ini memberi browser segala yang dibutuhkan untuk meletakkan halaman dan merendernya. Ini memberi pengguna kesan bahwa halaman itu tajam. Tempatkan tag atau blok skrip sedekat mungkin dengan tag body penutup.
Pertimbangkan untuk menggunakan CDN. Jika Anda menggunakan salah satu perpustakaan populer seperti JQuery, banyak perusahaan (misalnya google, yahoo) mengoperasikan CDN gratis yang dapat Anda gunakan untuk memuat perpustakaan.
Muat kode untuk file eksternal daripada skrip tertanam. Ini memberi browser kesempatan untuk men-cache konten JS dan tidak perlu memuatnya sama sekali. Pemuatan halaman yang berurutan akan lebih cepat.
Aktifkan kompresi zip di server web.
Yahoo memiliki halaman saran yang bagus yang dapat membantu mengurangi waktu pemuatan halaman.
Selain Menandai, gziping, dan CDNing (kata baru?). Anda harus mempertimbangkan menunda pemuatan. Pada dasarnya yang dilakukan adalah menambahkan skrip secara dinamis dan mencegah pemblokiran, memungkinkan unduhan paralel.
Ada banyak cara untuk melakukannya, ini yang saya sukai
<script type="text/javascript">
function AttachScript(src) {
window._sf_endpt=(new Date()).getTime();
var script = document.createElement("script");
document.getElementsByTagName("body")[0].appendChild(script);
script.src = src;
}
AttachScript("/js/scripts.js");
AttachScript("http://www.google-analytics.com/ga.js");
</script>Tempatkan ini tepat sebelum tag penutup tubuh dan gunakan AttachScript untuk memuat setiap file js.
Beberapa info lebih lanjut di sini http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/
Anda mungkin ingin melihat cara Google memuat Analytics juga:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>Karena dianggap sebagai skrip "praktik terbaik":
http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
Beberapa orang Google mengumumkan proyek open source baru di Velocity 2010 yang disebut Diffable . Diffable melakukan beberapa sihir untuk secara bertahap menerbitkan hanya bagian JS, HTML, dan CSS yang telah berubah sejak versi yang disimpan dalam cache pengguna, daripada mengirim seluruh file baru ketika versi baru dirilis.
Teknik ini sangat keren, dan saat ini paling efektif (dan sepadan dengan usaha) di situs web di mana Anda menggunakan basis kode JavaScript besar dengan sedikit perubahan kode yang sering. Ini berlaku terutama untuk aplikasi seperti Google Maps, yang mengalami setidaknya satu rilis setiap hari Selasa , dan rata-rata sekitar 100 rilis baru dalam setahun. Ini juga masuk akal secara umum setelah penyimpanan lokal HTML5 menjadi lebih luas.
BTW, jika Anda belum melihat Google Michael Jones berbicara tentang perubahan (dalam konteks geospasial) ada baiknya menonton seluruh keynote-nya di GeoWeb 2009 .
Untuk memberi pembaruan pada pertanyaan ini. Saya pikir di dunia modern, cara memuat non-pemblokiran tidak diperlukan lagi, browser akan melakukannya untuk Anda.
Saya telah menambahkan pertanyaan ke StackOverflow, saya akan menambahkan konten di sini aswel.
Satu-satunya perbedaan adalah bahwa peristiwa pemuatan akan dipecat sedikit lebih awal, tetapi pemuatan file itu sendiri tetap sama. Saya juga ingin menambahkan bahwa bahkan jika onload kebakaran sebelumnya dengan skrip non-blocking, ini tidak berarti file JS dipecat sebelumnya. Dalam kasus saya pengaturan normal keluar yang terbaik
Sekarang pertama skrip, mereka terlihat seperti ini:
<script>
(function () {
var styles = JSON.parse(myObject.styles);
for( name in styles ){
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', styles[name]);
document.getElementsByTagName('head')[0].appendChild(link);
}
var scripts = JSON.parse(myObject.scripts);
for( name in scripts ){
var e = document.createElement('script');
e.src = scripts[name];
e.async = true;
document.getElementsByTagName('head')[0].appendChild(e);
}
}());
</script>myObject.styles di sini hanya sebuah objek yang menampung semua url untuk semua file.
Saya sudah menjalankan 3 tes, berikut hasilnya:
Pengaturan normal
Ini hanya pengaturan normal, kami memiliki 4 file css di kepala, dan 3 file css di bagian bawah halaman.
Sekarang saya tidak melihat ada yang menghalangi. Apa yang saya lihat itu semuanya memuat pada saat yang sama.
JS yang tidak memblokir
Sekarang untuk mengambil ini sedikit lebih jauh, saya telah HANYA membuat file js non-blocking. Ini dengan skrip di atas. Tiba-tiba saya melihat bahwa file css saya memblokir beban. Ini aneh, karena tidak menghalangi apa pun dalam contoh pertama.Mengapa css tiba-tiba memblokir beban?
Semuanya non-blocking
Akhirnya saya melakukan tes di mana semua file eksternal dimuat dengan cara yang tidak menghalangi. Sekarang saya tidak melihat perbedaan dengan metode pertama kami. Mereka berdua terlihat sama.
Kesimpulan
Kesimpulan saya adalah bahwa file sudah dimuat dengan cara non-blocking, saya tidak melihat kebutuhan untuk menambahkan skrip khusus.
Atau saya kehilangan sesuatu di sini?
Lebih:
- Artikel: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
- Pertanyaan: /programming/6828271/javascript-non-blocking-scripts-why-dont-simply-put-all-scripts-before-body
- Pertanyaan: /programming/5765113/do-modern-browsers-still-limit-parallel-downloads
- Kode: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
- Kode: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/