Akselarasi Hardware untuk Web Browser Pinky Yohana Puteri 7408040034 Erdis Achmad Marzuq 7408040053 Septian Yusup Hermawan 7408040058.

Slides:



Advertisements
Presentasi serupa
HTML.
Advertisements

 Putra Prima Naufal
APA ITU INTERNET? Internet (Interconnected-Network) adalah sebutan untuk sekumpulan jaringan komputer yang menghubungkan situs akademik, pemerintahan,
Dasar-dasar Web Design
Pelatihan Internet “Internet Goes To School” Kerjasama : PT. Telkom Divisi Regional IV dengan Internet Club Universitas Stikubank ( UNISBANK )‏
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
Teknologi Informasi Komputer SMPN 10 Yogyakarta
Pengantar Teknologi Informasi
Server Create by Amirullah.
Dasar - dasar Web dan HTML
Nine: Pengantar HTML The Net Language. 2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti.
PalComTech. WORLD WIDE WEB (WWW), Adalah sarana internet yang menampilkan tampilan berupa gabungan teks, grafis, suara bahkan video yang bersifat interaktif.
Disampaikan Dalam Seminar Nasional Strategi Pemasyarakatan Open Source Software LIPI Bandung 8 Agustus 2006 Oleh: HP
Proses Pengembangan Website
Keamanan Sistem World Wide Web
HTML.
Konsep Pemrograman Internet
Minggu 1…… Page 1 MINGGU Ke Satu Pemrograman Visual 2 Pokok Bahasan: Mengenal Web dengan ASP Tujuan Instruksional Khusus: Mahasiswa akan dapat menjelaskan.
PEMROGRAMAN BERBASIS WEB
Teknologi WEB.
WEB BROWSER.
HTML 5 Pertemuan ke 5 By Tri Pratiwi Handayani Skom, Meng, MPhil.
Pemrograman Web 1 Mohamad Syafri Tuloli. Penilaian Quiz : 10 %Quiz : 10 % Tugas : 20 %Tugas : 20 % UTS : 30 %UTS : 30 % UAS : 40 %UAS : 40 %
Pengenalan HTML Oleh Benny Irawan. WORLD WIDE WEB Web pada awalnya merupakan ruang informasi dalam internet, dengan menggunakan teknologi hyperteks, terdiri.
KONSEP PEMROGRAMAN WEB
Overview Teknologi Internet
Pertemuan 2 1.  Bahasa yang digunakan untuk menampilkan informasi pd halaman web.  bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya.
Pelatihan Web Untuk Anggota Kepolisian Metro Jaya
Proses Pengembangan Website
Teknologi Informasi Komputer SMPN 10 Yogyakarta
Pemrograman Berorientasi Objek IST AKPRIND Yogyakarta
Dasar - dasar Web dan HTML
Pertemuan 2 Khairul Anwar Hafizd
Teknologi Dasar Internet dan Web
Pertemuan 3 Khairul Anwar Hafizd
KOMPUTER APLIKASI IT II
JavaScript Part 1 : Pengertian dan Pengenalan JavaScript
Pengantar Teknologi Mobile
Microsoft Power Point.
Internet dan Web By : Lisda Juliana P..
Pertemuan 5 Electronic Commerce
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Area Kerja Dreamweaver
DASAR DASAR WEB DAN HTML
PEMROGRAMAN WEB 1 PERTEMUAN 1
Prinsip Dasar Internet, Web dan Pemrograman Web
Konsep Pemrograman Internet
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Keamanan Sistem World Wide Web
Prinsip Dasar Internet, Web dan Pemrograman Web
Pengenalan Dasar Web dan HTML
Oleh : Inggar Prayoga.,S.I.Kom
APLIKASI POWER POINT ONLINE
Peng. Komp & TI 2C Peng. Komp & TI 2C Peng. Komp & TI 2C
Pengantar Teknologi Informasi
Internet dan Diklat E-Learning 2010.
Matakuliah : Jaringan Komputer 2 Versi Materi Web Server Penyaji
WORLD WIDE WEB (WWW) Kelompok 2 : Rana Meysa Mudazir ( )
Pengantar Teknologi Informasi
Tyas Puji Pertiwi| Fitria Purnamasari | Chorry Iga Setyaningrum
(Hyper Text Markup Language)
Internet dan Perc. Web By : Lisda Juliana P. , Ssi.
Pemrograman Berorientasi Objek IST AKPRIND Yogyakarta
Dasar Pemrograman Web.
Mengadministrasi server dalam jaringan adalah suatu bentuk pekerjaan yang dilakukan oleh administrator jaringan. Tugasnya: Membuat server Mengelola jaringan.
Pengenalan Dasar Web dan HTML
Pemrograman Web Dasar (4 SKS)
Dasar-dasar HTML. 2 World Wide Web (WWW) Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia. TCP/IP.
INTERNET Internet adalah suatu jaringan global yang terbentuk dari jaringan-jaringan lokal dan regional, memungkinkan komunikasi data antar komputer-komputer.
Pertemuan ke 3 : Pengenalan XML Parsing
Transcript presentasi:

