Dalam kerja kita, adalah baik untuk memahami alat yang kita gunakan dengan lebih baik untuk menggunakannya dengan lebih baik dan memanfaatkannya dengan lebih baik. Berikut ialah artikel pertama siri yang akan datang, berpusat hari ini pada alat asas, yang kami gunakan setiap hari tanpa perlu memikirkannya: enjin pemaparan HTML.
[jenis pemisah=”” saiz=”” ikon=”bintang”]"Sebagai pembangun web, mempelajari kerja dalaman penyemak imbas membantu anda membuat keputusan yang lebih baik dan memahami rasional di sebalik amalan pembangunan yang baik."
–Paul Irish, Perhubungan Pembangun Chrome
Apakah enjin rendering HTML?
Seperti yang anda mungkin sedia maklum, enjin pemaparan HTML ialah subrutin, satu set perpustakaan perisian yang digunakan pelayar untuk memaparkan halaman web. Ia khusus untuk setiap pelayar. Maksudnya, daripada kod yang anda tulis, anda pembangun, enjin rendering HTML akan mencipta visual yang pengguna akan dapat lihat pada skrinnya, dan dengannya dia akan dapat berinteraksi.
Terdapat beberapa (Senaraikan di Wikipedia).
Oleh kerana enjin rendering ini, setiap penyemak imbas mempunyai tafsiran sendiri tentang HTML, JavaScript dan CSS. Ini juga merupakan sesuatu yang kerap menimbulkan kebimbangan kami semasa fasa penyepaduan.
Enjin pemaparan adalah sedikit seperti batu kunci penyemak imbas, atau jantungnya seperti yang anda suka. Tanggungjawabnya sangat penting. Paparan kandungan pada skrin seperti yang dikehendaki adalah objektif utama kami.
[separator type=”” size=”” icon=”star”] Untuk artikel ini, saya memilih untuk menumpukan pada pemapar HTML, tetapi masih sedar bahawa terdapat jenis pemapar lain . Ia bukan alat khusus hanya untuk pengurusan dokumen HTML.
Enjin rendering ialah perisian yang akan mencipta semula imej daripada data digital. istilah ini adalah generik dan digunakan untuk beberapa jenis atur cara yang melaksanakan tugas atau pengiraan yang lebih atau kurang mudah.
Enjin rendering contohnya boleh bertanggungjawab untuk membina imej 3D daripada maklumat mengenai objek yang akan dilukis, tekstur permukaannya dan sumber cahaya yang perlu diambil kira.
Bergantung pada kes, setiap enjin pemaparan HTML adalah lebih kurang terkini pada piawaian W3C…. Atau lebih kurang buggy. Sebagai contoh, pemaparan animasi CSS3 tidak sama antara Firefox (yang berjalan di bawah Gecko) dan Chrome (yang berjalan di bawah Blink/Webkit): Hasilnya adalah lebih cair pada Chrome, sedangkan kita memperoleh rendering yang agak tersentak pada firefox.
Secara lalai, enjin pemaparan boleh memaparkan HTML, dokumen XML dan imej. Ia boleh memaparkan jenis lain dengan pemalam (atau sambungan penyemak imbas). Contohnya, dokumen PDF dipaparkan menggunakan pemalam pemapar PDF yang anda pasang pada penyemak imbas anda (seperti Adobe Reader), elemen Flash akan kelihatan menggunakan pemalam Adobe Flash Shockwave Player, dsb.
Tetapi mari kita fokus pada topik utama: memaparkan HTML dan imej yang diformat menggunakan CSS.
[jenis pemisah=”” saiz=”” ikon=”bintang”]
Dan bagaimana binatang ini berfungsi?
Pertama, enjin rendering akan memperoleh kandungan dokumen HTML yang ingin dipaparkan oleh pengguna (dia mengklik pada pautan sebagai contoh). Ia akan dimuatkan dalam ketulan 8kb.
Enjin pemaparan akan menganalisis dokumen HTML dan ia akan membina pepohon kandungan daripada nod yang ditemui dalam dokumen. Setiap nod sepadan dengan setiap elemen.
Ia kemudian akan menganalisis data gaya, yang terkandung dalam fail CSS luaran, tetapi juga yang dimasukkan terus ke dalam dokumen HTML, elemen gaya. Maklumat ini akan digunakan untuk mencipta pokok lain.
Pokok render mengandungi segi empat tepat dengan atribut visual seperti warna dan dimensi. Segi empat tepat berada dalam susunan yang betul untuk dipaparkan pada skrin.
Selepas pembinaan pokok rendering, enjin akan memperoleh koordinat yang tepat di mana ia perlu membuat elemen muncul pada skrin. Ia akan 'dibaca' dan setiap nod akan dilukis menggunakan lapisan latar belakang UI.
Apa yang anda perlu ingat ialah ia adalah proses yang beransur-ansur. Penyampai akan memaparkan apa sahaja kandungan yang boleh didapati pada skrin secepat mungkin. Ia tidak akan menunggu semua kod HTML dihuraikan sebelum mula membina paparan akhir.
Anda pastinya telah menyedari fenomena ini apabila sambungan internet anda lebih perlahan daripada biasa, dan halaman web kelihatan 'pecah'. Memang, halaman web tidak dipaparkan baris demi baris, bermula dari atas ke bawah, seperti imej. Bahagian bawah halaman mungkin dipaparkan dahulu jika bahagian atas lebih berat untuk dimuatkan. Sebahagian daripada kandungan akan dihuraikan dan dipaparkan, manakala proses diteruskan dengan halaman lain yang terus dimuatkan. Elemen terakhir yang akan dipaparkan ialah imej yang paling berat.
[jenis pemisah=”” saiz=”” ikon=”bintang”]
Enjin rendering HTML utama
– Tokek
Pada asalnya "NGLayout", Gecko adalah sumber terbuka dan percuma, ia telah dilancarkan oleh Yayasan Mozilla pada tahun 1998, apabila Netscape menerbitkan kod sumber pelayar webnya Netscape Navigator, lantas menjadikannya sumber terbuka. Netscape kemudiannya mencipta Yayasan Mozilla, dengan tujuan untuk terus membangunkan Navigator. Gecko kemudiannya merupakan sebahagian daripada Netscape Navigator.
Ia direka untuk membaca HTML, CSS, XUL dan JavaScript dan mentafsirnya. Ia ditemui dalam pelbagai aplikasi seperti Firefox, Thunderbird, Netscape Navigator, AOL Explorer atau Camino. Produk yang menggunakan versi Gecko yang sama mempunyai sokongan standard yang sama.
Matlamat Gecko ialah enjin mudah alih yang menghormati piawaian web dan cadangan W3C. Ia berfungsi pada sistem pengendalian Windows, Linux dan Mac OS X2. Ia ditulis dalam bahasa pengaturcaraan C++ dan diedarkan di bawah lesen MPL, GPL dan LGPL3. (Sumber: Wikipedia)
- Trident
Trident ialah nama enjin paparan halaman web yang digunakan dalam Internet Explorer dalam versi Windowsnya, dan dengan lanjutan, semua penyemak imbas berdasarkan Internet Explorer. Ia juga sering dirujuk sebagai "MSHTML", sepadan dengan nama perpustakaan pautan dinamik enjin. Ia dibangunkan oleh Microsoft dalam C++
Ia direka bentuk sebagai komponen perisian lapisan COM, membenarkan pembangun menambah kefungsian enjin pada aplikasi mereka dalam mana-mana persekitaran pembangunan yang menyokong COM, termasuk Visual Studio. (Sumber: Wikipedia)
– Kit web
WebKit ialah perpustakaan perisian percuma yang membolehkan pembangun menyepadukan enjin pemaparan halaman web dengan mudah ke dalam perisian mereka. Ia boleh didapati di bawah lesen BSD dan GNU LGPL. Pada asalnya dikhaskan untuk sistem pengendalian Mac OS X (dari versi 10.3 Panther), ia telah dialihkan ke Linux dan Windows. Oleh itu port WebKit untuk persekitaran GTK+ dan Qt dipanggil masing-masing WebKitGTK+ dan QtWebKit.
WebKit ialah garpu enjin pemaparan KHTML bagi projek KDE yang digunakan khususnya dalam pelayar Konqueror. Ia menyepadukan dua sub-pustaka: WebCore dan JavaScriptCore masing-masing sepadan dengan KHTML dan KJS.
Ia berjaya melepasi ujian Acid2 dan versi dalam pembangunan memperoleh 100% dalam ujian Acid3 sejak 27 Mac 2008.
Webkit menyepadukan enjin JavaScript yang mempunyai nama yang sama. Sejak itu ia telah ditulis semula, enjin baharu itu kini dipanggil SquirrelFish, jauh lebih pantas daripada yang sebelumnya.
Pada Februari 2012, kejayaan penyebaran WebKit membawa "kumpulan OpenWeb, menyokong penyeragaman teknologi pembangunan web, untuk melancarkan rayuan kepada pembangun dan menunjukkan akibat penguasaan WebKit pada amalan mudah alih dan pembangun" . Pada Januari 2013, kedudukan dominan Webkit masih menimbulkan masalah. (Sumber: Wikipedia)
Google baru-baru ini meninggalkan Webkit untuk cipta enjin rendering anda sendiri, Kejap.
Selebihnya… Tidak lama lagi 🙂
Emmanuelle Guyot - Saintis UX
