Prestasi React Lanjutan: Daripada Binaan Pembangun kepada Pekerja Web

Utama » Python » Prestasi React Lanjutan: Daripada Binaan Pembangun kepada Pekerja Web

React boleh terasa sangat pantas sebaik sahaja dikeluarkan dari kotak, tetapi apabila aplikasi anda berkembang, ia sangat mudah untuk meningkatkan regresi prestasi yang halus yang menukarkan antara muka yang lancar menjadi raksasa yang lembap dan dahagakan bateri. Senarai panjang, komponen yang berat, struktur keadaan yang janggal dan binaan penyahpepijatan dalam pengeluaran semuanya terkumpul sehingga pengguna mula meninggalkan halaman anda.

Berita baiknya ialah React dilengkapi dengan kotak peralatan yang kaya untuk mengukur, memahami dan meningkatkan prestasi pemaparan., dan ekosistem di sekelilingnya (bundler, profiler, pustaka windowing, Web Workers, rangka kerja SSR) memberikan anda semua yang anda perlukan untuk memastikan UI anda pantas walaupun pada skala besar. Dalam panduan ini, kami akan meneliti alatan tersebut secara mendalam, menunjukkan bagaimana ia sesuai antara satu sama lain dan mengetengahkan beberapa helah yang kurang jelas yang sering diketepikan oleh pasukan tetapi sangat berbaloi.

Gunakan binaan React yang betul: pembangunan, pengeluaran dan pemprofilan

Pemeriksaan prestasi pertama untuk mana-mana aplikasi React adalah mengesahkan bahawa anda menghantar binaan pengeluaran, bukan yang dibangunkan.Binaan pembangunan ini merangkumi banyak amaran mesra pengguna, semakan tambahan dan pembantu penyahpepijatan yang hebat semasa pengekodan tetapi ketara lebih perlahan dan lebih besar dalam pengeluaran.

Anda boleh mengesahkan binaan yang anda gunakan dengan sambungan pelayar React Developer ToolsApabila anda membuka laman web menggunakan React, ikon sambungan mempunyai latar belakang gelap semasa pengeluaran dan latar belakang merah semasa pembangunan. Jika anda melihat warna merah di laman web langsung anda, konfigurasi bundler anda membocorkan binaan yang salah.

Untuk projek yang dibootstrap dengan Create React App, menjana pakej pengeluaran yang dioptimumkan semudah menjalankan skrip binaan anda, yang mengeluarkan pakej yang diminimumkan ke dalam build/ direktori. Semasa pembangunan setempat, anda harus berpegang pada npm start (atau setaraf) dan hanya jalankan binaan pengeluaran untuk penggunaan atau untuk penanda aras prestasi yang realistik.

Jika anda bergantung pada binaan fail tunggal UMD bagi React dan React DOM (contohnya dalam persekitaran bukan pakej), pastikan anda memasukkan fail yang berakhir dengan .production.min.jsSebarang fail yang tidak diminimumkan atau bukan pengeluaran adalah bertujuan untuk pembangunan sahaja dan akan menghantar overhed penyahpepijatan yang tidak perlu kepada pengguna anda.

Penggabung: Browserify, Rollup, Brunch dan webpack

Penggabung yang berbeza memerlukan tweak yang berbeza untuk mendayakan pengoptimuman pengeluaran React sepenuhnya, tetapi semuanya mengikuti idea asas yang sama: tetapkan persekitaran kepada pengeluaran, hapuskan cabang pembangunan sahaja dan kecilkan JavaScript yang terhasil.

Dengan Brunch, pendekatan yang disyorkan adalah memasang plugin minifier seperti terser-brunch, kemudian jalankan binaan anda dengan bendera pengeluaran (contohnya dengan -p). Konfigurasi ini memastikan amaran masa pembangunan dialih keluar dan pakej akhir dimampatkan secara agresif.

