Soalan Temuduga Pembangun Frontend

1. Soalan: Bolehkah anda menerangkan perbezaan antara var, let dan const dalam JavaScript?

Jawapan:

• var: Berskop fungsi dan boleh diisytiharkan semula dan dikemas kini. Ia dinaikkan, bermakna pengisytiharannya dialihkan ke bahagian atas skopnya pada masa penyusunan.
• biar: Berskop blok dan boleh dikemas kini tetapi tidak diisytiharkan semula dalam skop yang sama. Ia tidak dinaikkan dengan cara yang sama seperti var.
• const: Berskop blok dan tidak boleh dikemas kini atau diisytiharkan semula. Nilai mesti diberikan semasa pengisytiharan. Ia menyediakan cara untuk menentukan pemalar.
• Menggunakan let dan const membantu mengelakkan pepijat biasa disebabkan oleh isu skop dan penugasan semula secara tidak sengaja.

2. Soalan: Bagaimana anda mengurus keadaan dalam aplikasi React?

Jawapan:

Pengurusan negeri dalam React boleh dikendalikan melalui:

• Keadaan Komponen Setempat: Menggunakan useState atau keadaan komponen kelas untuk senario mudah.
• API Konteks: Untuk isu penggerudian prop, untuk menghantar data melalui pepohon komponen tanpa menghantar prop ke bawah secara manual di setiap peringkat.
• Perpustakaan Pengurusan Negeri: Seperti Redux, MobX atau Zustand untuk aplikasi kompleks yang memerlukan keadaan global.
• Cangkuk: Cangkuk tersuai untuk merangkum dan menggunakan semula logik stateful.
• React Query atau SWR: Untuk pengurusan keadaan pelayan.
• Pilihan bergantung pada kerumitan dan keperluan aplikasi.

3. Soalan: Apakah itu DOM Maya, dan bagaimana React menggunakannya?

Jawapan:

• DOM Maya ialah perwakilan dalam ingatan bagi elemen DOM sebenar yang dijana oleh komponen React.
• Apabila keadaan komponen berubah, React mengemas kini pepohon DOM Maya.
• Ia kemudian mengira set perubahan minimum (perbezaan) yang diperlukan untuk mengemas kini DOM sebenar dengan cekap.
• Proses ini meningkatkan prestasi dengan mengurangkan manipulasi langsung DOM, yang merupakan operasi yang mahal.

4. Soalan: Terangkan delegasi acara dalam JavaScript.

Jawapan:

• Delegasi Acara memanfaatkan acara menggelegak untuk mengendalikan acara pada tahap yang lebih tinggi dalam DOM dan bukannya pada nod individu.
• Daripada menambahkan pendengar acara pada setiap elemen anak, anda melampirkan pendengar acara tunggal pada elemen induk.
• Apabila peristiwa dicetuskan pada elemen kanak-kanak, ia menggelembung kepada ibu bapa, di mana ia boleh ditangkap dan diproses.
• Pendekatan ini meningkatkan prestasi dan memudahkan pengurusan kod, terutamanya apabila berurusan dengan elemen yang ditambah secara dinamik.

5. Soalan: Apakah itu Komponen Web, dan bagaimana ia berkaitan dengan elemen tersuai?

Jawapan:

• Komponen Web ialah satu set API piawai yang membolehkan penciptaan teg HTML yang boleh diguna semula dan dikapsulkan.
• Ia terdiri daripada:
  • Elemen Tersuai: Tentukan jenis elemen HTML baharu.
  • Shadow DOM: Menyediakan enkapsulasi untuk gaya dan penanda.
  • Templat HTML: Membenarkan anda menentukan templat boleh guna semula.
• Elemen Tersuai ialah bahagian penting Komponen Web, membenarkan pembangun mencipta teg HTML mereka sendiri dengan gelagat dan gaya tersuai.

6. Soalan: Bagaimana kekhususan CSS berfungsi?

Jawapan:

