Tuesday, May 12, 2015

Posisi Jquery Untuk Mengatasi Render Blocking Javascript

Saya telah lama mencari solusi rendering JS yang dipengaruhi oleh jquery. Karena rendering dari jquery ini sangat lumayan membebani loading blog. Saya pernah mencoba cara dengan dengan menambahkan atribut async='async' seperti berikut.
<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
Namun ini memiliki kelemahan, karena jquery tidak terload di hompage, seperti sudah dijelaskan di blog teman saya obesitystrike.blogspot.com cara ini tidaklah efektif.

Cara lainnya adalah dengan meletakkan script jquery yang biasa diletakkan diatas </head>
kita letakkan diatas </body>  seperti berikut.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>
</body>
Yang perlu diperhatikan dengan cara ini ialah, tidak semua script jquery itu bisa dibungkus dengan //<![CDATA[ hingga //]]>, jadi bisa Anda perhatikan dan sesuaikan dengan scriptnya agar bisa berjalan dengan baik.

Penampakan yang saya maksud ialah seperti ini.
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>

<script type='text/javascript'>

<!-- Semua Script Jquery Lainnya disini -->

</script>
</body>
Yang perlu diingaat ialah semua script yang memerlukan jquery itu harus berada dibawah script jquery <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> seperti yang telah saya gambarkan pada rangkaian kode diatas.

Untuk mengetahui script jquery biasanya akan mirip seperti berikut ini.
$(function (){// TinyNav.js 1
      $(&#39;#topnav&#39;).tinyNav({active:&#39;current&#39;});// TinyNav.js 2
      $(&#39;#navigation&#39;).tinyNav({active:&#39;current&#39;})});
Atau tanda yang paling nyata adalah selalu diawali dengan $ pada scriptnya. Jika Anda menggunakan external link pada sebuah script, maka Anda perlu membuka scriptnya dan lihat pakah benar itu script jquery dengan melihat ciri-cirinya. Semoga bermanfaat.. ^_^


0 komentar: