Technology

Teknik Manipulasi History untuk Mempercepat HTML5

 

Loading...

Popularitas HTML5 sebagai output pada browser sudah tidak perlu diragukan lagi. Berkat fitur-fitur yang tersedia di dalamnya, para developer bisa mengembangkan teknik-teknik untuk membangun aplikasi yang canggih dan user friendly. Nah, kali ini kita akan belajar mengenai salah satu teknik HTML5. Yaitu manipulasi history browser. Fungsinya adalah meningkatkan kecepatan loading website berbasis HTML5 secara signifikan. Tutorial kali ini sendiri hanya memaksimalkan Java Script bawaan browser atau biasa disebut Native Javascript. Dengan demikian, anda tidak perlu mendownload library tambahan.

Langsung saja, pertama-tama siapkan dulu kerangka website dengan kode HTML. Berikut kode HTML yang dimaksud:

<!DOCTYPE html>
<html>
	<head>
		<title>Jagoan Hosting Indonesia</title>
		<link href="style.css" rel="stylesheet" media="screen">
	</head>
	<body>
		<header>
			<nav>
				<ul>
					<li><a href="index.html" title="Jagoan Hosting">Jagoan Hosting</a></li>
					<li><a href="jagoan-store.html" title="Jagoan Store">Jagoan Store</a></li>
					<li><a href="jagoan-web.html" title="Jagoan Web">Jagoan Web</a></li>
					<li><a href="wg-chat.html" title="Jagoan WG Chat">WG Chat</a></li>
				</ul>
				<div class="clear"></div>
			</nav> 
		</header>
		<section id="main-content">
			<h1>Jagoan Hosting Indonesia</h1>
			<p>Layanan Web Hosting terbaik dengan harga hosting murah. Tersedia pilihan server hosting indonesia dan server hosting US. Harga Hosting murah termasuk cPanel & Softacolous dan layanan CS 24 Jam</p>
			<a href="http://www.jagoanhosting.com" target="_blank">More</a>
		</section>
		<footer>

		</footer>
	</body>
	<script src="push.js"></script>
</html>

Simpan kode HTML di atas dengan nama index.html. Perhatikan kode yang dihighlight diatas. Kode tersebut mengindikasikan bahwa kita membutuhkan file HTML lain, diantaranya wg-chat.html, jagoan-store.html, serta jagoan-web.html. Duplikat saja kode HTML di atas, kemudian ganti isi <section id=”main-content”></section> sesuai keinginan anda.

Langkah selanjutnya, tambahkan kode Javascript berikut sebagai eksekutor dari teknik manipulasi history ini. Kemudian simpan kode ini dengan nama push.js.

(function (a, b) {
    if (typeof b.pushState != 'undefined') {
        var xhr, tempTitle = '';
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
        else xhr = new ActiveXObject("Microsoft.XMLHTTP");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var f = xhr.response,
                    parser = document.createElement('div');
                parser.innerHTML = f;
                document.querySelector('#main-content').innerHTML = parser.querySelector('#main-content').innerHTML;
                document.title = parser.querySelector('title').innerHTML;
            }
        }
        window.loadContent = function (state) {
            xhr.open('GET', document.location.toString(), true);
            xhr.send();
        }
        window.onpopstate = window.loadContent;
        var links = a.querySelectorAll('nav ul li a');
        for (i = 0; i < links.length; i++) {
            links[i].onclick = function (event) {
                document.querySelector('#main-content').innerHTML = 'Loading Content...';
                xhr.open('GET', this.href, true);
                xhr.send();
                a.title = this.title;
                b.pushState('', this.title, this.href);
                event.preventDefault();
                return false;
            }
        }
    } else {
        alert('Maaf, browser anda tidak support dengan Manipulasi Browser');
    }
})(document, window.history);

Tentu kurang lengkap rasanya jika membuat aplikasi web tanpa menambahkan CSS. Maka tambahkan kode CSS sederhana berikut untuk mempercantik tampilan. Simpan file dengan nama style.css.

html,body {
background:#fff;
font:13px/1.5 'Segoe UI','Trebuchet MS',Arial,sans-serif;
margin:0;
padding:0;
}

.clear {
clear:both;
}

body {
width:500px;
margin:0 auto;
}

nav {
background:#404040;
text-align:center;
margin-top:50px;
}

nav ul {
list-style:none;
margin:0;
padding:0;
}

nav ul li {
display:inline-block;
}

nav li a {
color:#fff;
text-decoration:none;
display:block;
-webkit-transition:all ease-in-out .21s;
-moz-transition:all ease-in-out .21s;
-o-transition:all ease-in-out .21s;
transition:all ease-in-out .21s;
padding:10px;
}

nav li a:hover {
background:#e0e0e0;
color:#333;
}

#main-content {
background:#f9f9f9;
border:1px solid #e0e0e0;
padding:10px;
}

Setelah selesai, jalankan pada browser. Jika berhasil, maka akan tampak seperti demo di bawah ini.

Klik di sini untuk melihat demo HTML5 

Selamat mencoba ;-)

Loading...

2 komentar

  • 1 November 2012 - pukul 17:51

    Masih belum mengena dengan manipulasi browser :(
    Blum ngerti X__X

    • 2 November 2012 - pukul 23:05

      Mungkin dengan melihat demo bisa dipahami dengan lebih mudah :)

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *