Solusi Atasi Konflik JavaScript jquery/1.8.3/min.js

Solusi atasi Render-Blocking JavaScript dan CSS - Sudah dua bulan sejak Mang Tekno membuat blog ini, terdapat dua masalah yang sangat "membandel" pada hasil cek PageSpeed. Salah satunya adalah masalah Render-Blocking JavaScript dan CSS. Searching kesana kemari mancari cara untuk mengatasi masalah belum juga membuahkan hasil. Hingga Mang Tekno berpikir untuk membiarkannya saja dan menyerah, entah mimpi apa kemarin malam pagi tadi Mang Tekno membuka blog Kompi Ajaib. Mata Mang Tekno teralihkan oleh sebuah artikel dengan judul mengenai Render-Blocking JavaScript pada jQuery.

Sedikit jengkel ditambah lucu saat membaca isi artikel tersebut, ternyata selama ini solusinya ada di halaman Dokumentasi Google Developers. tentang asynchronous loading.

Seperti yang diterangkan pada Dokumentasi Google Developers , Render-Blocking ini terjadi karena browser harus mendownload file JS atau CSS eksternal terlebih dahulu sebelum memuat halaman blog. Untuk mengatasinya, cukup dengan menambahkan atribut "async" pada kode pemanggil jQuery.

Kode pemanggil jQuery:

Tambahkan atribut "async" pada kode pemanggil jQuery tersebut:

Simpan template dan lihat hasilnya,

Jika ada beberapa JS di blog ternyata ada yang tidak dapat bekerja seperti JS untuk Syntax Highlighter dan Paginator, maka untuk mengatasinya cukup dengan memindahkan kode JS yang tidak bekerja tersebut dan meletakannya di atas kode </body>. Contoh bentuk kode JavaScript adalah seperti ini:

Pindahkan kode tersebut tepat di atas kode </body>.

Sedangkan untuk mengatasi Render-Blocking pada CSS cukup dengan menginlinekan CSS eksternal sobat. Contoh bentuk kode CSS adalah seperti ini:

Copy URL kode tersebut yang ada di dalam href='copy-url-di-sini', semua kode CSS diakhiri dengan ekstensi ".css". Buka tab baru di browser dan paste URL .css tadi kemudian tekan Enter. Setelah itu, copy semua kode CSS yang ada dan letakkan semua kode tersebut di atas kode ]]></b:skin>. Jika sudah, silahkan sobat hapus kode sumber CSS eksternal tadi:

Hapus kode tersebut karena CSS-nya sudah menjadi internal di dalam blog sobat.

Mengatasi Konflik Script jQuery

jQuery sebagai salah satu framework turunan JavaScript yang paling banyak digunakan juga rentan terhadap bentrok antar script baik script dengan script pada framework yang sama atau dengan script dengan framework berbeda. Sebenarnya website resmi jQuery sudah memberikan solusi yang sangat mudah untuk mengatasi bentrok antar script ini.

Perintah dasar jQuery selalu diawali dengan simbol "$" (tanpa tanda kutip) atau kita mengenal simbol ini dengan nama "Dollar". Ini sebagai identitas perintah-perintah jQuery, jadi jika teman-teman blogger menemukan script yang selalu diawali dengan tanda "$" maka ini adalah script jQuery. Dan sudah menjadi kewajiban bahwa script jQuery ini harus didampingi framework jQuery-nya sebagai sistem dasar.

Framework jQuery haruslah terlebih dahulu dipanggil (load) agar deklarasi-deklarasi script yang kita buat mampu berjalan normal. Ibaratnya jQuery itu adalah rumah dan script-script yang kita buat adalah isi dari rumah itu.

Memasang Framework jQuery

Untuk memasang framework jQuery, simpan kode seperti ini di atas </head> (saat ini versi terbaru adalah v.2.1.1)

Harus diingat, pemasangan framework ini cukup satu saja. Apabila lebih dari satu, maka script tidak akan bekerja. Ada pertanyaan, versi mana yang paling baik digunakan? Tentunya versi terbaru memuat berbagai perbaikan. Akan tetapi terkadang tidak menjadi jaminan 100% script akan bekerja dengan framework terbaru. Terkadang ada saja script yang bekerja dengan framework versi sebelumnya.

Seperti sudah dijelaskan diatas bahwa script jQuery selalu diawali dengan simbol "$", simbol inilah yang harus diperhatikan karena simbol ini merupakan sebuah deklarasi fungsi-fungsi jQuery. Maka ini pula yang menjadi solusi untuk mengatasi konflik script-script jQuery. Bagaimana mengatasi konfliknya? Contoh dibawah ini merupakan cara yang mudah untuk mengatasi konflik jQuery.

Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

$(document).ready(function(){

$("a.slick").click(function () {

$(".active").removeClass("active");

$(this).addClass("active");

$(".content-slick").slideUp();

var content_show = $(this).attr("title");

$("#"+content_show).slideDown();

});

Script diatas sebenarnya sudah berjalan dengan baik akan tetapi kemungkinan bentrok sangat mudah terjadi. Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik dibawah ini:

var $jnoc = jQuery.noConflict();

$jnoc(document).ready(function(){

$jnoc("a.slick").click(function () {

$jnoc(".active").removeClass("active");

$jnoc(this).addClass("active");

$jnoc(".content-slick").slideUp();

var content_show = $jnoc(this).attr("title");

$jnoc("#"+content_show).slideDown();

});

Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.

Penjelasan :

var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript

$jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$" sehingga jika kita perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.

$jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan anda, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.

Semoga bermanfaat...

Mawardi Teko

Solusi Atasi Konflik JavaScript jquery/1.8.3/min.js

Posting Komentar untuk "Solusi Atasi Konflik JavaScript jquery/1.8.3/min.js"

Menu Halaman Statis