Untuk Browserify, anda biasanya merangkai beberapa transformasi dalam susunan tertentu: mula-mula memohon envify secara global untuk menyuntik NODE_ENV="production", kemudian memohon uglifyify secara global untuk memadamkan import pembangunan dan laluan kod, dan akhirnya menyalurkan pakej tersebut terser untuk mangling dan mampatan. Urutan penting di sini kerana setiap langkah menyediakan kod untuk transformasi seterusnya.

Apabila menggunakan Rollup, anda memasang tiga pemalam untuk mencapai binaan pengeluaran tanpa lemak: replace menetapkan persekitaran kepada pengeluaran, commonjs membolehkan penggabungan modul CommonJS, dan terser melakukan minifikasi dan mangling terakhir. Kombo ini menghasilkan pakej kecil yang sedia untuk pengeluaran tanpa pembantu pembangunan sahaja.

Dengan webpack 4 dan ke atas, mendayakan mod pengeluaran akan mengaktifkan banyak pengoptimuman secara automatik termasuk pengurangan. Tetapan mode: 'production' wayar dalam Terser di bawah hud dan membolehkan tingkah laku pengeluaran React selagi NODE_ENV padanan. Anda biasanya tidak perlu menambah minifier berasingan melainkan anda mempunyai keperluan yang sangat khusus.

Pemprofilan binaan React

Selain binaan pembangunan dan pengeluaran biasa, React juga menawarkan binaan profil khas yang tertumpu pada analisis prestasi.Instrumen varian ini bertindak balas secara dalaman supaya alatan seperti DevTools Profiler boleh mengumpulkan maklumat masa yang sangat terperinci.

Untuk menggunakan binaan profil dalam persekitaran pelayar, anda mengimport react-dom/profiling bukan react-dom/client dan biasanya mengkonfigurasi alias bundler supaya anda tidak perlu menyentuh setiap import secara manual. Sesetengah rangka kerja sudah mendedahkan bendera atau mod untuk menukar tingkah laku ini untuk anda.

Versi React terdahulu (sebelum 17) bergantung pada API Pemasaan Pengguna standard untuk mengeluarkan tanda dan ukuran yang kelihatan dalam panel Prestasi pelayar. React Moden menggabungkan kebolehan tersebut dengan tab Profiler khusus dalam React DevTools supaya anda boleh meneliti komponen secara langsung.

Memahami dan mengukur prestasi React

Anda tidak boleh membetulkan apa yang anda tidak ukur, jadi kerja prestasi dalam React harus sentiasa bermula dengan pemprofilanIni bermakna menggunakan alatan pelayar dan profil khusus React untuk melihat di mana masa sebenarnya dihabiskan dan komponen mana yang membuat pemaparan semula lebih daripada yang sepatutnya.

Panel Prestasi Chrome DevTools ialah garis dasar anda untuk memahami apa yang dilakukan oleh pelayarPelaksanaan JavaScript, permintaan rangkaian, susun atur, cat, kelewatan gelung peristiwa dan jejak tersuai semuanya dipaparkan pada garis masa yang disatukan. React disepadukan ke dalam paparan ini dengan trek khusus yang mendedahkan aktiviti khusus rangka kerja.

React Moden mendedahkan trek Penjadual, Komponen dan Pelayan yang sejajar dengan jejak pelayar biasaIni memberi anda paparan rangkaian, JavaScript dan kemas kini React yang disegerakkan, yang sangat berguna apabila anda sedang mencari jank atau gerai pelik yang hanya muncul semasa dimuatkan.

Penjadual menjejaki dan memaparkan fasa

Penjadual ialah abstraksi React dalaman yang mengatur kerja pada keutamaan yang berbezaDalam jejak prestasi, anda akan melihat subtrek berasingan untuk kerja penyekatan (selalunya kemas kini dipacu pengguna segerak), kerja peralihan (kemas kini UI latar belakang yang dicetuskan oleh startTransition), Tugasan berkaitan saspens dan kerja terbiar yang dijalankan apabila tiada perkara yang lebih penting sedang menunggu.