Akselarasi Hardware untuk Web Browser Pinky Yohana Puteri Erdis Achmad Marzuq Septian Yusup Hermawan

Akselarasi Hardware untuk Web Browser • Apa itu akselarasi hardware? • Bagaimana cara kerja akselarasi hardware? • Perbandingan akselarasi hardware pada berbagai web browser • Pengembangan Ke Depan Web Browser • Kesimpulan

Apa itu akselarasi hardware? • Penggunaan hardware untuk melakukan beberapa fungsi lebih cepat daripada biasanya pada software yang berjalan di CPU • Contoh akselarasi hardware terlihat pada GPU (Graphics Processing Unit) • Komputer modern melakukan banyak graphical tasks. Performa yang bagus tergantung dari kemampuan pengolahan grafis yang bagus pula.

Bagaimana cara kerja akselarasi hardware? HTML Page Rendering

Cont.. • Content Rendering – Web browser mempercepat tahap pertama, menerjemahkan konten, menggunakan Direct2D Windows dan subsistem DirectWrite. – Mempercepat fase menggunakan GPU(Graphics Processing Unit) meningkatkan kinerja tampilan seperti : gambar, teks, latar belakang,& pembatas. • Page Composition – Menggunakan Direct3D untuk tahap berikutnya. – Mempercepat fase dengan mengambil fitur dari GPU yang paling signifikan : kemampuan untuk menggambar gambar bitmap pada kecepatan yang sangat tinggi • Desktop Composition – Menggunakan GPU untuk menyusun tampilan akhir melalui Desktop Window Manager(DWM)

Bagaimana cara kerja akselarasi hardware? 1.Image dan video di download, di terjemahkan dan di transfer ke intermediate GPU buffer 2.Halaman yang kompleks dengan elemen seperti canvas dan SVG diambil ke intermediate GPU Buffer 3.Elemen halaman yang simple diambil secara langsung ke web page buffer

Bagaimana cara kerja akselarasi hardware? 4.Intermediate GPU buffer digabung dengan konten yang secara langsung ditarik untuk membentuk halaman web yang terlihat 5.Windows Desktop Window Manager menyusun tampilan akhir web-page-content.aspx

Bagaimana cara kerja akselarasi hardware? • Kebanyakan dekstop modern yang dibangun tidak hanya CPU, tetapi juga GPU. Sebuah GPU secara efektif mengambil alih hampir semua beban perhitungan yang terlibat dalam render grafis, dan melakukannya dengan kecepatan yang luar biasa. • Hasilnya ketika browser mendeteksi kebutuhan untuk perhitungan yang lebih kompleks maka beralih dari CPU ke CPU+operasi GPU canvas.html#fbid=syOkX0z4zKm

Perbandingan akselarasi hardware pada berbagai web browser • User dapat melihat perbedaan dalam kecepatan render yang diukur dengan kenik seperti Hardware Acceleration Stress Test. Ada 3 macam : • Fireflies • Paintball • Fishbowl

Hasil Test dengan menggunakan Paintball

Quality Differences • Paintball menggunakan markup HTML5 yang sama untuk semua browser seperti yang ditentukan oleh spesifikasi HTML5 kanvas. • Meskipun semua browser modern sekarangmendukung API, perbedaan kualitas sangat terlihat. Berikut perbandingan visual dari perbedaan render:

