Apa cara terbaik untuk memuat Javascript ke halaman untuk mengoptimalkan kinerja?


Jawaban:


14

Ada beberapa hal yang dapat Anda lakukan:

  1. 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.

  2. 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.

  3. 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.

  4. Aktifkan kompresi zip di server web.

Yahoo memiliki halaman saran yang bagus yang dapat membantu mengurangi waktu pemuatan halaman.


1
Yahoo juga mendistribusikan plugin YSlow untuk Firefox yang menganalisis halaman Anda terhadap praktik terbaik yang disebutkan di atas dan memberi Anda kartu laporan. Lihat developer.yahoo.com/yslow
Alan

1
Ada juga teknik seperti asynchronous loading yang dapat digunakan jika Anda memiliki elemen situs yang tidak memerlukan skrip untuk dimuat ketika halaman awalnya dirender. Baik ini dan menempatkan skrip dekat dengan bagian bawah halaman memiliki keterbatasan; dalam beberapa kasus Anda perlu memuat JS di kepala dokumen.
JasonBirch

7

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/


1
Hei, kau mencuri CDNing; itu seharusnya berarti melakukan sesuatu Kanada! ;)
JasonBirch

jajajaja good one
The Disintegrator

7

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/


3

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 .


1

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

Memuat halaman dengan css di kepala dan javascript di bagian bawah

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

Memuat halaman dengan javascript non-pemblokiran

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

Memuat halaman dengan segala yang non-pemblokiran

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:


Perbedaannya adalah lokasi garis biru, yang saya duga adalah ketika halaman mulai dirender. Dari sudut pandang pengguna akhir, ini adalah saat halaman "dimuat", karena ini adalah saat mereka mulai melihat barang. Dalam contoh pertama, render dimulai setelah file JS terakhir dimuat, pada tanda 900ms. Yang kedua, itu setelah stylesheet dimuat (~ 700 ms). Yang ketiga, setelah HTML diunduh (~ 500ms). Saya masih akan pergi dengan pendekatan kedua, karena Anda tidak benar-benar ingin memuat CSS setelah halaman render.
Tim Fountain
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.