Setiap hantaran render melalui beberapa fasa berbeza yang boleh anda periksa pada garis masa: fasa kemas kini (apa yang mencetuskan render), fasa render (di mana React memanggil komponen anda dan membina pokok seterusnya), fasa komit (di mana DOM dimutasi dan kesan susun atur seperti useLayoutEffect larian) dan fasa kesan yang tinggal (di mana kesan pasif seperti useEffect biasanya dijalankan selepas cat).

Kemas kini bertingkat—perubahan keadaan yang dijadualkan semasa pemaparan—adalah sumber klasik masalah prestasi tersembunyiDalam pembangunan, React boleh menandakannya dalam garis masa dan juga menunjukkan komponen dan kaedah yang menjadualkan kemas kini tambahan, membantu anda mengelakkan gelung pemaparan yang tidak disengajakan atau kerja berulang.

Trek komponen: graf api untuk pemaparan dan kesan

Trek Komponen menggambarkan berapa lama masa yang diambil oleh setiap komponen untuk dipaparkan (dan turunannya) menggunakan flamegraf. Lebih lebar blok pada graf, lebih banyak masa yang diambil oleh subpokok komponen pada hantaran render tersebut.

React juga mendedahkan tempoh kesan sebagai flamegraf berasingan dengan skema warna yang mencerminkan fasa yang sepadan dalam trek Penjadual, jadi anda boleh membezakan masa pemaparan daripada masa kesan sepintas lalu.

Peristiwa tambahan seperti pemasangan, penyahpasangan, penyambungan semula dan pemutusan sambungan muncul sebagai anotasi pada graf flame iniContohnya, memasang bahagian baharu pokok atau merobohkannya akan ditanda, dan beberapa ciri seperti <Activity> komponen mendapat penanda penyambungan/pemutus sambungan mereka sendiri.

Dalam pembangunan, mengklik entri pemaparan dalam trek Komponen mendedahkan prop yang telah diubah, yang sangat berguna apabila anda cuba menjejaki render atau prop yang tidak perlu yang terus mengubah rujukan tanpa benar-benar mengubah nilai.

Jejak pelayan: permintaan dan Komponen Pelayan

Jika anda menggunakan Komponen Pelayan React, perkakasan prestasi juga boleh menimbulkan tingkah laku bahagian pelayanTrek "Permintaan Pelayan" mengagregatkan Janji yang akhirnya memasukkan data ke dalam komponen pelayan, termasuk panggilan ke fetch atau operasi sistem fail tak segerak.

Percubaan React untuk mengumpulkan Janji yang dibuat dalam pembantu pihak ketiga ke dalam satu rentang jadi anda akan melihat satu operasi logik seperti getUser bukannya sedozen tahap rendah fetch panggilan. Mengklik rentang menunjukkan tempat ia dicipta dan, apabila tersedia, nilai yang diselesaikan atau sebab penolakan.

Trek Komponen Pelayan yang berasingan memaparkan berapa lama masa yang diambil oleh pokok komponen pelayan dan Janji yang ditunggu-tunggu, juga dalam bentuk flamegraf. Apabila React boleh memaparkan komponen pelayan secara serentak, ia mencipta trek utama dan trek selari tambahan; jika keserentakan melebihi nombor tertentu, kerja tambahan dikumpulkan untuk memastikan paparan boleh dibaca.

Mengurangkan pemaparan yang tidak perlu: React.memo, useMemo, useCallback dan PureComponent

Salah satu kekurangan prestasi terbesar dan paling biasa dalam aplikasi React ialah pemaparan semula yang tidak perluSetiap kali komponen induk dikemas kini, anak-anaknya akan dipaparkan semula secara lalai, walaupun input (prop) mereka adalah sama dan output DOM sebenarnya tidak akan berubah.