Kekhususan CSS menentukan peraturan gaya yang digunakan pada elemen apabila berbilang peraturan boleh digunakan:

• Gaya Sebaris (atribut gaya) mempunyai kekhususan tertinggi.
• ID (#id) mempunyai kekhususan yang lebih tinggi daripada kelas.
• Kelas, Atribut dan kelas Pseudo (.class, [type="text"], :hover) mempunyai kekhususan sederhana.
• Elemen dan Pseudo-elemen (div, ::before) mempunyai kekhususan terendah.
• Kekhususan dikira berdasarkan gabungan pemilih. Apabila kekhususan adalah sama, peraturan terakhir yang ditakrifkan diutamakan.

7. Soalan: Apakah Janji dalam JavaScript, dan bagaimanakah ia berbeza daripada panggilan balik?

Jawapan:

• Janji ialah objek yang mewakili penyiapan atau kegagalan operasi tak segerak.
• Mereka menyediakan kaedah seperti .then(), .catch(), dan .finally() untuk mengendalikan hasil tak segerak.
• Janji lwn. Panggilan Balik:
  • Janji membolehkan kod tak segerak yang lebih bersih, boleh diselenggara dan pengendalian ralat yang lebih baik.
  • Panggil balik boleh membawa kepada "neraka panggil balik", di mana panggilan balik bersarang menjadikan kod sukar dibaca dan diselenggara.
• Janji meningkatkan kebolehbacaan dan kebolehurusan kod berbanding dengan panggilan balik tradisional.

8. Soalan: Bolehkah anda menerangkan cara penutupan berfungsi dalam JavaScript?

Jawapan:

• Penutupan ialah fungsi yang mengingati pembolehubah luarnya dan boleh mengaksesnya.
• Ini bermakna fungsi boleh mengakses pembolehubah daripada skopnya sendiri, skop fungsi luar dan skop global.
• Penutupan dibuat setiap kali fungsi dicipta, pada masa penciptaan fungsi.
• Ia berguna untuk privasi data dan meniru kaedah peribadi.

9. Soalan: Bagaimanakah anda mengoptimumkan prestasi aplikasi web?

Jawapan:

• Minimumkan Permintaan HTTP: Gabungkan fail, gunakan sprite.
• Pemuatan Asynchronous: Gunakan tak segerak dan tangguh untuk skrip.
• Caching: Laksanakan caching penyemak imbas dan gunakan Rangkaian Penghantaran Kandungan (CDN).
• Optimumkan Imej: Mampatkan imej dan gunakan format generasi seterusnya seperti WebP.
• Pembahagian Kod: Gunakan alatan seperti Webpack untuk membahagi kod untuk pemuatan malas.
• Kurangkan Sumber Penyekatan Render: Optimumkan penghantaran CSS dan JavaScript.
• Pemantauan Prestasi: Gunakan alatan seperti Lighthouse dan Chrome DevTools untuk pengauditan.

10. Soalan: Apakah tujuan Pekerja Perkhidmatan dalam Apl Web Progresif (PWA)?

Jawapan:

• Pekerja Perkhidmatan bertindak sebagai proksi antara aplikasi web dan rangkaian.
• Mereka mendayakan ciri seperti sokongan luar talian dengan menyimpan cache aset dan memintas permintaan rangkaian.
• Sokong penyegerakan latar belakang dan pemberitahuan tolak.
• Tingkatkan prestasi dengan mengawal caching sumber dan mendapatkan semula.

11. Soalan: Terangkan Model Kotak dalam CSS.

Jawapan:

• Model Kotak CSS ialah kotak yang membungkus setiap elemen HTML.
• Ia terdiri daripada:
  • Kandungan: Kandungan sebenar seperti teks atau imej.
  • Padding: Ruang di sekeliling kandungan di dalam sempadan.
  • Sempadan: Sempadan yang mengelilingi pelapik dan kandungan.
  • Margin: Ruang di luar sempadan antara elemen ini dan elemen lain.
• Memahami model kotak adalah penting untuk reka letak dan reka bentuk.

12. Soalan: Apakah Komponen Pesanan Tinggi (HOC) dalam React?

Jawapan:

• HOC ialah fungsi yang mengambil komponen dan mengembalikan komponen baharu.
• Ia digunakan untuk berkongsi fungsi biasa antara komponen.
• HOC boleh menyuntik prop, mengurus keadaan atau mengendalikan kesan sampingan.
• Contoh penggunaan: const EnhancedComponent = withFeature(WrappedComponent);

13. Soalan: Bagaimanakah anda memastikan kebolehaksesan dalam aplikasi web?

Jawapan:

• Gunakan HTML Semantik: Penggunaan elemen HTML yang betul.
• Atribut ARIA: Sediakan konteks tambahan jika perlu.
• Navigasi Papan Kekunci: Pastikan semua elemen interaktif boleh diakses melalui papan kekunci.
• Kontras dan Kebolehbacaan: Gunakan kontras warna dan saiz teks yang sesuai.
• Teks Alt untuk Imej: Sediakan atribut alt deskriptif.
• Ujian: Gunakan alat ujian kebolehaksesan dan teknologi bantuan.

14. Soalan: Apakah Perkongsian Sumber Silang Asal (CORS), dan bagaimana ia berfungsi?

Jawapan:

• CORS ialah ciri keselamatan yang membenarkan atau menyekat sumber yang diminta daripada domain lain.
• Ia berfungsi dengan menambahkan pengepala HTTP yang menentukan asal-usul yang dibenarkan untuk membaca respons.
• Pelayar menguatkuasakan dasar CORS dan pelayan mesti menyertakan pengepala yang sesuai seperti Access-Control-Allow-Origin.
• Permintaan preflight (kaedah OPTIONS) digunakan untuk permintaan kompleks untuk menyemak kebenaran.

15. Soalan: Terangkan bagaimana anda akan melaksanakan pemuatan malas dalam aplikasi web.

Jawapan:

• Untuk Imej dan Media:
  • Gunakan atribut loading="lazy" dalam tag.
  • Laksanakan Intersection Observer API untuk memuatkan media apabila mereka memasuki ruang pandang.
• Untuk Kod:
  • Gunakan import dinamik dengan Webpack atau pengikat lain.
  • Dalam React, gunakan React.lazy() dan Suspense untuk pemisahan kod peringkat komponen.
• Kebaikan:
  • Meningkatkan masa muat dan prestasi awal.
  • Mengurangkan penggunaan data yang tidak perlu.

16. Soalan: Apakah perbezaan antara == dan === dalam JavaScript?

Jawapan:

• == (Kesamaan Abstrak): Membandingkan nilai selepas melakukan paksaan jenis jika jenis berbeza.
• === (Kesaksamaan Tegas): Membandingkan kedua-dua nilai dan jenis tanpa paksaan jenis.
• Contoh:
  • 0 == '0' adalah benar.
  • 0 === '0' adalah palsu.
• Secara umumnya disyorkan untuk menggunakan === untuk mengelakkan hasil yang tidak dijangka akibat paksaan jenis.

17. Soalan: Bagaimana anda mengendalikan ralat dalam kod tak segerak?

Jawapan:

• Janji: Gunakan .catch() untuk menangani penolakan.
• Async/Await: Balut tunggu panggilan dalam percubaan...tangkap blok.
• Pengendali Ralat Global: Untuk penolakan janji yang tidak dikendalikan.
• Sempadan Ralat (Tindak Balas): Tangkap ralat dalam pokok komponen.
• Pengendalian ralat yang betul memastikan pengalaman pengguna yang lebih baik dan penyahpepijatan yang lebih mudah.

18. Soalan: Terangkan konsep reka bentuk responsif dan cara anda melaksanakannya.

Jawapan:

• Reka Bentuk Responsif memastikan tapak web menyesuaikan diri dengan pelbagai saiz skrin dan peranti.
• Pelaksanaan:
  • Gunakan reka letak grid fleksibel dengan CSS Flexbox atau Grid.
  • Laksanakan pertanyaan media untuk melaraskan gaya berdasarkan saiz port pandangan.
  • Gunakan unit relatif seperti peratusan dan em atau rem.
  • Optimumkan imej untuk resolusi skrin yang berbeza.
• Ujian: Gunakan alat pembangun penyemak imbas dan peranti fizikal untuk menguji responsif.

19. Soalan: Apakah itu prapemproses CSS, dan mengapa anda akan menggunakannya?

Jawapan:

• Prapemproses CSS memperluaskan keupayaan CSS dengan menambahkan ciri seperti pembolehubah, sarang, campuran dan fungsi.
• Contohnya termasuk Sass, Kurang dan Stylus.
• Kebaikan:
  • Kebolehgunaan semula kod dan kebolehselenggaraan.
  • Lebih mudah untuk mengurus pangkalan kod CSS yang besar.
  • Boleh menyusun ke CSS standard untuk keserasian penyemak imbas.

20. Soalan: Bolehkah anda terangkan konsep kebolehubahan dan kepentingannya dalam React?

Jawapan:

• Ketidakbolehubah bermakna data tidak boleh ditukar selepas ia dibuat.
• Dalam React, kebolehubahan adalah penting kerana ia:
  • Membolehkan perubahan keadaan yang boleh diramal.
  • Membantu dalam pengoptimuman prestasi, kerana React boleh membuat perbandingan yang cetek.
  • Mengelakkan kesan sampingan yang tidak diingini.
• Pelaksanaan:
  • Gunakan kaedah yang mengembalikan salinan baharu struktur data, seperti Object.assign atau operator spread.
  • Gunakan perpustakaan seperti Immutable.js untuk struktur data yang kompleks.

21. Soalan: Apakah Webpack, dan mengapa ia digunakan?

Jawapan:

• Webpack ialah pengikat modul untuk aplikasi JavaScript.
• Kegunaan:
  • Menggabungkan fail JavaScript untuk kegunaan dalam penyemak imbas.
  • Memproses dan menggabungkan aset seperti CSS, imej dan fon melalui pemuat.
  • Mendayakan pemisahan kod dan pemuatan malas.
  • Menyokong pemalam untuk fungsi lanjutan.
• Kebaikan:
  • Mengurus kebergantungan dengan cekap.
  • Mengoptimumkan aset untuk pengeluaran.

22. Soalan: Bagaimanakah anda menghalang serangan Skrip Silang Tapak (XSS)?

Jawapan:

• Pembersih Input: Bersihkan dan sahkan semua input pengguna di bahagian pelayan.
• Pengekodan Output: Keluarkan input pengguna sebelum memaparkannya dalam penyemak imbas.
• Dasar Keselamatan Kandungan (CSP): Tentukan sumber kandungan yang dipercayai untuk mengelakkan skrip berniat jahat.
• Elakkan Skrip Sebaris: Simpan kod JavaScript dalam fail luaran.
• Gunakan Kuki HTTPSahaja: Untuk menghalang akses kepada kuki melalui JavaScript.
• Audit Keselamatan Biasa: Kekal dikemas kini dengan amalan terbaik keselamatan.

23. Soalan: Apakah faedah dan kelemahan menggunakan Aplikasi Satu Halaman (SPA)?

Jawapan:

• Kebaikan:
  • Pengalaman pengguna yang lancar tanpa muat semula halaman penuh.
  • Prestasi yang lebih baik selepas pemuatan awal.
  • Lebih mudah untuk mencipta pengalaman seperti mudah alih.
• Kelemahan:
  • Cabaran SEO, walaupun ini boleh dikurangkan dengan pemaparan sebelah pelayan.
  • Masa pemuatan awal mungkin lebih lama.
  • Pengurusan sejarah penyemak imbas boleh menjadi rumit.
• Memilih antara SPA dan aplikasi berbilang halaman tradisional bergantung pada keperluan projek.

24. Soalan: Bagaimanakah kata kunci ini berfungsi dalam JavaScript?

Jawapan:

• ini merujuk kepada objek yang melaksanakan fungsi semasa.
• Konteks:
  • Konteks Global: ini merujuk kepada objek global (tetingkap dalam penyemak imbas).
  • Kaedah Objek: ini merujuk kepada objek yang memiliki kaedah.
  • Pengendali Acara: ini merujuk kepada elemen DOM yang mencetuskan acara.
  • Fungsi Anak Panah: Tidak mempunyai ini sendiri; mereka mewarisinya daripada skop yang disertakan.
• Memahami perkara ini adalah penting untuk pengaturcaraan berorientasikan objek dalam JavaScript.

25. Soalan: Terangkan perbezaan antara RESTful API dan GraphQL.

Jawapan:

• API REHAT:
  • Gunakan kaedah HTTP dan titik akhir untuk mengakses sumber.
  • Data disusun mengikut sumber.
  • Boleh membawa kepada pengambilan data yang berlebihan atau kurang pengambilan.
• GrafQL:
  • Menggunakan satu titik akhir.
  • Pelanggan menyatakan dengan tepat data yang mereka perlukan.
  • Mengurangkan bilangan permintaan rangkaian.
  • Memerlukan skema dan penyelesai.
• Faktor Pilihan:
  • Keperluan projek, kerumitan data dan kepakaran pasukan.

26. Soalan: Bagaimana anda mengurus gaya dalam aplikasi React berskala besar?

Jawapan:

• Modul CSS: Kelas CSS skop tempatan kepada komponen.
• Komponen Bergaya: Pustaka CSS-dalam-JS yang membenarkan penulisan CSS dalam JavaScript.
• Sass/Less: Gunakan prapemproses untuk ciri CSS lanjutan.
• Metodologi BEM: Untuk menamakan konvensyen dan organisasi.
• Tema: Gunakan konteks atau perpustakaan untuk memberikan penggayaan yang konsisten.
• Pendekatan bergantung pada pilihan pasukan dan keperluan projek.

27. Soalan: Apakah React Hooks, dan mengapa ia diperkenalkan?

Jawapan:

• React Hooks ialah fungsi yang membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas.
• Kail Biasa:
  • useState untuk pengurusan negeri.
  • gunakanKesan untuk kesan sampingan.
  • useContext for context API.
• Sebab Pengenalan:
  • Permudahkan logik stateful dalam komponen berfungsi.
  • Elakkan kerumitan kelas.
  • Dayakan penggunaan semula kod yang lebih baik melalui cangkuk tersuai.

28. Soalan: Terangkan bagaimana anda akan melaksanakan pengesahan dalam aplikasi satu halaman.

Jawapan:

• Pengesahan Berasaskan Token:
  • Gunakan JWT yang disimpan dengan selamat (sebaik-baiknya dalam kuki HTTP sahaja).
  • Laksanakan aliran log masuk untuk menerima dan menyimpan token.
• Perlindungan Laluan:
  • Gunakan komponen tertib lebih tinggi atau pengawal laluan untuk melindungi laluan yang disahkan.
• Integrasi Belakang:
  • Sediakan titik akhir API untuk pengesahan.
  • Sahkan token di bahagian pelayan.
• Pertimbangan Keselamatan:
  • Lindungi daripada serangan XSS dan CSRF.
  • Gunakan HTTPS untuk menyulitkan penghantaran data.

29. Soalan: Apakah pengaturcaraan berfungsi, dan bagaimanakah ia digunakan pada JavaScript?

Jawapan:

• Pengaturcaraan Fungsional ialah paradigma yang menganggap pengiraan sebagai penilaian fungsi matematik.
• Konsep Teras:
  • Fungsi Tulen: Tiada kesan sampingan dan mengembalikan output yang sama untuk input yang sama.
  • Ketidakbolehubah: Data tidak diubah selepas penciptaan.
  • Fungsi Kelas Pertama: Fungsi dianggap sebagai nilai.
  • Fungsi Pesanan Tinggi: Fungsi yang mengambil atau mengembalikan fungsi lain.
• Dalam JavaScript:
  • Menyokong pengaturcaraan berfungsi dengan ciri seperti peta, mengurangkan, menapis dan ungkapan fungsi.

30. Soalan: Bagaimana anda mengendalikan keserasian penyemak imbas dan polyfill?

Jawapan:

• Pengesanan Ciri: Gunakan Modernizr atau alat serupa untuk mengesan ciri yang tidak disokong.
• Polyfill: Sertakan skrip yang mereplikasi kefungsian moden dalam penyemak imbas lama (cth., Babel polyfill).
• Transpilasi: Gunakan alatan seperti Babel untuk menukar kod ES6 kepada ES5.
• Peningkatan Progresif: Bina kefungsian yang berfungsi pada semua penyemak imbas, tingkatkan jika boleh.
• Ujian: Uji secara kerap merentas penyemak imbas dan peranti yang berbeza.
• Gunakan Bolehkah Saya Gunakan: Semak sokongan ciri sebelum pelaksanaan.

31. Soalan: Apakah Reka Bentuk Berpusatkan Pengguna?

Jawapan:

Reka Bentuk Berpusatkan Pengguna adalah mengenai mereka bentuk dengan mengambil kira pengguna pada setiap langkah. Dengan memfokuskan pada keperluan pengguna sebenar dan melibatkannya sepanjang proses pembangunan, produk lebih berkemungkinan berjaya, mesra pengguna dan memenuhi permintaan sebenar khalayak sasaran.

32. Soalan: Apakah panggilan balik neraka?

Jawapan:

Neraka Panggilan Balik merujuk kepada anti-corak yang mempunyai berbilang panggilan balik bersarang, yang membawa kepada kod yang sukar dibaca dan diselenggara. Dengan menggunakan Promises, Async/Await dan penstrukturan kod yang betul, anda boleh menulis kod asynchronous yang lebih bersih dan mengelak daripada jatuh ke dalam Callback Neraka.

33. Soalan: Apakah maksud SOLID?

Jawapan:

Prinsip SOLID berfungsi sebagai garis panduan untuk pembangun membina perisian yang mudah diurus, dilanjutkan dan skala. Dengan mengikuti prinsip ini, anda boleh mencipta sistem teguh yang tahan ujian masa dan menyesuaikan diri dengan keperluan baharu dengan anggun.

34. Soalan: Apakah Clickjacking?

Jawapan:

Clickjacking, juga dikenali sebagai "serangan pembetulan UI", ialah teknik berniat jahat di mana penyerang memperdaya pengguna untuk mengklik pada sesuatu yang berbeza daripada apa yang dilihat pengguna, yang berpotensi membawa kepada tindakan yang tidak dibenarkan atau mendedahkan maklumat sulit.

Contoh:

• Seorang pengguna melawati tapak web berniat jahat yang memuatkan butang log masuk tapak web perbankan di bawah butang "Main Video" palsu. Apabila pengguna mengklik untuk memainkan video, mereka sebenarnya mengklik butang log masuk pada tapak perbankan, yang berpotensi untuk memulakan tindakan yang tidak diingini.

35. Soalan: Apakah Paksaan dalam JavaScript?

Jawapan:

Paksaan dalam JavaScript merujuk kepada proses menukar nilai daripada satu jenis data kepada yang lain. JavaScript melakukan paksaan dalam dua cara: tersirat (automatik) dan eksplisit (manual).

36. Soalan: Apakah IIFE dalam JavaScript?

Jawapan:

IIFE (Ungkapan Fungsi Segera Diminta) ialah fungsi JavaScript yang berjalan sebaik sahaja ia ditakrifkan. Ia adalah corak reka bentuk yang menyediakan skop peribadi untuk kod anda.

37. Soalan: Apakah Sistem Grid dalam CSS?

Jawapan:

Sistem Grid dalam CSS ialah rangka kerja reka letak yang membolehkan pembangun mencipta reka bentuk web yang kompleks dan responsif dengan mudah. Ia menyediakan cara berstruktur untuk menyusun kandungan dalam baris dan lajur, memudahkan penciptaan reka letak responsif dan fleksibel.

38. Soalan: Apakah Ruang Nama dalam JavaScript?

Jawapan:

Dalam JavaScript, ruang nama ialah bekas yang membolehkan pembangun mengumpulkan kod berkaitan di bawah nama unik untuk mengelakkan perlanggaran penamaan dan memastikan skop global bersih. Memandangkan JavaScript tidak mempunyai sokongan ruang nama terbina dalam seperti beberapa bahasa lain, pembangun mencipta ruang nama menggunakan objek, modul atau ungkapan fungsi yang dipanggil serta-merta (IIFE).

39. Soalan: Apakah kegunaan penggunaan arahan ketat dalam JavaScript?

Jawapan:

Arahan ketat penggunaan digunakan untuk menulis kod JavaScript bersih yang kurang terdedah kepada ralat. Ia menangkap ralat pengekodan biasa seperti menetapkan pembolehubah tanpa mengisytiharkannya atau menghantar parameter berbeza dengan nama yang sama kepada fungsi dll.

40. Soalan:

Jawapan:

Melewati atribut tangguh atau async kepada teg mengawal cara pelayar memuatkan dan melaksanakan fail JavaScript luaran, meningkatkan prestasi pemuatan halaman dengan mengoptimumkan pengendalian skrip.

tangguh Atribut

• Tujuan: Mengarahkan penyemak imbas untuk memuat turun skrip selari dengan penghuraian HTML tetapi menangguhkan pelaksanaan sehingga selepas keseluruhan dokumen dihuraikan.
• Tingkah Laku:
  • Tidak Menyekat: Tidak menghentikan penghuraian HTML.
  • Masa Pelaksanaan: Melaksanakan selepas DOM dibina sepenuhnya tetapi sebelum acara DOMContentLoaded.
  • Pemeliharaan Pesanan: Jika berbilang skrip ditangguhkan, skrip tersebut dilaksanakan mengikut susunan yang dipaparkan dalam dokumen.
• Kes Penggunaan: Sesuai untuk skrip yang bergantung pada DOM atau perlu mengekalkan susunan pelaksanaan.

Contoh:

  <script src="script.js" defer\>\</script\>  

Atribut tak segerak

• Tujuan: Memberitahu penyemak imbas untuk memuat turun skrip secara selari dan melaksanakannya sebaik sahaja ia siap, tanpa menunggu penghuraian HTML selesai.
• Tingkah Laku:
  • Tidak Menyekat: Tidak menjeda penghuraian HTML semasa muat turun.
  • Masa Pelaksanaan: Melaksanakan serta-merta selepas memuat turun, yang mungkin berlaku sebelum atau selepas DOM sedia.
  • Pesanan Tidak Dijamin: Perintah pelaksanaan tidak dapat diramalkan jika berbilang skrip async digunakan.
• Kes Penggunaan: Sesuai untuk skrip bebas seperti analitis atau iklan yang tidak bergantung pada skrip lain atau DOM.

Contoh:

  <script src="analytics.js" async\>\</script\>  

Ringkasan

• Tujuan Utama: Kedua-dua atribut meningkatkan prestasi halaman dengan membenarkan penghuraian HTML dan muat turun skrip berlaku serentak, mengurangkan skrip penyekat pemaparan.
• Memilih Antara tangguh dan tak segerak:
  • Gunakan tunda apabila skrip bergantung pada DOM atau perlu dilaksanakan mengikut tertib.
  • Gunakan async untuk skrip yang boleh dijalankan secara bebas dan di mana susunan pelaksanaan tidak penting.

Atas ialah kandungan terperinci Soalan Temuduga Pembangun Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!