JavaScript dirancang untuk berjalan dalam lingkungan single-threaded, yang berarti beberapa script tidak dapat dijalankan pada saat yang sama. Pertimbangkan situasi di mana Anda perlu untuk menangani peristiwa UI, query dan proses data dalam jumlah besar API, dan memanipulasi DOM.
Javascript akan menggantung browser Anda dalam situasi di mana penggunaan CPU tinggi. Mari kita ambil contoh sederhana di mana Javascript berjalan melalui lingkaran besar:
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <title>Big for loop</title>
5: <script>
6: function bigLoop(){
7: for (var i = 0; i <= 10000000000; i += 1){
8: var j = i;
9: }
10: alert("Completed " + j + "iterations" );
11: }
12: function sayHello(){
13: alert("Hello sir...." );
14: }
15: </script>
16: </head>
17: <body>
18: <input type="button" onclick="bigLoop();" value="Big Loop" />
19: <input type="button" onclick="sayHello();" value="Say Hello" />
20: </body>
21: </html>
Coba contoh di atas online untuk melihat hasilnya - Cobalah online menggunakan browser apapun. Ketika Anda mengklik tombol ini akan menampilkan loop Big hasil sebagai berikut di Firefox:
Apa Pekerja Web?
Situasi yang dijelaskan di atas dapat ditangani dengan menggunakan Web Pekerja yang akan melakukan semua tugas komputasi mahal tanpa mengganggu user interface dan biasanya dijalankan pada thread terpisah.
Pekerja Web memungkinkan untuk script lama berjalan yang tidak terganggu oleh skrip yang merespon klik atau interaksi pengguna lainnya, dan memungkinkan tugas lama untuk dieksekusi tanpa menghasilkan untuk menjaga halaman responsif.
Pekerja Web adalah script latar belakang dan mereka relatif berat-berat, dan tidak dimaksudkan untuk digunakan dalam jumlah besar. Misalnya, akan tidak pantas untuk meluncurkan satu pekerja untuk setiap pixel gambar empat megapiksel.
Ketika script mengeksekusi di dalam Pekerja Web tidak dapat mengakses objek jendela halaman web (window.document), yang berarti bahwa Pekerja Web tidak memiliki akses langsung ke halaman web dan API DOM. Meskipun Pekerja Web tidak dapat memblokir browser UI, mereka masih dapat mengkonsumsi siklus CPU dan membuat sistem kurang responsif.
Bagaimana Web Workers Kerja?
Pekerja Web diinisialisasi dengan URL dari file JavaScript, yang berisi kode pekerja akan mengeksekusi. Kode ini menetapkan pendengar acara dan berkomunikasi dengan script yang melahirkan itu dari halaman utama. Berikut ini adalah sintaks yang sederhana:
var worker = new Worker('bigLoop.js');
Jika file javascript yang ditetapkan sudah ada, browser akan menelurkan sebuah thread pekerja baru, yang di-download asynchronous. Jika jalan untuk pekerja Anda mengembalikan 404, pekerja akan gagal diam-diam.
Jika aplikasi Anda memiliki beberapa file javascript pendukung, Anda dapat mengimpor mereka importScripts () metode yang mengambil nama file (s) sebagai argumen dipisahkan dengan koma sebagai berikut:
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <title>Big for loop</title>
5: <script src="/js/modernizr-1.5.min.js"></script>
6: <script>
7: if (Modernizr.webworkers) {
8: alert("Congratulation!! you have web workers support." );
9: }else{
10: alert("Sorry!! you do not have web workers support." );
11: }
12: </script>
13: </head>
14: <body>
15: <p>Checking for Browser Support for web workers</p>
16: </body>
17: </html>
importScripts("helper.js", "anotherHelper.js");
Setelah Pekerja Web adalah melahirkan, komunikasi antara pekerja web dan halaman induknya dilakukan dengan menggunakan postMessage () metode. Tergantung pada browser Anda / versi, postMessage () dapat menerima baik string atau objek JSON sebagai argumen tunggal.
Pesan lewat Pekerja Web diakses menggunakan acara onmessage di halaman utama. Sekarang mari kita menulis contoh bigLoop kami menggunakan Pekerja Web. Berikut ini adalah halaman utama (hello.htm) yang akan menelurkan sebuah web worker untuk mengeksekusi loop dan untuk mengembalikan nilai akhir variabel j:
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <title>Big for loop</title>
5: <script>
6: var worker = new Worker('bigLoop.js');
7: worker.onmessage = function (event) {
8: alert("Completed " + event.data + "iterations" );
9: };
10: function sayHello(){
11: alert("Hello sir...." );
12: }
13: </script>
14: </head>
15: <body>
16: <input type="button" onclick="sayHello();" value="Say Hello"/>
17: </body>
18: </html>
Berikut ini adalah isi dari file Loop.js besar. Hal ini membuat penggunaan postMessage () API untuk lulus komunikasi kembali ke halaman utama:
for (var i = 0; i <= 1000000000; i += 1){
var j = i;
}
postMessage(j);
Sekarang mari kita menyimpan file hello.htm dan bigLoop.js dalam direktori yang sama dan mencoba untuk mengakses hello.htm menggunakan versi terbaru dari salah satu Safari atau Firefox.
Coba contoh di atas online untuk melihat hasilnya - Cobalah online menggunakan versi terbaru dari salah satu Safari atau Firefox.
Menghentikan Pekerja Web:
Pekerja Web tidak berhenti dengan sendirinya tetapi halaman yang mulai mereka dapat menghentikan mereka dengan memanggil mengakhiri () metode.
worker.terminate();
Sebuah Pekerja Web dihentikan tidak akan lagi menanggapi pesan atau melakukan perhitungan tambahan. Anda tidak dapat me-restart pekerja, melainkan Anda dapat membuat seorang pekerja baru menggunakan URL yang sama.
Kesalahan Penanganan:
Berikut ini contoh fungsi penanganan kesalahan dalam berkas JavaScript Pekerja Web yang log kesalahan ke konsol. Dengan kode kesalahan penanganan, contoh di atas akan menjadi sebagai berikut:
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <title>Big for loop</title>
5: <script>
6: var worker = new Worker('bigLoop.js');
7: worker.onmessage = function (event) {
8: alert("Completed " + event.data + "iterations" );
9: };
10: worker.onerror = function (event) {
11: console.log(event.message, event);
12: };
13: function sayHello(){
14: alert("Hello sir...." );
15: }
16: </script>
17: </head>
18: <body>
Memeriksa Dukungan Browser:
Berikut ini adalah sintaks untuk mendeteksi Web Worker fitur pendukung yang tersedia di browser:
1: <!DOCTYPE HTML>
2: <html>
3: <head>
4: <title>Big for loop</title>
5: <script src="/js/modernizr-1.5.min.js"></script>
6: <script>
7: if (Modernizr.webworkers) {
8: alert("Congratulation!! you have web workers support." );
9: }else{
10: alert("Sorry!! you do not have web workers support." );
11: }
12: </script>
13: </head>
14: <body>
15: <p>Checking for Browser Support for web workers</p>
16: </body>
17: </html>
Coba contoh di atas online untuk melihat hasilnya - Cobalah online menggunakan browser yang berbeda.
sumber: http://www.tutorialspoint.com/html5/html5_web_workers.htm
1 Komentar untuk "Membuat WEBsite dengan HTML5"
sori gan tadi masih eror....
sekarang sudah bisa...
monggo di pelajari