React menawarkan beberapa alat untuk mengurangkan kerja yang sia-sia ini: React.memo untuk komponen berfungsi, React.PureComponent untuk komponen kelas, dan useMemo/useCallback cangkuk untuk menstabilkan nilai yang diturunkan sebagai alat peragaIni tidak menyelesaikan semua masalah prestasi secara ajaib, tetapi jika digunakan dengan teliti, ia boleh membuat perbezaan yang besar.

React.memo membungkus komponen berfungsi dan melangkau pemaparan semula apabila propnya sama sedikit dengan yang sebelumnyaIni paling berharga apabila komponen sering membuat pemaparan dengan prop yang sama, mempunyai logik pemaparan yang berat atau anda mempunyai bukti daripada Profiler bahawa ia merupakan satu kesesakan.

Apabila anda memokan komponen, anda juga perlu memastikan propnya tidak mengubah identiti tanpa perluMencipta objek atau fungsi sebaris baharu di dalam JSX induk pada setiap render akan membatalkan perbandingan cetek dan memaksa anak untuk membuat render semula, walaupun data logiknya sama.

Di sinilah dimana useMemo and useCallback masuklah: useMemo menstabilkan nilai objek atau tatasusunan yang diperoleh daripada keadaan lain supaya ia hanya berubah apabila kebergantungannya berubah, dan useCallback menyediakan rujukan fungsi yang stabil untuk panggilan balik yang dihantar kepada anak-anak yang dimeo.

Komponen kelas: shouldComponentUpdate dan React.PureComponent

Secara asasnya, kebanyakan pengoptimuman render React berfokus pada mengawal sama ada shouldComponentUpdate mengembalikan benar atau salahPelaksanaan lalai sentiasa mengembalikan nilai benar, bermakna sebarang perubahan prop atau keadaan mencetuskan pemaparan dan penyelarasan untuk komponen tersebut dan subpokoknya.

Dengan mengatasi shouldComponentUpdate, anda boleh melakukan kerja litar pintas untuk subpokok yang tidak perlu dikemas kiniJika anda mengembalikan false, React tidak akan memanggil render() untuk komponen itu atau mana-mana keturunannya, dan ia tidak akan membandingkan nod DOM maya baharu dan lama untuk bahagian pokok itu.

Pertimbangkan pokok komponen kecil di mana beberapa nod mengembalikan palsu daripada shouldComponentUpdateReact boleh melangkau sepenuhnya traversal ke dalam cabang-cabang tersebut, manakala nod lain di mana kaedah mengembalikan true akan diproses sepenuhnya. Akhirnya, hanya nod yang output yang diberikannya benar-benar berubah akan menyebabkan mutasi DOM.

Kerana menulis tersuai shouldComponentUpdate logik itu berulang, React dihantar React.PureComponent, yang melaksanakan perbandingan cetek antara prop dan keadaan semasa dan sebelumnya. Jika tiada apa yang berubah secara cetek, React boleh melangkau pemaparan semula komponen kelas tersebut dengan selamat.

Ketidakbolehubahan dan mengapa perbandingan cetek boleh gagal

Perbandingan cetek mengandaikan bahawa jika nilai berubah, rujukannya akan berubah—andaian yang memecahkan saat anda mengubah suai tatasusunan atau objek sedia ada di tempatnyaIni merupakan sumber pepijat klasik apabila menggabungkan pengoptimuman berasaskan kebolehubahan dengan struktur data boleh berubah.

Bayangkan a ListOfWords komponen yang menerima words tatasusunan dan menjadikannya dipisahkan koma, dipasangkan dengan ibu bapa WordAdder komponen yang menolak perkataan baharu ke dalam tatasusunan yang sama. Jika ListOfWords Memanjangkan PureComponent, perbandingan cetek akan melihat rujukan tatasusunan yang sama dan menganggap tiada apa yang berubah, jadi UI tidak akan dikemas kini.

