Google Developers Indonesia Blog: 10 tahun, Chrome Semakin Cepat

Local blog for Indonesian speaking developers

10 tahun, Chrome Semakin Cepat

01 October 2018

empat prinsip utama Chrome Banyak komponen dalam browser berkontribusi terhadap kecepatanV8pipeline eksekusi JavaScript baruIgnitionTurboFanStreaming skripkompilasi latar belakang

Pekerjaan kami di project Orinoco memungkinkan pengumpulan sampah secara bersamaan, mengosongkan thread utama dan mengurangi jank. Seiring waktu, kami juga menggeser fokus pada kinerja JavaScript yang sesungguhnya, membantu kami menggandakan kinerja waktu proses React.js dan meningkatkan kinerja library seperti Vue.js, Preact, dan Angular hingga 40%. Pengumpulan sampah secara paralel, bersamaan, dan bertahap mengurangi pengumpulan sampah yang disebabkan jank sebesar 100× sejak awal V8 dijalankan. Kami juga mengimplementasikan WebAssembly, yang memungkinkan developer menjalankan kode non-JavaScript di web dengan kinerja yang terprediksi, dan meluncurkan compiler dasar Liftoff untuk memastikan waktu startup yang cepat dari aplikasi WASM. Komponen-komponen baru ini adalah yang terbaru dalam upaya 10 tahun yang telah meningkatkan kinerja rilis-ke-rilis V8 sebesar 20x lipat selama tahun-tahun tersebut.

Skor V8 Bench untuk berbagai rilis Chrome selama beberapa tahun. V8 Bench adalah pendahulu dari benchmark Octane yang lama. Kami menggunakannya untuk bagan ini karena tidak seperti Octane, ia bisa berjalan di semua versi Chrome, termasuk Chrome Beta awal.

Chrome juga memainkan peran kunci dalam membantu mengembangkan protokol jaringan dan layer transpor melalui SPDY, HTTP/2 dan QUIC. SPDY bertujuan untuk mengatasi keterbatasan HTTP/1.1 dan menjadi dasar dari protokol HTTP/2, yang sekarang didukung oleh semua browser modern. Secara paralel, tim telah secara aktif melakukan iterasi pada QUIC, yang bertujuan untuk meningkatkan latensi dan pengalaman pengguna dan sekarang memiliki karya IETF aktif di belakangnya. Keunggulan QUIC terlihat nyata untuk layanan video seperti YouTube. Pengguna melaporkan 30% lebih sedikit rebuffer saat menonton video melalui QUIC.

Yang berikutnya adalah pipeline rendering Chrome. Ini bertanggung jawab untuk memastikan halaman responsif terhadap pengguna dan ditampilkan dengan kecepatan 60 bingkai per detik (fps). Untuk menampilkan konten pada 60fps, Chrome memiliki waktu 16ms untuk merender setiap bingkai. Ini mencakup eksekusi JavaScript, gaya, layout, warna dan mendorong piksel ke layar pengguna. Dari 16ms ini, semakin sedikit waktu yang digunakan Chrome, semakin besar kemungkinan developer web memuaskan penggunanya. Penyempurnaan pada pipeline rendering ini termasukmengoptimalisasi bagaimana kami mengidentifikasi elemen apa di halaman yang harus digambar ulang dan pelacakan yang lebih baik secara visual dari perangkat yang tidak tumpang tindih. Ini mengurangi waktu untuk menggambar bingkai baru ke layar hingga 35%.

Pada tahun 2015, model kinerja berorientasi-pengguna yang disebut RAIL diperkenalkan oleh tim Chrome. Kami baru saja mengupdatenya. mengurangi Memberikan developer web kemampuan lebih besar untuk mengukur dan mengoptimalkan halaman web merekalabsesungguhnyaChrome DevToolspeluang kinerjaLighthouseWebPageTest

Lighthouse berjalan di panel Audits Chrome DevTools

Untuk melengkapi data lab yang disediakan Lighthouse, kami merilis Chrome User Experience Report untuk membantu developer mendapatkan akses ke metrik kolom untuk pengalaman yang dirasakan pengguna di dunia nyata, seperti First Contentful Paint dan First Input Delay. Sekarang, developer bisa mem-build laporan kinerja situs khusus mereka sendiri dan melacak perkembangan jutaan sumber menggunakan Dasbor CrUX.

Kami juga memperkenalkan sejumlah kemampuan Platform Web untuk membantu developer mengoptimalkan pemuatan situs mereka. Kami meluncurkan Resource Hints dan <link rel=preload> sehingga memungkinkan developer memberi tahu browser tentang sumber daya apa yang penting untuk dimuat sejak awal. Chrome adalah salah satu browser pertama yang mengimplementasikan dukungan untuk pendekatan penghemat-byte seperti Brotli untuk kompresi, WOFF2 untuk font web yang lebih kecil dan dukungan WebP untuk gambar.

Kami senang melihat semakin banyak browser yang mendukung fitur ini dari waktu ke waktu. Chrome mengimplementasikan Service Worker, mengaktifkan caching offline & jaringan yang andal untuk kunjungan berulang ke halaman. Kami sangat senang melihat dukungan browser modern yang luas untuk fitur ini.

Bahkan, Google Penelusuran sekarang menggunakan Service Worker dan pramuat navigasi untuk caching oportunistik pada penelusuran berulang. Hal ini menyebabkan peningkatan 2x lipat dalam waktu pemuatan halaman untuk kunjungan berulang.

Saat kami melihat ke masa depan, kami juga bersemangat tentang potensi standar yang muncul seperti pemuatan untuk gambar & iframe selalu lamban, dan format gambar seperti AV1 harus membantu menyampaikan konten kepada pengguna secara efisien.

Nikmati lebih banyak konten web di paket data Anda dengan Chrome

Selama 10 tahun terakhir, ukuran halaman web semakin meningkat, tetapi bagi banyak pengguna yang online untuk pertama kalinya, data bisa sangat mahal atau sangat lambat. Untuk membantu, Chrome merilis fitur sadar-data selama bertahun-tahun seperti Penghemat Data Chrome. Penghemat Data secara cerdas mengoptimalkan halaman, menghemat konsumsi data hingga 92%.

Ke depannya, kami akan mengeksplorasi cara-cara baru untuk membantu Anda menghemat data. Bagi pengguna yang memiliki koneksi paling lambat, kami telah mengerjakan Chrome untuk Android, yang memungkinkan optimalisasi halaman yang lebih cerdas untuk menampilkan konten penting lebih dahulu. Transformasi halaman ini dimuat jauh lebih cepat daripada halaman penuh, dan kami terus meningkatkan keakuratan, cakupan, dan kinerjanya.

Kami juga bereksperimen dengan menempatkan pagar pengaman untuk pengguna yang data atau jaringannya dibatasi. Misalnya, kami melakukan penjelajahan dalam menghadirkan pemuatan untuk gambar & iframe selalu lamban ke Chrome, serta memberikan opsi kepada pengguna untuk menghentikan permintaan tambahan dari halaman saat ia menggunakan banyak data

Kami baru memulai...

Bersama-sama, perubahan ini membantu developer dan bisnis mengirimkan konten yang bermanfaat kepada pengguna mereka dengan lebih cepat. Kami tahu masih ada pekerjaan yang harus diselesaikan. Kami di sini untuk menghadirkan peningkatan kinerja pemuatan halaman untuk 10 tahun berikutnya!

Ditulis oleh Addy Osmani, JavaScript Janitor