Rumah >hujung hadapan web >tutorial js >(Keperluan untuk Apl Web Berprestasi Tinggi
Apakah sebenarnya "apl web berprestasi tinggi" atau "depan"?
Sejak kemerosotan era Internet Explorer, ekosistem JavaScript telah berkembang menjadi semakin berkuasa dan istilah "frontend" telah menjadi sinonim dengan pelanggan web moden berprestasi tinggi. Di teras dunia "frontend" ini terletak React. Malah, tidak menggunakan React dalam pembangunan bahagian hadapan selalunya menjadikan seseorang itu kelihatan seperti luar biasa.
Tetapi kerana bukan setiap permainan adalah AAA, kita mesti mempertimbangkan dengan teliti apa yang kita maksudkan dengan "prestasi tinggi" apabila membincangkan apl web. Perbezaan ini penting untuk topik yang dibincangkan hari ini.
1. Skop Apl Web Berprestasi Tinggi
Dalam kebanyakan kes, istilah "apl web berprestasi tinggi" merujuk kepada klien web interaktif dan dinamik yang dibina menggunakan rangka kerja berasaskan JavaScript seperti React, Vue atau Angular. Apl ini biasanya mempunyai masa pemuatan yang cepat dan penghalaan pihak pelanggan, dan DOM maya React memainkan peranan utama dalam meningkatkan kelajuan pemaparan.
Walau bagaimanapun, terdapat apl web yang menggunakan kesemua 4GB had memori modul WASM, dibina dengan mengambil kira pengurusan memori yang sistematik, dan menyasarkan prestasi setanding dengan program asli seperti Blender atau 3Ds Max. Apl ini lebih selaras dengan konsep "program" yang memanfaatkan setiap sumber tab penyemak imbas, bukannya "halaman web" tradisional yang dioptimumkan untuk SEO.
Walaupun persekitaran penyemak imbas semasa mungkin masih sukar untuk menyampaikan prestasi seperti asli disebabkan oleh had memori dan overhed, matlamat apl sedemikian pada asasnya berbeza. Mereka mengendalikan set data yang besar dan bertujuan untuk menggunakan memori 2-4GB penuh, semuanya sambil mengejar kelajuan pemaparan tertinggi.
Memandangkan isu yang dihadapi oleh jenis apl web ini berbeza daripada yang dihadapi oleh apl "berprestasi tinggi" biasa, arah yang mereka ikuti juga berbeza.
"apl web berprestasi tinggi" yang disebut pada permulaan dan yang saya terangkan di sini pada asasnya berbeza dalam laluan mereka. Untuk menggabungkan mereka bersama-sama dalam satu penggal akan menjadi masalah. Kami memerlukan istilah yang berbeza untuk menggambarkan perbezaan ini.
Itulah sebabnya saya mencadangkan agar kita berhenti merujuk kepada yang kedua sebagai "apl web berprestasi tinggi" atau "depan" dan sebaliknya menggunakan istilah berikut:
Saya percaya istilah ini mentakrifkan dengan jelas perbezaan keperluan antara bahagian hadapan dan HPSE. Bukan setiap pelanggan berasaskan pelayar adalah bahagian hadapan; ada yang HPSE. Pertimbangkan contoh berikut untuk memahami mengapa perbezaan ini penting:
[Perbualan 1]
J: "Saya sedang membangunkan apl bahagian hadapan tetapi tidak menggunakan React."
B: "Apl bahagian hadapan tanpa React? React mempunyai lebih 60% bahagian pasaran di bahagian hadapan! Mengapa anda tidak menggunakannya?"
[Perbualan 2]
J: "Saya sedang membangunkan apl HPSE tetapi tidak menggunakan React."
B: "Itu masuk akal untuk HPSE. Syarikat permainan sering menyesuaikan enjin mereka secara meluas, tetapi fungsi dalaman dan saluran pemaparan React tidak boleh diubah suai. Ia tidak pernah direka untuk tujuan itu."
Sekarang, mari kita bincangkan komponen penting yang mesti ada pada HPSE.
2-1. Pengurusan Memori
Anda tidak boleh bercakap tentang program berprestasi tinggi tanpa menangani memori. Sama ada menggunakan pemungut sampah atau membebaskan memori yang diperuntukkan secara dinamik secara manual, memori yang tidak digunakan mesti sentiasa dibebaskan.
Pertimbangkan permainan berasaskan pelayar di mana pemain berpindah ke peta baharu. Permainan ini perlu mengambil data peta baharu daripada pelayan secara tidak segerak, mencipta jejaring baharu dan mengalih keluar yang lama. Data yang digunakan untuk menjana jaringan lama juga mesti dibebaskan.
Jika rujukan kepada data lama tidak dikeluarkan dengan betul, penggunaan memori akan terus berkembang dengan setiap peralihan peta. Sebaik sahaja ia mencapai kira-kira 2GB, anda mungkin menghadapi ralat "Kehabisan Memori" dan penyemak imbas akan ranap.
Memang benar bahawa JavaScript tidak direka untuk kawalan memori peringkat rendah—baik bahasa mahupun falsafah pembangunnya tidak mengutamakannya. Saya tidak mengatakan pengurusan ingatan sentiasa penting, tetapi seperti yang mereka katakan, "tidak ada perkara seperti makan tengah hari percuma." Jika pengurusan ingatan perlu, ia mesti dilakukan.
2-2. Fleksibiliti dalam Memenuhi Keperluan
Saya pernah mendengar seseorang berkata, "Apabila anda beralih daripada menjadi pembangun junior kepada perantara, anda sepatutnya dapat membina apa sahaja yang diminta daripada anda."
JavaScript sudah pun menjadi bahasa yang mengagumkan dengan beberapa batasan yang wujud (selain daripada had memori). Jika anda ingin membina sesuatu, kemungkinan besar ia boleh dilakukan.
Persoalan sebenar ialah sama ada projek semasa anda benar-benar dapat menampung pelbagai keperluan.
Sama seperti mesin di kilang rosak selepas operasi berterusan, mengejar prestasi tinggi, ciri tersuai pasti membawa kepada menghadapi cabaran yang tidak dijangka. Apabila ini berlaku, fleksibiliti dan keupayaan untuk memenuhi keperluan unik adalah penting.
Sebagai contoh, pernahkah anda mendengar bahawa Lost Ark dibina pada Unreal Engine 3? Enjin Unreal 5 telah dikeluarkan sekarang, namun mereka masih menggunakan Enjin Unreal 3, yang telah dicipta pada tahun 2004. Untuk mengekalkan projek itu sehingga kini, mereka mesti telah membuat pengubahsuaian yang meluas pada enjin—secara praktikalnya adalah baik pulih sepenuhnya. Disebabkan oleh ciri permainan, mereka perlu sentiasa menyesuaikan saluran paip dan gelung pemaparan dengan teknik seperti pemaparan tertunda, contoh, pemusnahan dan pantulan ruang skrin untuk memenuhi keperluan prestasi dan estetik.
Keupayaan untuk mengubah suai kod sumber enjin adalah kritikal. Jika enjin telah ditutup atau digandingkan terlalu ketat untuk membenarkan pengubahsuaian, Lost Ark mungkin tidak pernah dibangunkan.
HPSE adalah sama. Walaupun persekitaran telah berubah kepada berasaskan pelayar, keperluan untuk fungsi tersuai dan pengubahsuaian fleksibel tetap sama. Oleh itu, perpustakaan dan modul luaran yang digunakan dalam HPSE mesti boleh diubah suai, dan jika saluran paip pemaparan penyemak imbas atau gandingan modul dalaman terlalu tegar untuk membenarkan perubahan ini, ia menjadi masalah yang ketara.
2-3. Pendekatan Berorientasikan Objek Yang Tidak Dapat Dielakkan
Apabila berurusan dengan program berskala besar, satu perkara menjadi tidak dapat dielakkan: pengaturcaraan berorientasikan objek (OOP).
JavaScript ialah bahasa berbilang paradigma, dan pengaturcaraan berfungsi (FP) digunakan secara meluas. Walau bagaimanapun, FP, walaupun sesuai untuk pelanggan web, jarang digunakan dalam program berskala besar di mana berbilang objek berinteraksi dengan cara yang kompleks kerana kejadian dalam FP tidak mempunyai keadaan dalaman.
React mengimbangi perkara ini dengan pengurusan keadaan global dan useEffect, tetapi ia tidak seintuitif setiap kejadian mengekalkan keadaan sendiri dan kaedah mengawal panggilan melalui kaedah awam.
Walaupun OOP bukanlah pilihan terbaik, sukar untuk memikirkan alternatif yang lebih baik apabila mempertimbangkan keperluan pembangunan HPSE yang sangat disesuaikan. Banyak program berskala besar, termasuk sistem pengendalian dan permainan, dibina menggunakan prinsip OOP. Malah sumber enjin yang paling popular adalah berorientasikan objek, dengan variasi kecil dalam metodologi.
Pembangun yang telah mengambil bahagian dalam projek berskala besar berkemungkinan biasa dengan OOP. Ini menjadikan pembangunan berasaskan OOP kondusif untuk kerjasama.
Yang berkata, tidak perlu membuang kekuatan JavaScript. Memandangkan JavaScript menyokong fungsi dan pengisytiharan const, fungsi modul ringkas yang tidak memerlukan contoh boleh ditakrifkan sebagai literal objek menggunakan const atau fungsi. Ini boleh meningkatkan produktiviti dan memanfaatkan kepelbagaian JavaScript.
Sebagai kesimpulan, saya percaya bahawa pendekatan pelbagai paradigma, menggabungkan prinsip berorientasikan objek, akan sesuai untuk HPSE.
Atas ialah kandungan terperinci (Keperluan untuk Apl Web Berprestasi Tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!