Penyelesaiannya adalah untuk mengelakkan mutasi prop atau state secara langsung dan sebaliknya mencipta tatasusunan atau objek baharu apabila data berubah. Sebaliknya words.push(newWord), anda akan gunakan words.concat(newWord) atau sintaks penyebaran [...words, newWord], yang mencipta rujukan baharu untuk tatasusunan dan mencetuskan kemas kini yang betul.

Prinsip yang sama terpakai kepada objek: daripada menugaskan semula colormap.right = 'blue' pada objek sedia ada, anda akan mengembalikan objek baharu menggunakan Object.assign({}, colormap, { right: 'blue' }) atau sintaks penyebaran objek { ...colormap, right: 'blue' }Ini menjamin bahawa perbandingan cetek melihat rujukan baharu dan mengenal pasti perubahan tersebut.

Apabila data menjadi sangat bersarang, mengekalkan kebolehubahan dengan tangan boleh menjadi sukar dikawalPerpustakaan seperti Immer atau immutability‑helper membolehkan anda menulis kod yang kelihatan penting dan mutatif sambil menghasilkan struktur baharu yang tidak boleh diubah secara dalaman, yang sesuai digunakan dengan baik PureComponent and React.memo.

Virtualisasi senarai panjang dan UI yang berat

Memaparkan ratusan atau ribuan nod DOM sekaligus adalah salah satu cara terpantas untuk mengurangkan prestasi React, terutamanya pada peranti kelas bawahan atau apabila digabungkan dengan susun atur dan imej yang kompleks. Walaupun dengan penyelarasan yang cekap, hanya mempunyai banyak nod dalam memori dan pada skrin adalah mahal.

Pengimbasan tetingkap, atau virtualisasi senarai, menangani perkara ini dengan hanya memaparkan bahagian senarai yang kini kelihatan dalam port paparanSemasa pengguna menatal, React akan memasang item baharu yang memasuki paparan dan menyahpasang item yang menatal keluar, memastikan bilangan baris yang dipaparkan hampir sama.

Perpustakaan popular seperti react-window and react-virtualized menyediakan komponen yang boleh diguna semula untuk senarai, grid dan jadual yang melaksanakan strategi virtualisasi yang cekap. Mereka mengendalikan pengiraan item yang hendak dipaparkan, saiz, menatal bekas dan juga tingkah laku pemuatan tanpa had.

Menyediakan virtualisasi biasanya melibatkan tiga bahagian: memilih komponen yang sesuai (contohnya, FixedSizeList untuk baris seragam atau VariableSizeList untuk ketinggian dinamik), memberikan bekas ketinggian tetap dengan overflow: scroll, dan hanya memaparkan komponen item yang diminta oleh pustaka, biasanya dimemokan dengan React.memo untuk mengelakkan pemaparan semula yang tidak perlu.

Dilakukan dengan baik, virtualisasi memastikan prestasi skrol lancar dan penggunaan memori rendah walaupun untuk set data yang besarAplikasi dunia sebenar telah menggunakan teknik ini untuk menyemak imbas koleksi besar dengan cekap—ulasan muzik, katalog e-dagang, peti masuk—tanpa UI yang terhenti.

Kebolehcapaian memerlukan sedikit perhatian tambahan dengan senarai mayaAnda perlu memastikan navigasi papan kekunci berfungsi, fokus diuruskan dengan betul semasa item dipasang dan dinyahpasang dan pembaca skrin mempunyai konteks yang mencukupi melalui atribut ARIA untuk memahami bahagian senarai yang sedang kelihatan.

Pengurusan keadaan, DOM maya dan struktur komponen

DOM maya sering disalahertikan sebagai penyelesaian yang bijak, tetapi ia sebenarnya hanyalah lapisan pembezaan pintarReact mengekalkan perwakilan dalam memori UI anda dan membandingkan pokok baharu dengan yang lama untuk menentukan operasi DOM yang mana sangat diperlukan.

