Saya telah bekerja di pengembangan front-end selama lebih dari setahun, dan saya masih memiliki beberapa wawasan tentang front-end. Hari ini saya akan berbagi dengan Anda.
Berbagai alat yang kuat sangat diperlukan untuk pengembangan front-end. Misalnya, saya terbiasa menggunakan Google Browser dan Fiddller senjata berat.
1: Situasi Asli
Pertama, mari kita lihat kode berikut:
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" mewariskan = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<tautan href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
<skrip src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<skrip src = "js/hello.js" type = "text/javascript"> </script>
<skrip src = "js/world.js" type = "text/javascript"> </script>
</head>
<body>
<img src = "1.jpg" />
</body>
</html>
Diperkirakan 90% pemrogram akan memasukkan file JS di kepala, tetapi apakah Anda pernah menggali? Banyak browser akan menggunakan satu utas untuk melakukan "Interface UI Update" dan "JS Script Processing".
Yaitu, ketika mesin eksekusi bertemu "<script>", unduhan dan rendering halaman harus menunggu eksekusi <script> diselesaikan. Maka itu menyedihkan bagi pengguna, melihat halaman yang terkunci,
Saat ini, pengguna mungkin akan mematikannya untuk Anda.
Dari diagram air terjun di atas kita dapat melihat dua poin:
Pertama:
Tiga file JS diunduh secara paralel, tetapi menurut teori saya di atas, JS harus dieksekusi satu per satu. Namun, di IE8, Firefox 3.5 dan Chrome 2 keduanya menerapkan unduhan paralel dari JS.
Ini cukup bagus, tetapi masih akan menghalangi pengunduhan dari beberapa sumber daya lain, seperti gambar.
Kedua:
Pengunduhan gambar 1.jpg dipicu setelah eksekusi JS selesai, yang juga memverifikasi situasi yang disebutkan di atas dan mencegah gambar dari pemuatan.
Dua: Langkah pertama adalah optimasi
Karena JS mencegah rendering UI, kita dapat mempertimbangkan meletakkan JS di depan </body>, sehingga HTML sebelum <script> dapat diterjemahkan dengan sempurna tanpa membiarkan pengguna melihat halaman kosong menunggu.
Dan situasi yang tertekan secara alami meningkatkan persahabatan.
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" mewariskan = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<tautan href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<skrip src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<skrip src = "js/hello.js" type = "text/javascript"> </script>
<skrip src = "js/world.js" type = "text/javascript"> </script>
</body>
</html>
Gambar di bawah ini juga menunjukkan bahwa 1.jpg dan tiga JS diunduh dan dieksekusi hampir paralel. Waktu dikurangi dari "469ms+" di atas menjadi "326ms".
Tiga: Langkah Kedua Optimalisasi
Melihat "diagram air terjun" di atas, saya kira semua orang juga dapat melihat bahwa tiga file JS membuat tiga permintaan "dapatkan". Semua orang tahu bahwa mendapatkan permintaan perlu memiliki header HTTP.
Jadi butuh waktu, jadi solusi yang kami adopsi secara alami untuk mengurangi permintaan mendapatkan. Biasanya ada dua opsi.
Pertama: menggabungkan file JS, seperti menggabungkan "hello.js" dan "world.js" di atas.
Kedua: Gunakan alat pihak ketiga, seperti minify dalam PHP.
Mengenai metode kedua, Taobao digunakan cukup banyak. Lihatlah salah satu skrip dan menerapkan tiga file JS. Ubah dari 3 mendapatkan permintaan ke 1.
Keempat: Langkah ketiga optimasi
Apakah itu meletakkan file JS di ujung kaki atau menggabungkan tiga menjadi satu, esensinya adalah "mode pemblokiran", yang berarti mengunci browser. Ketika halaman web menjadi semakin kompleks, ada semakin banyak file JS, atau
Apa yang membuat kami sakit kepala, pada saat ini, kami menganjurkan "tidak ada mode pemblokiran" untuk memuat skrip JS, yaitu, semua halaman disajikan dan kemudian JS ditambahkan, yang sesuai dengan pemicu peristiwa window.
Menambahkan JS adalah apa yang disebut "tidak ada pemblokiran", tetapi satu hal yang perlu diperhatikan adalah apakah persyaratan kami untuk JS dalam urutan yang ketat.
Pertama: tidak ada persyaratan pesanan. Misalnya, jika saya tidak memiliki persyaratan pesanan untuk "hello.js" dan "world.js", maka kita dapat menggunakan jQuery untuk secara dinamis menambahkannya.
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" mewariskan = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<tautan href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<skrip src = "jQuery/jQuery-1.4.1.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
window.onload = function () {
$ ("#head"). append ("<skrip src = 'js/hello.js' type = 'text/javascript'> <// script>")
$ ("#head"). append ("<skrip src = 'js/world.js' type = 'text/javascript'> <// script>");
}
</script>
</body>
</html>
Seperti yang dapat dilihat dari gambar, "Hello.js" dan "World.js" muncul di garis biru, yang berarti bahwa kedua Js ini dipicu untuk memuat setelah domContentload selesai, sehingga halaman tidak akan dikunci.
Tunggu.
Kedua: ada persyaratan pesanan
Mengapa harus diminta untuk memesan? Untuk file "dua JS" yang ditambahkan secara dinamis di atas, dalam seri IE, Anda tidak dapat menjamin bahwa Hello.js akan dieksekusi sebelum World.js.
Ini hanya akan menjalankan kode dalam urutan yang dikembalikan oleh sisi server.
Salinan kode adalah sebagai berikut:
< %@ Page language = "c#" autoeventwireup = "true" codebehind = "default.aspx.cs" mewariskan = "jsload.default" %>
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head id = "head">
<title> </title>
<tautan href = "styles/site.css" rel = "stylesheet" type = "text/css"/>
</head>
<body>
<img src = "1.jpg" />
<type skrip = "Teks/JavaScript">
function loadscript (url, callback) {
var skrip = document.createElement ("Script");
script.type = "Teks/JavaScript";
//YAITU
if (script.readystate) {
Script.onReadyStateChange = function () {
if (script.readystate == "dimuat" || script.readystate == "complete") {
script.onreadystatechange = null;
callback ();
}
}
} kalau tidak {
// non -e
script.onload = function () {
callback ();
}
}
script.src = url;
document.getElementById ("head"). AppendChild (skrip);
}
// Langkah pertama adalah memuat perpustakaan kelas jQuery
LoadScript ("JQuery/JQuery-1.4.1.js", function () {
// Langkah kedua adalah memuat hello.js
LoadScript ("js/hello.js", function () {
// Langkah ketiga adalah memuat World.js
loadscript ("js/world.js", function () {
});
});
});
</script>
</body>
</html>
Seperti yang juga dapat Anda lihat, waktu yang dibutuhkan halaman yang akan sepenuhnya dimuat sebenarnya hanya sekitar 310ms, yang sangat meningkatkan penampilan unduhan dan ramah dari halaman web.
Anda juga dapat memeriksa Tencent.com, itulah yang dia lakukan.
Bukankah itu sangat berguna? Saya telah menghabiskan waktu melakukan penelitian dan tes ini di sini. Saya harap Anda bisa melihatnya di hatimu. Bagaimanapun, ini juga solusi dari perusahaan "Mahua Vine". Silakan merujuknya.