BerandaComputers and TechnologyPekerja Web untuk meningkatkan kinerja UI

Pekerja Web untuk meningkatkan kinerja UI

Mengapa Anda harus selalu mempertimbangkan Pekerja Javascript dalam proyek Anda

Image for post

Image for post

Pekerja Javascript telah diperkenalkan sekitar tahun 2010 dan menarik karena mereka mengatasi salah satu kekurangan terbesar javascript: menjadi single-threaded.
Seiring waktu, berbagai jenis pekerja diperkenalkan ke bahasa dengan tujuan berbeda, berikut ringkasan singkatnya.

Pekerja web adalah pekerja tambahan pertama dan merupakan tipe yang paling banyak digunakan. Tidak seperti service worker dan worklet seperti yang akan kita lihat di bawah, mereka tidak memiliki kasus penggunaan khusus, selain fitur yang dijalankan secara terpisah dari thread utama.
Hasilnya, pekerja web dapat digunakan untuk melepaskan hampir semua pemrosesan berat dari utas utama, mendapatkan beberapa kinerja di utas utama, tempat UI berjalan.
Anda harus mempertimbangkan apakah akan menggunakannya jika Anda memiliki tugas berat yang tidak memerlukan interaksi dengan UI.
John Resig memiliki pos yang luar biasa kasus penggunaan pekerja web di dunia nyata .

Image for post

Image for post

Dukungan browser Web Worker (dari caniuse.com)

Pekerja Bersama adalah pekerja khusus yang dapat diakses oleh skrip apa pun yang berasal dari domain yang sama. Pekerja web hanya dapat diakses dari skrip yang membuatnya.
Ini berarti bahwa jika Anda memiliki beberapa aplikasi yang dihosting di bawah domain yang sama, Anda dapat mengirim dan menerima pesan di antara aplikasi ini menggunakan pekerja bersama. Ini berarti Anda dapat membangun pekerja yang menyimpan informasi dalam cache, aplikasi apa pun yang memanggil API dapat menyimpan hasilnya di pekerja bersama dan dapat menanyakan pekerja apakah informasi tersebut sudah ada untuk menghindari melakukan permintaan yang sama di antara aplikasi yang berbeda. Pekerja ini sebenarnya jarang digunakan (setidaknya saya belum melihat banyak dari mereka) dan tidak didukung secara luas ( juga ada masalah untuk menghapusnya )

Image for post

Image for post

Dukungan browser Pekerja Bersama (dari caniuse.com)

Layanan pekerja adalah jenis pekerja yang melayani tujuan eksplisit sebagai proxy antara browser dan jaringan. Ini berarti bahwa mereka dapat menyimpan sumber daya, mengubah permintaan keluar, atau mengubah tanggapan yang diterima dari server.
Mereka mungkin adalah API paling kuat yang telah ditambahkan ke platform web baru-baru ini.
Mereka mendapatkan banyak perhatian dengan PWA dan mereka memungkinkan Anda mencapai fungsionalitas yang sebelumnya tidak dapat Anda sukai:
– Penerimaan pemberitahuan push
– Aplikasi yang bekerja dalam mode offline
– dan selengkapnya…
Anda harus mempertimbangkannya jika Anda mau aplikasi web Anda berfungsi mirip dengan aplikasi seluler atau Anda ingin menangani pemberitahuan push, bekerja offline, dll … Anda dapat menemukan semua yang memungkinkan Anda untuk melakukannya sini

Image for post

Image for post

Dukungan browser Service Worker (dari caniuse.com)

Worklets adalah pekerja yang sangat ringan, sangat spesifik. Mereka memungkinkan kami, sebagai pengembang, untuk menghubungkan ke berbagai bagian proses rendering browser.
Jadi pada dasarnya mereka terhubung ke dalam pipeline rendering browser, memungkinkan kita memiliki akses level rendah ke proses rendering browser seperti gaya dan tata letak.
Anda dapat menganggapnya sebagai Web Worker yang ringan dan level rendah, mereka masih dalam status eksperimental jadi saya tidak akan menggunakannya dalam produksi. Mereka mungkin menarik di masa depan

Image for post

Image for post

Dukungan browser worklet (dari caniuse.com)

Pekerja mana yang kami gunakan dan bagaimana

Produk kami harus mendukung Internet Explorer 11 (setidaknya untuk sekarang). Persyaratan ini memberikan batasan yang kuat dan memotong hampir semua pilihan kecuali yang “sederhana”, Web Worker.
Kami mulai mengadopsi pekerja pada awal 2018. Sekitar waktu itu kami mulai membagi aplikasi web monolitik kami ( artikel ) dan kami pikir itu salah satunya perpustakaan (kami menyebutnya ThronModels) yang kami kembangkan akan menjadi kasus penggunaan yang bagus bagi pekerja karena bertanggung jawab untuk membuat permintaan HTTP ke API backend kami, memodelkan hasilnya dan mengembalikannya. Ini berarti tidak ada koneksi ke DOM dan itu hanya logis, tidak terkait dengan apa pun yang terkait dengan UI (karena pekerja web tinggal di utas terpisah sehingga mereka tidak memiliki akses ke DOM).

