Cara membuat program front-end web yang cekap ialah soalan yang saya pertimbangkan secara tidak sedar setiap kali saya melakukan pembangunan front-end. Beberapa tahun yang lalu, jurutera hadapan yang hebat di Yahoo menerbitkan buku tentang meningkatkan prestasi bahagian hadapan web, yang menyebabkan sensasi dalam keseluruhan komuniti teknologi pembangunan web Masalah pengoptimuman bahagian hadapan web yang misterius menjadi masalah biasa pada jalan, dan pengoptimuman bahagian hadapan web menjadi Soalan mudah yang boleh dijawab oleh kedua-dua orang baru dan pakar Apabila seluruh industri mengetahui jawapan rahsia yang mengejutkan, maka teknologi pengoptimuman yang sedia ada tidak lagi dapat menghasilkan lonjakan kualitatif dalam laman web yang anda bangunkan untuk menjadikan tapak web yang kami bangunkan berprestasi lebih baik daripada yang lain Untuk menjadikan laman web kami lebih baik, kami perlu berfikir dengan lebih mendalam dan berdikari serta mengekalkan kemahiran yang lebih baik.
Sistem acara dalam Javascript ialah titik terobosan pertama yang terlintas di fikiran saya. Mengapakah ia sistem acara JavaScript? Kita semua tahu bahawa bahagian hadapan web merangkumi tiga teknologi: html, css dan javascript Sangat jelas bagaimana html dan css digabungkan: tag gaya, kelas, id dan html adakah javascript masuk ke tengah-tengah html dan css , bagaimana pula dengan mengintegrasikan ketiga-tiganya? Akhirnya, saya mendapati bahawa titik masuk ini adalah sistem acara JavaScript Tidak kira berapa lama atau kompleks kod JavaScript yang kita tulis, ia akhirnya akan dicerminkan dalam HTML dan CSS melalui sistem acara adalah titik masuk untuk penyepaduan tiga titik, maka sudah pasti akan terdapat sejumlah besar operasi acara dalam halaman, terutamanya dalam halaman web yang semakin kompleks hari ini Tanpa peristiwa ini, kod javascript kami yang ditulis dengan teliti hanya akan disimpan dalam pangkalan data, dan wira akan menjadi tidak berguna. Memandangkan akan terdapat sejumlah besar fungsi acara pada halaman, adakah terdapat sebarang masalah yang menjejaskan kecekapan jika kita menulis fungsi acara mengikut tabiat kita? Jawapan yang saya telah selidiki ialah terdapat masalah kecekapan sebenar, dan ia juga merupakan masalah kecekapan yang serius.
Untuk menerangkan jawapan saya dengan jelas, saya perlu terlebih dahulu menerangkan sistem acara JavaScript secara terperinci.
Sistem acara adalah titik masuk untuk penyepaduan javascript, html dan css ini adalah seperti fungsi utama dalam java. Jadi bagaimana pelayar melengkapkan entri ini. Saya telah meneliti sebanyak 3 cara, iaitu:
Kaedah 1: pemprosesan acara html
Pemprosesan acara HTML adalah untuk menulis fungsi acara secara langsung dalam teg html Kerana kaedah penulisan ini digabungkan dengan teg html, ia dipanggil pemprosesan acara html. Contohnya, kod berikut:
Jika fungsi acara klik adalah rumit, menulis kod seperti ini pasti akan menyebabkan kesulitan, jadi kita sering menulis fungsi secara luaran, dan onclick terus memanggil nama fungsi, contohnya:
Kaedah 2: pemprosesan acara tahap DOM 0
Pemprosesan acara peringkat DOM0 ialah pemprosesan acara yang disokong oleh semua penyemak imbas hari ini. Melihat ayat sedemikian akan membuatkan semua orang yang bekerja di bahagian hadapan web teruja. Peraturan untuk pemprosesan acara DOM0 ialah: setiap elemen DOM mempunyai atribut pemprosesan acara sendiri, yang boleh diberikan fungsi, seperti kod berikut:
Lihat kod berikut sekali lagi:
Kaedah 3: pemprosesan acara DOM2 dan pemprosesan acara IE
Pemprosesan acara DOM2 ialah penyelesaian pemprosesan acara piawai, tetapi pelayar IE telah membangunkan setnya sendiri Fungsinya serupa dengan pemprosesan acara DOM2, tetapi kodnya berbeza.
Sebelum menerangkan kaedah ketiga, saya mesti menambah beberapa konsep, jika tidak, saya tidak akan dapat menerangkan konotasi kaedah ketiga dengan jelas.Konsep pertama ialah: aliran acara
Dalam pembangunan halaman, kami sering menghadapi situasi seperti itu. Kawasan kerja halaman boleh diwakili oleh dokumen dalam JavaScript elemen butang dalam div Elemen butang meliputi div, yang juga bersamaan dengan menutup dokumen, jadi masalahnya ialah apabila kita mengklik butang, tingkah laku klik bukan sahaja berlaku pada butang, tetapi operasi klik adalah. digunakan pada kedua-dua div dan dokumen ketiga-tiga elemen logik ini boleh mencetuskan peristiwa klik, dan aliran peristiwa ialah konsep yang menerangkan senario di atas bermaksud: urutan peristiwa diterima daripada halaman.
Konsep kedua: menggelegak acara dan menangkap acara
Event bubbling ialah penyelesaian yang dicadangkan oleh Microsoft untuk menyelesaikan masalah aliran peristiwa, manakala penangkapan peristiwa ialah penyelesaian aliran peristiwa yang dicadangkan oleh Netscape Prinsip mereka adalah seperti berikut:
Acara menggelegak bermula dengan div, diikuti oleh badan, dan akhirnya dokumen Tangkapan acara diterbalikkan, dengan dokumen dahulu, kemudian badan, dan akhirnya div elemen sasaran mesra pengguna Selaras dengan tabiat operasi orang ramai, penyelesaian Netscape adalah sangat janggal Ini adalah akibat daripada perang pelayar Netscape adalah satu langkah yang terlalu lambat untuk menyelesaikan masalah aliran acara dengan kod yang mengorbankan tabiat pengguna. 
Selepas dijalankan, kedua-dua kotak dialog boleh muncul seperti biasa Kaedah ini membolehkan kami menambah berbilang peristiwa klik yang berbeza pada elemen DOM. Bagaimana jika kita tidak mahu acara? Apakah yang perlu kita lakukan? Internet Explorer menyediakan kaedah detachEvent untuk memadamkan acara Senarai parameter adalah sama dengan attachEvent Jika kita ingin memadamkan acara klik, kita hanya perlu menghantar parameter yang sama seperti yang ditunjukkan dalam kod berikut:
Apabila kami menjalankannya, akibatnya sangat serius Kami sangat keliru. Saya telah menyatakan sebelum ini bahawa acara pemadaman memerlukan parameter yang sama seperti acara tambah Walau bagaimanapun, dalam fungsi tanpa nama JavaScript, walaupun kod dua fungsi tanpa nama adalah sama, JavaScript akan menggunakan pembolehubah yang berbeza untuk menyimpannya secara dalaman Hasilnya ialah fenomena yang kita lihat tidak boleh Padam acara klik, jadi kod kita harus ditulis seperti ini:
Kaedah penambahan dan kaedah pemadaman menghala ke objek yang sama, jadi acara berjaya dipadamkan. Adegan di sini memberitahu kita bahawa kita harus mempunyai tabiat yang baik semasa menulis peristiwa, iaitu, fungsi pengendalian harus ditakrifkan secara bebas, dan tidak menggunakan fungsi tanpa nama sebagai kebiasaan.
Langkah seterusnya ialah pemprosesan acara DOM2 Prinsipnya ditunjukkan dalam rajah di bawah:
DOM2 ialah acara standard Menggunakan acara DOM2, penghantaran acara mula-mula bermula daripada kaedah tangkapan, iaitu, dari dokumen, ke badan, dan div ialah titik perantaraan Apabila acara mencapai titik perantara, acara berada di peringkat sasaran, dan acara memasuki peringkat sasaran Selepas itu, acara mula menggelembung, dan akhirnya acara berakhir pada dokumen. (Titik permulaan peristiwa tangkapan dan titik akhir peristiwa menggelegak semuanya dihalakan ke dokumen. Situasi sebenar ialah sesetengah penyemak imbas akan mula menangkap dari tetingkap dan menamatkan gelembung itu. Walau bagaimanapun, saya fikir tidak kira bagaimana pelayar itu sendiri ditetapkan semasa pembangunan, kami Memberi perhatian kepada dokumen lebih bermakna untuk pembangunan, jadi saya sentiasa menggunakan dokumen di sini). Orang ramai terbiasa mengklasifikasikan peringkat sasaran sebagai sebahagian daripada menggelegak, terutamanya kerana acara menggelegak digunakan secara meluas dalam pembangunan.
Pemprosesan acara DOM2 sangat menyusahkan Setiap kali peristiwa dicetuskan, semua elemen akan dilalui dua kali Berbanding dengan acara IE, prestasi IE hanya buih, jadi IE hanya perlu melintasi Kekurangannya tidak bermakna sistem acara IE lebih cekap Dari perspektif pembangunan dan reka bentuk, menyokong kedua-dua sistem acara akan membawa lebih fleksibiliti kepada pembangunan kami Dari perspektif ini, acara DOM2 masih sangat menjanjikan. Kod untuk acara DOM2 adalah seperti berikut:
Untuk menambah peristiwa dalam pemprosesan acara DOM2, addEventListener digunakan Ia menerima tiga parameter dan satu lebih daripada iaitu dua yang pertama mempunyai maksud yang sama dengan dua parameter iaitu kaedah pemprosesan peristiwa Parameter pertama. Awalan pada perlu dialih keluar Parameter ketiga ialah nilai Boolean, maka peristiwa akan diproses mengikut kaedah tangkapan Dengan parameter ketiga kita boleh Memahami mengapa elemen acara mesti dijalankan dua kali dalam pemprosesan acara DOM2. Walau bagaimanapun, sila ambil perhatian di sini bahawa tidak kira kita memilih untuk menangkap atau menggelembungkan dua traversal akan dijalankan selama-lamanya Jika kita memilih Satu kaedah pemprosesan acara, maka tiada fungsi pemprosesan acara akan dicetuskan dalam proses pemprosesan acara lain, yang sama seperti melahu kereta dalam neutral. Melalui reka bentuk kaedah acara DOM2, kita tahu bahawa peristiwa DOM2 hanya boleh melaksanakan salah satu daripada dua kaedah pemprosesan acara pada masa jalan , fungsi acara tidak akan pernah Ia mungkin dicetuskan dua kali Ambil perhatian bahawa apabila saya katakan tidak dicetuskan dua kali, ia merujuk kepada fungsi acara Sebenarnya, kita boleh mensimulasikan pelaksanaan serentak dua model aliran peristiwa, seperti kod berikut: <.>
DOM2 juga menyediakan fungsi untuk memadamkan acara Fungsi ini ialah removeEventListener, yang ditulis seperti berikut:
Jalankannya dan ketahui bahawa acara itu tidak berjaya dipadamkan.
Perkara terakhir yang saya ingin katakan ialah pemprosesan acara DOM2 disokong dengan baik dalam ie9, termasuk acara ie9 dan ke atas tidak disokong di bawah ie8.
Mari kita bandingkan tiga kaedah acara seperti berikut:
Perbandingan 1: Kaedah 1 dibandingkan dengan dua kaedah lain
Kaedah 1 ditulis dengan menggabungkan HTML dan JavaScript Terdapat saya dalam diri anda dan anda dalam saya Untuk memperdalam kaedah ini ialah pembangunan bercampur-campur HTML dan JavaScript, ia adalah gandingan kod adalah tidak baik, dan ia adalah sangat buruk Ini adalah tahap pengaturcara baru, jadi kaedah pertama dikalahkan sepenuhnya, dan dua kaedah lain dikalahkan sepenuhnya.
Perbandingan 2: Kaedah 2 dan Kaedah 3
Kedua-dua kaedah penulisan adalah serupa Kadang-kadang sukar untuk mengatakan yang mana lebih baik dan yang mana lebih teruk dua, elemen DOM boleh mempunyai acara tertentu dan hanya sekali Kaedah tiga membenarkan peristiwa tertentu elemen DOM mempunyai pelbagai fungsi pemprosesan peristiwa Dalam pemprosesan acara DOM2, kaedah tiga juga membolehkan kami mengawal aliran acara dengan tepat. kaedah tiga lebih berkuasa daripada kaedah dua, jadi Sebagai perbandingan, kaedah tiga lebih baik sedikit.
Berikut ialah fokus artikel ini: masalah prestasi sistem acara Untuk menyelesaikan masalah prestasi, kita mesti mencari fokus Di sini saya memikirkan isu prestasi sistem acara dari dua titik fokus : mengurangkan bilangan traversal dan penggunaan memori.
Yang pertama ialah bilangan traversal Sama ada strim acara tangkapan atau strim acara menggelegak, elemen akan dilalui, tetapi traversal akan bermula dari tetingkap atas atau dokumen Jika hubungan ibu bapa-anak antara Elemen DOM halaman adalah dalam, maka traversal akan Semakin banyak elemen yang ada, seperti pemprosesan acara DOM2, semakin besar bahaya traversal Bagaimana untuk menyelesaikan masalah traversal aliran acara ini? Jawapan saya tidak ada kawan di sini mungkin ada soalan, kenapa tidak ada lagi. Terdapat objek acara dalam sistem acara Objek ini mempunyai kaedah untuk mengelakkan acara menggelegak atau menangkap. Soalan rakan ini sangat munasabah, tetapi jika kita ingin menggunakan kaedah ini untuk mengurangkan traversal, maka kod kita mesti berurusan dengan hubungan antara elemen ibu bapa dan anak, dan hubungan antara elemen datuk dan cucu Jika terdapat banyak elemen bersarang pada halaman, ini adalah tugas yang mustahil Jadi jawapan saya ialah anda tidak boleh mengubah masalah traversal, anda hanya boleh menyesuaikan diri dengannya.
Nampaknya mengurangkan traversal tidak dapat menyelesaikan masalah prestasi sistem acara, jadi kini satu-satunya pertimbangan ialah penggunaan memori. Saya sering mendengar orang mengatakan bahawa C# adalah mudah untuk digunakan, tetapi ia lebih baik untuk pembangunan bahagian hadapan web Kita boleh terus menyeret butang ke halaman dalam C# IDE Selepas butang mencapai halaman, kod javascript akan secara automatik tambah acara pada butang sudah tentu Fungsi acara di dalam adalah fungsi kosong, jadi saya fikir kita boleh meletakkan 100 butang pada halaman dengan cara ini Tanpa kod tunggal, kita akan mempunyai 100 pengendali acara butang, yang sangat hebat mudah. Akhir sekali, kami menambah butang tertentu pada salah satu butang Peristiwa membolehkan halaman berjalan. Dalam JavaScript, setiap fungsi adalah objek, dan setiap objek menggunakan memori, jadi 99 kod fungsi acara yang tidak berguna ini mesti menggunakan banyak memori pelayar yang berharga. Sudah tentu kami tidak akan melakukan ini dalam persekitaran pembangunan sebenar, tetapi dalam era hari ini apabila ajax popular dan pembangunan satu halaman sangat popular, terdapat begitu banyak acara pada halaman web, yang bermaksud bahawa setiap acara kami mempunyai fungsi acara. Tetapi setiap operasi yang kami lakukan hanya akan mencetuskan satu peristiwa Pada masa ini, acara lain sedang berbaring dan tidur, yang tidak memberi kesan dan memakan memori komputer.
Kami memerlukan penyelesaian untuk mengubah keadaan ini, dan sememangnya ada penyelesaian sedemikian dalam realiti. Untuk menerangkan penyelesaian ini dengan jelas, saya perlu menambah beberapa pengetahuan latar belakang terlebih dahulu Apabila menerangkan pemprosesan acara DOM2, saya menyebut konsep objek sasaran Mengetepikan kaedah pemprosesan acara DOM2, terdapat juga konsep objek sasaran dalam acara tangkapan pemprosesan dan pemproses acara yang menggelegak , objek sasaran ialah elemen DOM bagi operasi tertentu bagi acara tersebut objek acara. Objek acara mempunyai sasaran atribut, dan sasaran sentiasa menghala ke objek sasaran Objek acara juga mempunyai sifat yang dipanggil currentTarget, yang menghala ke elemen DOM yang mana peristiwa yang ditangkap atau menggelegak. Daripada huraian di atas, kita tahu bahawa sama ada peristiwa tangkapan atau peristiwa menggelegak, aliran acara akan mengalir ke dokumen Jika kita menambah acara klik pada dokumen, butang pada halaman tidak menambah acara klik. Pada masa ini, kami mengklik butang, dan kami tahu Peristiwa klik pada dokumen akan dicetuskan Satu perincian di sini ialah apabila peristiwa klik dokumen dicetuskan, sasaran acara adalah butang dan bukannya dokumen boleh menulis kod seperti ini:
Apabila kita menjalankannya, kita dapati kesannya adalah sama seperti kita menulis acara butang secara berasingan. Tetapi manfaatnya jelas dengan sendirinya. Fungsi One mengendalikan fungsi acara seluruh halaman, dan tiada fungsi acara melahu. Penyelesaian ini juga mempunyai nama profesional: delegasi acara. Kaedah perwakilan jQuery adalah berdasarkan prinsip ini. Malah, kecekapan delegasi acara bukan sahaja dicerminkan dalam pengurangan fungsi acara, ia juga boleh mengurangkan operasi traversal DOM Sebagai contoh, dalam contoh di atas, kami menambah fungsi pada dokumen adalah objek peringkat teratas halaman, dan kecekapan membacanya adalah sangat tinggi, apabila ia berkaitan dengan peristiwa objek tertentu, kami tidak menggunakan operasi DOM tetapi menggunakan atribut sasaran objek acara Semua ini hanya boleh diringkaskan dalam satu ayat: Ia adalah sungguh laju, begitu pantas tanpa sebab.
Delegasi acara juga boleh membawa kami produk sampingan yang hebat Rakan yang telah menggunakan jQuery sepatutnya menggunakan kaedah langsung Ciri kaedah langsung ialah anda boleh menambah operasi acara pada elemen halaman, walaupun elemen ini tidak kini wujud pada halaman , anda juga boleh menambah acaranya Setelah memahami mekanisme delegasi acara, prinsip siaran langsung mudah difahami, siaran langsung jQuery dilakukan melalui delegasi acara, dan secara langsung juga merupakan cara yang cekap untuk menambah peristiwa.
Selepas memahami delegasi acara, kami akan mendapati bahawa kaedah bind jQuery adalah kaedah yang tidak cekap kerana ia menggunakan kaedah definisi acara asal, jadi kami mesti menggunakan bind dengan berhati-hati, pembangun jQuery juga menyedari masalah ini Terdapat kaedah on dalam jQuery Kaedah on merangkumi semua fungsi kaedah bind, live dan delegate, jadi saya cadangkan rakan-rakan yang membaca artikel ini harus meninggalkan kaedah sebelumnya untuk menambah acara dan menggunakan fungsi on untuk menambah acara.
Perwakilan acara mempunyai manfaat lain Dalam contoh delegasi acara di atas, saya menambahkan acara pada dokumen Di sini saya ingin membuat perbandingan Dalam jQuery, kita digunakan untuk meletakkan definisi acara elemen DOM dalam kaedah sedia , seperti berikut Ditunjukkan:
Fungsi sedia dilaksanakan selepas dokumen DOM halaman dimuatkan sebelum fungsi onload ini mempunyai banyak faedah. Saya percaya Sesetengah rakan mesti telah meletakkan pengikatan acara tertentu di luar bersedia, dan akhirnya mendapati bahawa butang itu akan menjadi tidak sah ini kadang-kadang berlangsung seketika, dan kemudian ia menjadi lebih baik, kita sering mengabaikan prinsip masalah ini dan lakukan tidak mengikatnya ke fungsi sedia, operasi ini sebenarnya untuk mengikat acara sebelum DOM dimuatkan Dalam tempoh masa ini, kemungkinan besar beberapa elemen belum dibina pada halaman, jadi pengikatan acara akan. tidak sah. Oleh itu, prinsip acara penentuan sedia adalah Pastikan acara elemen DOM ditakrifkan selepas semua elemen halaman dimuatkan Walau bagaimanapun, masalah boleh dielakkan apabila menggunakan perwakilan acara mewakili keseluruhan halaman, jadi masa apabila ia dimuatkan adalah yang paling awal, jadi dalam dokumen Dengan melaksanakan delegasi acara, sukar untuk acara menjadi tidak sah, dan juga sukar untuk penyemak imbas melaporkan "Fungsi XXX tidak ditakrifkan". Untuk meringkaskan ciri ini: kod delegasi acara boleh dijalankan pada mana-mana peringkat pemuatan halaman, yang akan memberikan pembangun kebebasan yang lebih besar dalam meningkatkan prestasi halaman web atau meningkatkan kesan halaman web.
Sekarang saya telah selesai menulis artikel ini. selamat malam.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
