Laporan penyelidikan tentang kemahiran optimization_javascript pelaksanaan pemuatan Javascript

Saya telah melakukan pembangunan bahagian hadapan selama lebih daripada setahun, dan saya masih mempunyai beberapa cerapan tentang bahagian hadapan Hari ini saya akan berkongsi dengan anda.

Pembangunan bahagian hadapan memerlukan pelbagai alatan. Sebagai contoh, saya masih terbiasa menggunakan pelayar Google dan Fiddler senjata berat.

1: Situasi asal

Pertama sekali, lihat kod berikut:

Salin kod Kod adalah seperti berikut:

<%@ Bahasa Halaman="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Dianggarkan 90% pengaturcara akan meletakkan fail js di kepala, tetapi adakah anda pernah melihatnya? Banyak penyemak imbas akan menggunakan satu urutan untuk melakukan "kemas kini UI" dan "pemprosesan skrip JS",

Iaitu, apabila enjin pelaksanaan menemui "", muat turun dan pemaparan halaman mesti menunggu pelaksanaan Kemudian sedih untuk pengguna, melihat halaman yang dikunci,

Pada ketika ini pengguna berkemungkinan akan mematikannya untuk anda.

Kita boleh lihat dua mata daripada carta air terjun di atas:

Tempat pertama:

Tiga fail js dimuat turun secara selari, tetapi mengikut teori saya di atas, fail js harus dilaksanakan satu demi satu. Walau bagaimanapun, dalam IE8, Firefox3.5 dan Chrome2, muat turun selari js dilaksanakan,

Ini agak bagus, tetapi ia masih akan menghalang muat turun beberapa sumber lain, seperti gambar.

Kedua:

Muat turun gambar 1.jpg dicetuskan selepas pelaksanaan js selesai, yang juga mengesahkan keadaan di atas dan menghalang pemuatan imej.

Dua: Pengoptimuman Langkah Pertama

Memandangkan js menghalang pemaparan UI, kami boleh mempertimbangkan untuk meletakkan js sebelum , supaya html sebelum dapat dipaparkan dengan sempurna dan pengguna tidak akan melihat halaman kosong menunggu

Keadaan tertekan secara semula jadi meningkatkan kemesraan.

Salin kod Kod adalah seperti berikut:

<%@ Bahasa Halaman="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

Gambar di bawah juga menunjukkan bahawa 1.jpg dan tiga js dimuat turun dan dilaksanakan hampir selari. Masa dikurangkan daripada "469ms" ke atas kepada "326ms".

Tiga: Langkah kedua pengoptimuman

Melihat pada "carta air terjun" di atas, anda mungkin perasan bahawa tiga fail js membuat tiga permintaan "Dapatkan" Semua orang tahu bahawa permintaan Dapatkan perlu membawa pengepala http,

Jadi ia mengambil masa, jadi penyelesaian yang kami ambil adalah secara semula jadi untuk mengurangkan permintaan Dapatkan. Selalunya ada dua pilihan.

Pertama: Gabungkan fail js, seperti menggabungkan "hello.js" dan "world.js" di atas.

Kedua: Gunakan alat pihak ketiga, seperti Minify dalam php.

Mengenai kaedah kedua, taobao masih digunakan dengan lebih kerap. Lihat salah satu skrip, yang menggunakan tiga fail js. Daripada 3 Dapatkan permintaan kepada 1.

Empat: Langkah ketiga pengoptimuman

Sama ada anda meletakkan fail js di hujung atau menggabungkan tiga menjadi satu, intipatinya ialah "mod penyekat", yang bermaksud mengunci penyemak imbas Apabila halaman web menjadi lebih kompleks dan semakin banyak fail js, Atau

Apa yang membuat kami sakit kepala, pada masa ini kami menganjurkan "mod tanpa sekatan" untuk memuatkan skrip js, iaitu, tambahkan js selepas halaman dipaparkan sepenuhnya, yang sepadan dengan apabila peristiwa window.onload dicetuskan, kami

Lampirkan js, ini dipanggil "tidak menyekat", tetapi satu perkara yang perlu kami perhatikan ialah sama ada keperluan kami untuk js berada dalam susunan yang ketat.

Pertama: Tiada keperluan pesanan Contohnya, saya tidak mempunyai keperluan pesanan untuk "hello.js" dan "world.js", kemudian kita boleh menggunakan jquery untuk menambahkan pelaksanaan secara dinamik.

Salin kod Kod adalah seperti berikut:

<%@ Bahasa Halaman="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">







")
                 $("#head").append("");
}

Seperti yang dapat dilihat daripada gambar, "hello.js" dan "world.js" muncul selepas garis biru, yang bermaksud bahawa kedua-dua js ini dicetuskan untuk dimuatkan selepas DomContentLoad tamat, supaya ia tidak Menyebabkan kunci halaman

Tunggu.

Kedua: Ada syarat tempahan

Kenapa mesti ada konsep keperluan pesanan? Mengenai fail "dua js" yang dilampirkan secara dinamik di atas, dalam siri IE, anda tidak boleh menjamin bahawa hello.js akan dilaksanakan sebelum world.js,

Dia hanya akan melaksanakan kod mengikut susunan yang dikembalikan oleh pelayan.

Salin kod Kod adalah seperti berikut:

<%@ Bahasa Halaman="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsLoad.Default" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">