1 / 22

Akselarasi Hardware untuk Web Browser

Akselarasi Hardware untuk Web Browser. Pinky Yohana Puteri 7408040034 Erdis Achmad Marzuq 7408040053 Septian Yusup Hermawan 7408040058. Akselarasi Hardware untuk Web Browser. Apa itu akselarasi hardware? Bagaimana cara kerja akselarasi hardware?

haley
Download Presentation

Akselarasi Hardware untuk Web Browser

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Akselarasi Hardware untuk Web Browser Pinky YohanaPuteri7408040034 ErdisAchmadMarzuq7408040053 SeptianYusupHermawan 7408040058

  2. Akselarasi Hardware untuk Web Browser • Apaituakselarasi hardware? • Bagaimanacarakerjaakselarasi hardware? • Perbandinganakselarasi hardware padaberbagai web browser • PengembanganKeDepan Web Browser • Kesimpulan

  3. Apaituakselarasi hardware? • Penggunaanhardware untukmelakukanbeberapafungsilebihcepatdaripadabiasanyapada software yang berjalandiCPU • Contohakselarasi hardware terlihatpada GPU (Graphics Processing Unit) • Komputer modern melakukanbanyakgraphical tasks. Performa yang bagustergantungdarikemampuanpengolahangrafis yang bagus pula. http://www.windowsnetworking.com/articles_tutorials/Hardware-Acceleration.html

  4. Bagaimanacarakerjaakselarasi hardware? HTML Page Rendering

  5. Cont.. • Content Rendering • Web browser mempercepattahappertama, menerjemahkankonten, menggunakan Direct2D Windows dansubsistemDirectWrite. • Mempercepatfasemenggunakan GPU(Graphics Processing Unit) meningkatkankinerjatampilanseperti : gambar, teks, latarbelakang,& pembatas. • Page Composition • Menggunakan Direct3D untuktahapberikutnya. • Mempercepatfasedenganmengambilfiturdari GPU yang paling signifikan : kemampuanuntuk menggambar gambar bitmap pada kecepatan yang sangat tinggi • Desktop Composition • Menggunakan GPU untukmenyusuntampilanakhirmelalui Desktop Window Manager(DWM)

  6. Bagaimanacarakerjaakselarasi hardware? • Image dan video di download, diterjemahkandandi transfer ke intermediate GPU buffer • Halaman yang kompleksdenganelemenseperti canvas dan SVG diambilke intermediate GPU Buffer • Elemenhalaman yang simple diambilsecaralangsungke web page buffer

  7. Bagaimanacarakerjaakselarasi hardware? • Intermediate GPU buffer digabungdengankonten yang secaralangsungditarikuntukmembentukhalaman web yang terlihat • Windows Desktop Window Manager menyusuntampilanakhir http://blogs.msdn.com/b/ie/archive/2010/09/10/the-architecture-of-full-hardware-acceleration-of-all-web-page-content.aspx

  8. Bagaimanacarakerjaakselarasi hardware? • Kebanyakandekstop modern yang dibanguntidakhanya CPU, tetapijuga GPU. Sebuah GPU secaraefektifmengambilalihhampirsemuabebanperhitungan yang terlibatdalam render grafis, danmelakukannyadengankecepatan yang luarbiasa. • Hasilnyaketika browser mendeteksikebutuhanuntukperhitungan yang lebihkompleksmakaberalihdari CPU keCPU+operasi GPU http://www.htmlgoodies.com/html5/client/unleash-the-power-of-hardware-accelerated-html5-canvas.html#fbid=syOkX0z4zKm

  9. Perbandinganakselarasi hardware padaberbagai web browser • User dapatmelihatperbedaandalamkecepatan render yang diukurdengankenikseperti Hardware Acceleration Stress Test. Ada3 macam : • Fireflies • Paintball • Fishbowl

  10. Hasil Test denganmenggunakan Paintball

  11. Quality Differences • Paintball menggunakan markup HTML5 yang samauntuksemua browser seperti yang ditentukanolehspesifikasi HTML5 kanvas.  • Meskipunsemua browser modern sekarangmendukung API, perbedaankualitassangatterlihat. Berikutperbandingan visual dariperbedaan render:

  12. Andaakanmelihatperbedaan-perbedaanberikut: • Chrome 12 tidakmenarik Splatters cat benarkarena Chrome tidakmenerapkan mode komposisi HTML5 kanvassesuaidenganspesifikasi HTML5. • Firefox 4 membuat scene denganbenar. • Internet Explorer 9 dan 10 membuat scene denganbenar. • Safari 5 menyebarkan Splatters cat render artefakseperti Chrome. Selainitu, Safari belummendukung font WOFF.

  13. Performance Differences • Perbedaankinerjaantarimplementasibahkanlebihmencolok. Untukpengujiankamimenggunakankonfigurasi mid-range yang samabahwakitatelahmenggunakansepanjangtahunlalu.  • Berikutadalahcaracepat browser modern, yang semuamemilikibeberapatingkatakselerasi hardware (pada Windows 7):

  14. http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences-http://blogs.msdn.com/b/ie/archive/2011/04/26/understanding-differences- in-hardware-acceleration-through-paintball.aspx

  15. Mengaktifkan Hardware Acceleration Web Browser • Pada Firefox : • Padakotakalamatketikkanabout:config • Kemudianrubahgfx.font_rendering.directwrite.enabledmenjadiTrue • Pada Chrome : • Padakotakalamatketikkanabout:flags • RubahGPU Accelerated Compositing, GPU Accelerated Canvas 2D, dan Web Page Prerenderingmenjadienabled

  16. PengembanganKeDepan Web Browser • Web browser dapatmendukunggrafis 3d yang memilikiresolusitinggidengancepatdanhalus • Pengembangankedepan web browser akan focus kepadadukunganterhadap HTML5, CSS3, danJavascript • HTML5 boilerplate sebagai template yang bisadimodifikasioleh developer untukkebutuhannya

  17. PengembanganKeDepan Web Browser • Pengembangan Web Browser kedepannyatidaklepasdari browser subsystem. • Kenyataannyauntukmembuat browser yang cepatkitaharusmemahamibagaimanadampakperbedaansubsistempadakinerjadalamskenarionyata • Berikutadalahsubsistem yang harusdiperhatikan :

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

  19. Networking • bertanggung jawab untuk semua komunikasi antara klien dan server, termasuk caching lokal konten web. • HTML • Html didownloaddari server melewatisubsistem HTML yang memparsingdokumen, inisial download tambahandalamsubsistemjaringan, danmenciptakanrepresentasistrukturaldokumen • 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 • Melewatkaninformasi melalui lapisankomunikasi antara browser dan script mesin.

  20. Native OM • JavaScript berinteraksi dengan dokumen melalui Document Object Model API. API ini diberikan melalui subsistem yang tahu cara mengakses dan memanipulasi dokumen dan merupakantitik interaksi utama antarascript engine dan browser • Formatting • Subsistem format mengambil dokumen HTML dan menerapkanstyle • 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 kompleksuntukmeletakkankonten. • 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.

  21. Kesimpulan • DenganMenggunakan hardware accelleratordiharapkan browser dapatmenjadilebihcepat. • Untukpengembangankedepanmasingmasing sub sistempada browser haruscepatdandapatbekerjabersamauntukmeningkatkankinerja browser.

More Related