• Anda akan melihat perbedaan-perbedaan berikut: – Chrome 12 tidak menarik Splatters cat benar karena Chrome tidak menerapkan mode komposisi HTML5 kanvas sesuai dengan spesifikasi HTML5. – Firefox 4 membuat scene dengan benar. – Internet Explorer 9 dan 10 membuat scene dengan benar. – Safari 5 menyebarkan Splatters cat render artefak sep erti Chrome. Selain itu, Safari belum mendukung font WOFF.

Performance Differences • Perbedaan kinerja antar implementasi bahkan lebih mencolok. Untuk pengujian kami menggunakan konfigurasi mid-range yang sama bahwa kita telah menggunakan sepanjang tahun lalu. • Berikut adalah cara cepat browser modern, yang semua memiliki beberapa tingkat akselerasi hardware (pada Windows 7):

in-hardware-acceleration-through-paintball.aspx

Mengaktifkan Hardware Acceleration Web Browser • Pada Firefox : – Pada kotak alamat ketikkan about:config – Kemudian rubah gfx.font_rendering.directwrite.enabled menjadi True • Pada Chrome : – Pada kotak alamat ketikkan about:flags – Rubah GPU Accelerated Compositing, GPU Accelerated Canvas 2D, dan Web Page Prerendering menjadi enabled

Pengembangan Ke Depan Web Browser • Web browser dapat mendukung grafis 3d yang memiliki resolusi tinggi dengan cepat dan halus • Pengembangan ke depan web browser akan focus kepada dukungan terhadap HTML5, CSS3, dan Javascript • HTML5 boilerplate sebagai template yang bisa dimodifikasi oleh developer untuk kebutuhannya

Pengembangan Ke Depan Web Browser • Pengembangan Web Browser ke depannya tidak lepas dari browser subsystem. • Kenyataannya untuk membuat browser yang cepat kita harus memahami bagaimana dampak perbedaan subsistem pada kinerja dalam skenario nyata • Berikut adalah subsistem yang harus diperhatikan :

Cont • Networking • HTML • CSS • Collection • JavaScript • Marshalling • Native OM • Formatting • Block Building • Layout • Rendering

• Networking – bertanggung jawab untuk semua komunikasi antara klien dan server, termasuk caching lokal konten web. • HTML – Html didownload dari server melewati subsistem HTML yang memparsing dokumen, inisial download tambahan dalam subsistem jaringan, dan menciptakan representasi struktural dokumen • CSS – dilewatkan ke suatu subsistem CSS yang mem-parsing informasi gaya dan menciptakan representasi struktural yang dapat direferensikan • Collection – Subsistem koleksi bertanggung jawab untuk menyimpan dan mengakses metadata • JavaScript – dikirimkan secara langsung ke subsistem JavaScript yang bertanggung jawab untuk mengeksekusi script tersebut • Marshalling – Melewatkan informasi melalui lapisan komunikasi antara browser dan script mesin.

• Native OM – JavaScript berinteraksi dengan dokumen melalui Document Object Model API. API ini diberikan melalui subsistem yang tahu cara mengakses dan memanipulasi dokumen dan merupakan titik interaksi utama antara script engine dan browser • Formatting – Subsistem format mengambil dokumen HTML dan menerapkan style • Block Building – Setelah dokumen yang ditata, langkah berikutnya adalah untuk membangun blok empat persegi panjang yang akan ditampilkan kepada pengguna. • Layout – Subsistem tata letak bertanggung jawab untuk proses algoritmik yang kompleks untuk meletakkan konten. • Rendering – Tahap akhir dari proses terjadi di dalam subsistem render dimana isi akhir ditampilkan kepada pengguna. Proses ini sering disebut sebagai "gambar untuk layar" dan dapat terjadi pada CPU, GPU, atau kombinasi keduanya.

Kesimpulan • Dengan Menggunakan hardware accellerator diharapkan browser dapat menjadi lebih cepat. • Untuk pengembangan ke depan masing masing sub sistem pada browser harus cepat dan dapat bekerja bersama untuk meningkatkan kinerja browser.