Walaupun dengan kecekapan itu, setiap render dan diff masih memerlukan masa, jadi matlamat anda adalah untuk meminimumkan kekerapan subpokok besar perlu dirender semula.Di sinilah pengurusan keadaan, sempadan komponen dan strategi memoisasi semuanya bersilang.

Pertama, pilih strategi pengurusan keadaan yang sesuai untuk kerumitan aplikasi andaKeadaan Reaksi Tempatan (useState, useReducer) adalah kecil dan ringkas untuk komponen kecil, manakala perpustakaan seperti Redux atau kedai ringan seperti Zustand boleh memusatkan keadaan global yang lebih kompleks dengan corak langganan yang dioptimumkan.

Kedua, strukturkan keadaan anda supaya data berkaitan dikumpulkan dengan bijakKadangkala itu bermaksud menyatukan pelbagai useState panggilan ke dalam objek tunggal supaya kemas kini adalah koheren; dalam kes lain, pemisahan keadaan supaya kebimbangan bebas tidak memaksa satu sama lain untuk memaparkan semula adalah lebih berkesan.

Apabila mengemas kini keadaan yang diperoleh daripada nilai sebelumnya, sentiasa gunakan kemas kini berfungsi seperti setCount(prev => prev + 1), dan mengekalkan kebolehubahan dengan mengklon tatasusunan dan objek dan bukannya mengubahnya di tempatnya. Ini membawa kepada tingkah laku yang boleh diramal dan sesuai dengan memoisasi dan PureComponents.

Peraturan praktikal yang berguna adalah untuk memastikan negeri setempat yang mungkinSemakin tinggi nilai keadaan disimpan dalam pokok, semakin banyak komponen yang akan dipaparkan semula apabila ia berubah. Menolak keadaan ke bawah kepada komponen yang benar-benar menggunakannya akan mengehadkan jejari letupan setiap kemas kini.

Akhir sekali, pecahkan komponen besar kepada bahagian yang lebih kecil dan terfokus yang propnya jarang berubahKomponen daun yang di-memo dengan prop stabil mengurangkan jumlah DOM React maya yang perlu dibezakan dan memendekkan laluan kepada set kemas kini DOM yang minimum.

Pemisahan kod, pemuatan malas dan pemuatan aset yang lebih baik

Saiz pakej JavaScript merupakan penyumbang utama kepada prestasi yang lemah, terutamanya pada rangkaian mudah alihJika pakej React anda mengambil masa beberapa saat untuk dimuat turun dan dihuraikan, pengguna akan melantun lama sebelum mereka melihat UI anda yang cantik.

Pemisahan kod dengan React.lazy and Suspense membantu dengan memuatkan komponen atas permintaan dan bukannya menghantar semuanya terlebih dahuluDaripada menggabungkan setiap ciri dalam muatan awal, anda mengimport secara dinamik bahagian yang hanya diperlukan untuk laluan atau interaksi tertentu.

Strategi biasa ialah pemisahan peringkat laluan, di mana setiap halaman merupakan bahagiannya yang tersendiri dan hanya dimuatkan apabila pengguna menavigasi ke sana. Anda boleh pergi lebih jauh dan memisahkan komponen ciri yang besar atau panel yang jarang digunakan, selagi anda menggabungkannya Suspense dengan UI sandaran yang sesuai.

Pemuatan malas juga terpakai pada imej. Menambah loading="lazy" kepada <img> tag menangguhkan pemuatan imej di bawah lipatan sehingga ia menatal ke paparan, menjimatkan lebar jalur dan mempercepatkan cat awal. Untuk kesan yang lebih maju, pustaka seperti react-lazy-load-image-component menyokong ruang letak kabur dan pemuatan progresif.

Apabila melaksanakan pemisahan kod, penting untuk mengimbangi saiz ketulan dan pengalaman penggunaPemisahan berlebihan boleh menghasilkan terlalu banyak permintaan kecil, manakala pemisahan yang tidak mencukupi akan menyebabkan anda mempunyai pakej permulaan yang berat. Cadangan sandaran dan sempadan ralat yang baik di sekitar komponen malas adalah penting supaya permintaan rangkaian yang gagal tidak menyebabkan keseluruhan aplikasi ranap.

Pemaparan bahagian pelayan, Komponen Pelayan React dan Tindakan Pelayan

Pemaparan bahagian pelayan (SSR) memaparkan aplikasi React anda pada pelayan dan menghantar HTML kepada klien, yang boleh meningkatkan prestasi dan SEO yang dirasakan secara mendadakPengguna melihat kandungan yang berguna lebih cepat dan enjin carian boleh mengindeks halaman anda dengan lebih andal.

Rangka kerja seperti Next.js menjadikan SSR dan penstriman HTML praktikal untuk aplikasi harianAnda mengambil data pada pelayan, memaparkan komponen ke dalam HTML—kadangkala sebagai strim—dan kemudian menghidratkan markup tersebut pada klien supaya ia menjadi interaktif.

Selain SSR klasik, Komponen Pelayan React menolak lebih banyak logik UI anda ke bahagian pelayan, membolehkan anda memaparkan komponen yang tidak pernah dihantar kepada klien langsung. Ini boleh mengurangkan saiz pakej klien dengan ketara dan memudahkan pengambilan data, memandangkan komponen pelayan boleh memanggil pangkalan data atau API secara langsung.

Tindakan Pelayan melanjutkan idea ini dengan membolehkan anda menentukan fungsi yang berjalan pada pelayan tetapi dicetuskan daripada komponen klienIni menghapuskan banyak titik akhir REST boilerplate atau pengendali API tersuai dan boleh memperkemas cara anda mengendalikan mutasi, penyerahan borang dan operasi stateful yang lain.

Digunakan bersama, SSR, Komponen Pelayan dan Tindakan Pelayan memberi anda spektrum strategi pemaparan: kandungan kritikal boleh distrim dengan cepat dari pelayan, logik berat tidak berkaitan dengan klien dan masa jalan React menggabungkan semuanya menjadi UX yang padu.

Mengurangkan beban kerja berat dengan Web Workers

Pokok React yang dioptimumkan dengan terbaik pun akan tergagap-gagap jika anda menjalankan tugasan yang banyak CPU pada thread utamaPengiraan yang mahal menyekat pemaparan, melambatkan pengendalian peristiwa dan menjadikan aplikasi anda terasa tidak responsif.

Pekerja Web menyediakan cara untuk memindahkan tugas-tugas berat tersebut ke thread latar belakangAnda menghantar data kepada pekerja, membiarkannya memproses nombor atau memproses set data yang besar, dan kemudian menerima hasilnya kembali melalui penghantaran mesej, membiarkan thread utama bebas untuk mengendalikan kemas kini UI.

Beban kerja biasa untuk Pekerja Web termasuk pemprosesan data, pemprosesan imej, analitik masa nyata atau simulasi kompleksContohnya, permainan yang dibina dengan tindanan web selalunya mewakilkan logik permainan teras kepada pekerja manakala thread utama dikhaskan untuk pemaparan dan pengendalian input.

Mengintegrasikan pekerja dengan React melibatkan penciptaan fail skrip berasingan, mendengar onmessage di dalam pekerja dan menyiarkan mesej daripada komponen andaDalam komponen tersebut, anda membuat instansiasi pekerja, menghantar input dengan postMessage dan kemas kini keadaan apabila ia bertindak balas, idealnya membersihkan pekerja apabila komponen dinyahpasang.

Pustaka seperti Comlink, workerize atau plugin bundler boleh memudahkan corak ini dengan mengabstrakkan mesej peringkat rendah yang dihantar dan memberi anda API yang terasa seperti memanggil fungsi async, yang lebih mudah untuk dipertimbangkan dalam pangkalan kod React.

Metrik pelayar utama dan berpusatkan pengguna untuk diperhatikan