Meskipun kami yakin bahwa mengangkat beberapa pekerjaan dari utas utama adalah ide yang bagus, kami tidak 100% yakin bahwa ini tidak akan memiliki kekurangan, jadi kami menambahkan fallback untuk membuat perpustakaan berfungsi bahkan tanpa Pekerja. Biaya untuk melakukannya kecil dan kami pikir itu adalah ide yang bagus untuk menerapkan fallback dan kemudian menghapusnya jika terbukti tidak berguna di kemudian hari.
Ini ternyata menjadi ide bagus karena akan sangat berguna dalam jangka panjang. Kami akan berbicara tentang masalah yang disebabkan para pekerja sebentar lagi. Mari kita cari tahu barangnya terlebih dahulu.

Baru-baru ini kami mengembangkan aplikasi web yang merupakan versi interaktif dari dokumentasi beberapa API (mirip dengan ini).
Aplikasi harus mengambil Image for post OpenApi JSON, parse, lalu buat antarmuka yang sesuai. Spesifikasi ini dapat berkembang pesat dari waktu ke waktu sehingga kami berpikir bahwa mengambil dan mengurai ini mungkin besar adalah kasus penggunaan sempurna lainnya untuk para pekerja, jadi kami melakukannya.
Kali ini kami mengubah pendekatan dan kami memilih webpack worker loader , plugin webpack ini memungkinkan Anda menulis file javascript “normal” (itu harus memiliki fungsi ʻonmessage` karena jika tidak, Anda tidak akan dapat berkomunikasi dengan pekerja) yang dikompilasi dan ditangani sebagai pekerja secara otomatis … Seperti kebanyakan plugin webpack, ini Ajaib

Image for post

webpack adalah sihir

Kami menambahkan lapisan abstraksi untuk menghindari harus berurusan dengan ʻonmessage` dan ` postMessage` dari pekerja dan semuanya bekerja dengan baik dan mudah.
Kami juga menggunakan pekerja babel untuk memungkinkan kami menggunakannya semua fungsionalitas js terbaru di dalam file pekerja

Hasilnya lebih baik dari yang diharapkan. Dengan perangkat kelas bawah, Anda dapat melihat perbedaan dalam reaktivitas halaman saat sedang memuat.
Jika Anda memiliki beberapa tugas yang cukup berat, coba gunakan Worker, manfaatnya bisa sangat besar. Lihatlah codepens ini untuk melihat dengan mata Anda perbedaan yang dapat mereka buat:

Kain sobek (terima kasih kepada https://github.com/dissimulate/Tearable-Cloth ) untuk melihat perbedaan yang dapat dilakukan pekerja dalam daya tanggap UI
Kode lain untuk lihat perbedaan dalam responsivitas

Apakah pekerja memiliki kelemahan?

Adopsi pekerja membawa beberapa masalah yang tidak kami antisipasi:

Image for post

Image for post

Permintaan ejekan
– Kami menemukan masalah dengan pekerja dan testcafè: Permintaan HTTP yang dimulai dari pekerja tidak akan dicegat oleh kerangka kerja dan ini mengarah pada ketidakmungkinan menguji pekerja.
Untuk melewati masalah ini, kami menemukan 2 solusi yang mungkin:

1. Saat membuka halaman untuk menguji, cukup “hapus” pekerja dari jendela untuk mencegah perpustakaan menggunakannya:
“window.Worker=undefined;”
Dengan melakukan ini, pustaka ThronModels akan mendeteksi bahwa Worker API tidak ada dan dengan demikian akan mundur untuk menjalankan kode yang persis sama tetapi di utas UI. Dengan cara ini, testcafé dapat mencegat dan mengejek semua permintaan yang kami inginkan.

2. Tambahkan semacam tanda di halaman saat menguji dan hindari menggunakan Worker jika tanda itu benar
“window .__ disableWorker__=true;”
Kemudian periksa flag itu di pustaka ThronModels untuk “memilih” apakah kita perlu menggunakan pekerja atau tidak.

Kami menggunakan solusi pertama tetapi yang kedua juga mudah diterapkan. Tidak ada solusi yang elegan, tetapi berfungsi dengan baik untuk kasus kami.

Pekerja membutuhkan file javascript
Pekerja membutuhkan file untuk bekerja: saat Anda membuat file pekerja itu membutuhkan URL dari skrip sebagai parameter input. Ini bisa mengganggu, terutama jika Anda mengembangkan perpustakaan seperti yang saya gunakan sebagai contoh di atas.
Pustaka javascript itu di-host di NPM dan oleh karena itu, kami tidak memerlukan CDN sama sekali, aplikasi web yang perlu menggunakan pustaka hanya akan menginstalnya dari NPM.
Tapi perpustakaan kami membuat pekerja dan mengharapkan untuk menerima URL dari file javascript untuk diimpor, untungnya kami sudah memiliki hosting dan pengaturan CDN jadi ini tidak menjadi masalah bagi kami (kami juga membutuhkan hosting untuk dokumentasi yang kami tulis dengan Vuepress ) tetapi ingatlah ini.
Saya yakin mungkin ada beberapa alat untuk mengurangi masalah ini tetapi itu adalah sesuatu yang harus Anda perhatikan (lihat comlink oleh Google dan Surma , atau greenlet oleh Jason Miller – sehebat Surma: D)
Karena itu, kita harus ingat pada setiap penerapan, tidak hanya untuk menerbitkan versi perpustakaan baru di npm, tetapi juga untuk menerapkan aset statis ini untuk pekerja, tetapi ini mudah dikurangi jika Anda memiliki CI / CD tempat Anda dapat menambahkan tugas untuk mengotomatiskannya.
Kami masih belum memiliki penyiapan CD (sedang dalam proses) jadi kami melakukannya secara manual (memicu tugas Jenkins) di setiap penerapan. Fallback yang kami terapkan terbukti bermanfaat dalam kasus di mana operator lupa tentang penerapan file pekerja.

Permintaannya sama tetapi berbeda

Image for post

Image for post

Permintaan tidak 100% sama

Saya mengatakan bahwa kami gunakan Worker untuk membuat permintaan HTTP di perpustakaan.
Saat kami mulai mengerjakan proyek baru, beberapa waktu lalu, kami mengalami beberapa masalah saat mengintegrasikan pada API tertentu. API ini memiliki validasi pada tajuk perujuk dan kami menyadari (setelah beberapa sakit kepala debug) bahwa permintaan yang dikirim dari Pekerja tidak menyertakan tajuk ini. Kami mencoba dan mencari di web jika batasan ini dapat dihindari, tetapi sebenarnya tidak menemukan banyak informasi tentang itu. Jadi dalam proyek khusus itu, kami mematikan Worker (fallback lagi berguna).

Image for post

Image for post

Batasan yang perlu ditekankan adalah Anda tidak dapat memanipulasi DOM di dalam pekerja (karena mereka berjalan dalam utas yang terisolasi dan terpisah dibandingkan dengan UI) sehingga Anda dapat menggunakan mereka untuk melakukan operasi pemblokiran besar-besaran tetapi tidak untuk memperbarui DOM atau hal-hal seperti itu. Ini karena ketika Anda mengirim pesan ke pekerja menggunakan Image for post postMessage browser dapat membuat serial pesan menjadi string JSON, itu dapat membuat tiruan pesan (untuk memungkinkan data yang lebih kompleks dikirim, info lebih lanjut di sini ) atau dapat mentransfer kepemilikan pesan ke pekerja.
Semua ini dilakukan untuk menghindari berbagi memori antara utas dan karena javascript pada awalnya dirancang untuk menjadi single-threaded.

Pekerja web dapat membawa peningkatan besar dalam respons UI, terutama jika Anda memiliki operasi pemblokiran sinkron.
Namun, Anda harus siap menghadapi beberapa masalah yang tidak terduga jika Anda tidak belajar sebelum menggunakan th em: kami tidak menemukan bukti apa pun tentang fakta bahwa pekerja tidak mengirim tajuk perujuk sehingga kami mungkin tidak akan pernah menangkap masalah itu sebelum menghadapinya. Jika Anda tahu sesuatu tentang hal itu, silakan tinggalkan kami komentar.
Jika Anda dapat mengandalkan dukungan browser yang lebih baik, pekerja lain dapat membantu Anda lebih meningkatkan aplikasi Anda, jadi perhatikan dua kali versi browser minimum yang akan didukung saat memulai proyek baru (terutama Service Worker)

Kami berencana untuk terus menggunakan pekerja javascript dan mengevaluasi apakah itu benar tepat untuk memindahkan potongan kode pada pekerja untuk meringankan UI lebih jauh saat kami menambahkan fitur atau memulai proyek baru.

Apakah Anda juga menggunakan webworker? Pernahkah Anda mengalami perilaku tidak terduga lainnya? Jika demikian, bagaimana Anda mengatasinya?

Ada kerangka kerja yang bereksperimen dengan penggunaan penuh Pekerja, lihat neomjs , sangat menjanjikan
Jika menurut Anda topik ini menarik, saya sarankan untuk membaca Artikel Surma tentang pekerja, menjelaskan lebih lanjut rincian dan termasuk lebih banyak tolok ukur dan contoh

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments