Mempercepatkan pemuatan jQuery dalam WordPress menggunakan CDN dan AJAX_jquery

Adakah anda pasti mahu meletakkannya di bahagian Head?

Malah, situasi terbaik ialah fail js tidak boleh dimuatkan dalam bahagian 93f0f5c25f18dab9d176bd4f6de5d30e jika tidak, ia akan menjejaskan kelajuan pemuatan bahagian kepala dan secara langsung menyebabkan kelewatan dalam memuatkan kandungan (badan) laman web tersebut. Jika anda pasti bahawa anda tidak perlu memuatkan jQuery di bahagian kepala, sila alihkan kod pemuatan sebelum 36cc49f0c466276486e50c850b7e4956, dengan tepat, sebelum kod javascript pertama yang akan menggunakan fungsi jQuery.

Sudah tentu, jika anda perlu memuatkan jquery di bahagian kepala, sila pastikan juga semua fail js, termasuk jquery, diletakkan selepas kod yang memanggil fail CSS untuk mencapai muat turun segerak. Ini juga merupakan cadangan rasmi yang diberikan oleh Google. Sebagai contoh, pemuatan berikut tidak disyorkan:

<script src=jquery.js></script>

<link href="style.css" .../>

Sebaliknya gunakan:

<link href="style.css" .../>

<script src=jquery.js></script>

Adakah anda pasti anda tidak mahu memuatkan secara tidak segerak?

Pemuatan tak segerak tidak akan menyekat pemuatan halaman web, manakala pemuatan bukan tak segerak akan menyekat secara ringkas pemuatan halaman web dalam penyemak imbas sebelum memuatkan js itu sendiri. Ini mungkin menjejaskan pengalaman menyemak imbas anda.

Jika kod pemuatan anda ialah

<script type="text/javascript" src="jquery.js"></script>

Maka anda perlu tahu bahawa ini bukan pemuatan tak segerak, ini pemuatan segerak. Jika anda tidak perlu memanggil fungsi jquery dalam masa selepas halaman dimuatkan, anda boleh menggunakan pemuatan tak segerak untuk memuatkan jquery sebelum halaman web dimuatkan, yang sangat mempercepatkan kelajuan pemuatan. Kod ini kelihatan seperti kod Google Analitis.

(function(doc){

var j =doc.createElement("script");

j.type = "text/javascript"; j.async = true; j.src = "jquery.js";

var s = doc.getElementsByTagName("script")[0];

s.parentNode.insertBefore(j, s);

})(document);

Tetapi dari pemerhatian saya, kebanyakan masa kita perlu memuatkan secara serentak, terutamanya apabila anda juga perlu memperkenalkan pemalam jQuery.

Versi jQuery yang manakah hendak digunakan?

Wordpress sentiasa disertakan dengan perpustakaan jQuery terkini, dan penggunaan setiap versi sentiasa berbeza sedikit. Semakin baharu versi jQuery, semakin tinggi peningkatan prestasi. Walau bagaimanapun, sesetengah pemalam jquery mungkin tidak serasi dengan pemalam baharu, dan ia belum mengeluarkan kemas kini sendiri. Mungkin beberapa fungsi kaedah yang anda gunakan didapati telah ditukar dalam versi baharu, dan fungsi yang digunakan tidak lagi berfungsi. Dalam kes ini, prinsip harus diikuti, iaitu menggunakan perpustakaan jQuery terkini yang mungkin sambil memastikan keserasian.

Sebagai contoh, anda pernah menggunakan versi 1.6.2 jquery, dan kini anda mendapati bahawa beberapa fungsi 2. Itu bagus. Pada masa ini, anda boleh meninggalkan 1.6.2 dan menggantikan versi baharu 2.X dengan versi 1.7.2 jQuery.

Pustaka CDN jQuery yang manakah hendak digunakan?

jQuery terlalu besar! Jika laman web anda tidak pantas, jquery pasti akan menjejaskan kelajuan memuatkan halaman anda. Nasib baik, Baidu, Sina, Microsoft, Google dan syarikat lain telah melancarkan perpustakaan js awam, yang memudahkan pemilik tapak web membuat panggilan untuk memendekkan masa muat turun, dan mereka mempunyai pelayan CDN yang sangat pantas, yang menjimatkan masa muat turun.

Pustaka jquery yang disediakan oleh Google pada masa ini lebih biasa digunakan:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Sudah tentu, kelajuan akses domestik Baidu tidak boleh dipandang remeh:

<script type="text/javascript" src="//libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>

CDN Sina juga sangat pantas:

<script type="text/javascript" src="//lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

Jika anda tidak mahu mengikuti trend, anda juga boleh memilih jquery CDN Microsoft:

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>

Anda boleh menukar terus nombor versi yang dipaparkan di atas untuk memilih versi lain. Mana satu paling laju? Bagaimana untuk memilih?

Jika laman web anda mempunyai ramai pelawat dari luar negara, disyorkan untuk memilih Google Jika pelawat utama adalah dari China, tidak ada masalah untuk memilih Baidu. Walau bagaimanapun, kelajuan akses Baidu di luar negara tidak sepantas Google.

Dan kerana kebanyakan tapak web memilih CDN Google, disebabkan oleh prinsip caching, CDN Google mungkin lebih pantas apabila melawat tapak web anda.

Jika anda tidak pasti kelajuan muat turun tapak web anda adalah pantas, saya cadangkan yang terbaik adalah menggunakan CDN awam yang disebutkan di atas untuk menjimatkan masa dan trafik pemuatan.

Adakah anda benar-benar perlu menggunakan jQuery?

Jika tapak web anda hanya memerlukan fungsi kecil dengan jquery, mengapa anda perlu memuat turun fail yang begitu besar? Mengapa tidak bebas jquery?

Sebagai contoh, anda boleh mempertimbangkan zepto.js, yang matlamat reka bentuknya adalah untuk "memaksimumkan keserasian API jQuery dengan saiz terkecil". Ia hanya 10KB selepas pemampatan gzip.

Selain itu, jQuery mempunyai reka bentuk modul, jadi anda boleh memilih modul yang anda perlukan sahaja. Anda boleh merujuk kepada jquery builder.

Cara yang betul untuk memuatkan jQuery

Setelah mengatakan semua itu, apakah cara yang betul untuk memuatkan jquery?

Mula-mula pilih CDN atau tapak web anda sendiri untuk mengehoskan fail js, dan tentukan sama ada lokasi panggilan berada di kepala atau badan Mari kita ambil pustaka jquery Google sebagai contoh Kaedah pemuatan biasa ialah

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Walau bagaimanapun, perkhidmatan Google terganggu sekali-sekala di China, jadi saya boleh menjaga pelawat domestik dan menulis ini:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Dengan cara ini, jika jQuery gagal dimuatkan dengan jayanya, pustaka jquery Baidu akan dimuatkan secara automatik, menjadikannya kalis mudah.