Pada tahap yang lebih tinggi, prestasi web keseluruhan biasanya dijejaki menggunakan metrik yang berpusatkan pengguna seperti First Contentful Paint (FCP), Largest Contentful Paint (LCP) dan Time to Interactive (TTI). Ini memberi anda gambaran tentang seberapa cepat pengguna melihat kandungan dan seberapa cepat mereka sebenarnya boleh berinteraksi dengannya.

Aplikasi Healthy React menyasarkan FCP kurang daripada 1.8 saat, LCP kurang daripada 2.5 saat dan TTI jauh di bawah 4 saat pada peranti biasa, walaupun ambang yang tepat boleh berbeza mengikut projek. Jika anda sentiasa melebihi angka tersebut, itu adalah tanda bahawa pakej, strategi pemaparan atau masa tindak balas pelayan anda perlu diperbaiki.

Alatan seperti Lighthouse, WebPageTest dan panel Prestasi Chrome membantu anda mengukur metrik ini dalam persekitaran ujian sintetikUntuk wawasan dunia sebenar, alat Pemantauan Pengguna Sebenar (RUM) seperti SpeedCurve, Datadog, LogRocket atau Sentry mengesan sesi pengguna sebenar dan menghubungkan pengalaman perlahan kembali kepada perubahan kod.

API Profiler React sendiri disepadukan dengan kemas dengan gambar ini: anda boleh membalut bahagian pokok anda <Profiler>, log pemaparan perlahan dan mengaitkannya dengan aliran pengguna tertentu. Apabila digunakan bersama pemantauan bahagian belakang dan rangkaian, ini memberi anda gambaran prestasi menyeluruh.

Aliran kerja pasukan praktikal untuk penalaan prestasi

Dalam projek sebenar, penalaan prestasi berfungsi paling baik apabila dianggap sebagai aliran kerja yang boleh diulang dan bukannya pembersihan sekali sahajaGelung empat fasa mudah—mengenal pasti, menyiasat, melaksanakan, mengesahkan—membantu mencegah pengoptimuman mikro rawak dan memastikan usaha tertumpu di tempat yang penting.

Pengenalpastian bermaksud menggunakan profil, metrik dan laporan pengguna untuk mencari simptom konkrit seperti halaman yang perlahan, kadar bingkai yang rendah atau pengabaian yang tinggi semasa aliran tertentu. Anda mahukan masalah yang boleh diukur, bukan perasaan.

Siasatan menggali punca utama: mungkin sesebuah halaman mengandungi berpuluh-puluh iframe tersembunyi, mungkin komponen tertentu terlalu kerap dipaparkan semula atau pustaka vendor yang besar sedang dimuatkan pada setiap laluan. Di sini anda banyak bergantung pada React DevTools Profiler dan garis masa Chrome.

Pelaksanaan adalah tempat anda menggunakan pembetulan yang disasarkan—memokan komponen panas, memvirtualisasikan senarai panjang, memisahkan pakej, memindahkan kerja kepada Pekerja Web atau mendayakan SSR untuk halaman tertentu. Setiap perubahan hendaklah cukup kecil untuk dipertimbangkan.

Pengesahan adalah langkah terakhir dan selalunya yang paling diabaikanAnda menjalankan semula senario pemprofilan anda dan menyemak papan pemuka metrik anda untuk memastikan perubahan tersebut benar-benar meningkatkan nombor dan tidak memperkenalkan regresi di tempat lain dalam sistem.

Apabila anda menggabungkan binaan React yang betul, memoisasi yang teliti, amalan keadaan yang tidak berubah, virtualisasi senarai, pemisahan kod strategik, SSR, Pekerja Web dan pengukuran berterusan, anda akan mendapat aplikasi React yang kekal pantas dan responsif walaupun ia menjadi lebih kompleks.; teknik-teknik di atas bukanlah mengenai penalaan mikro pramatang tetapi mengenai pembinaan seni bina di mana prestasi kekal sebagai hasil sampingan semula jadi dan bukannya pertempuran yang berterusan.