js pertanyaan wawancara
1. tipe data js
Tipe data dasar Nomor, String, Boolean, Null, Tidak terdefinisi, Simbol, bigInt Tipe data referensi objek, Array, Tanggal, Fungsi, RegExp2. Peningkatan deklarasi variabel dan fungsi js
Di js, deklarasi variabel dan fungsi akan dipromosikan ke atas. Fungsi eksekusi dipromosikan lebih tinggi dari variabel. Jika variabel eksternal dengan nama yang sama dideklarasikan dengan var di dalam fungsi, fungsi tersebut tidak akan lagi mencari ke atas. Fungsi anonim tidak diangkat.3. Penutupan
Penutupan adalah fungsi yang dapat membaca variabel internal fungsi lain. Penutupan pada dasarnya adalah fungsi yang mengembalikan suatu fungsi. Keuntungan: Dapat membaca variabel di dalam fungsi dan menyimpan variabel di memori metode pribadi dari objek. Kekurangan: Lebih mahal. Penggunaan memori yang tidak tepat dapat menyebabkan masalah kelebihan memori4. Perbedaan antara == dan ===
== sama dalam arti yang tidak ketat. Jika nilainya sama, maka keduanya sama. === sama dalam arti yang ketat. Tipe data dan ukuran nilai dari kedua sisi akan dibandingkan alamat akan sama hanya jika keduanya sama.5. ini
this selalu menunjuk ke pemanggil langsung dari fungsi tersebut. Jika ada kata kunci new, this menunjuk ke objek yang keluar dari new. Dalam event, this menunjuk ke objek yang memicu event tersebut.6. Cara melintasi array dan objek js
untuk infoforEachfor-of7. Perbedaan antara peta dan forEach
Metode forEach adalah metode paling dasar, yaitu traversal dan looping. Ada tiga parameter yang diteruskan secara default: item konten array yang dilintasi, indeks indeks array, dan metode Arraymap array yang dilintasi saat ini. Penggunaan dasarnya sama dengan forEach , tetapi berbeda. Ini akan mengembalikan array baru, jadi callback harus memiliki nilai kembalian.8. Apa perbedaan antara fungsi panah dan fungsi biasa?
Objek this di badan fungsi adalah objek yang mendefinisikannya, bukan objek yang menggunakannya. Ia tidak dapat digunakan sebagai konstruktor. Artinya, perintah baru tidak dapat digunakan, jika tidak maka akan terjadi kesalahan dilempar. Objek argumen tidak dapat digunakan. Objek tidak ada di dalam badan fungsi. Jika Anda ingin menggunakannya, Anda dapat menggunakan parameter Rest. Perintah hasil tidak dapat digunakan, sehingga fungsi panah tidak dapat digunakan sebagai fungsi Generator.9. Strategi asal yang sama
Homologi mengacu pada nama domain, protokol, dan nomor port yang sama.10. Cara mengatasi masalah lintas domain
jsonp lintas-domain document.domain + iframe lintas-domain nodejs proxy middleware backend lintas-domain menetapkan nama domain aman di informasi header11. Pembatasan rezim yang ketat
Variabel harus dideklarasikan sebelum menggunakan fungsi. Parameter tidak boleh memiliki atribut dengan nama yang sama, jika tidak, kesalahan akan dilaporkan. Pernyataan with tidak dapat digunakan untuk mencegah hal ini menunjuk ke objek global.12. Baru di es6
Fungsi panah string template baru untuk-of (digunakan untuk melintasi data—seperti nilai dalam array.) ES6 menggabungkan objek Promise ke dalam spesifikasi dan menyediakan objek Promise asli. Menambahkan perintah let dan const untuk mendeklarasikan variabel. Ada pula pengenalan konsep modul modul13. Apa perbedaan antara atribut dan properti?
atribut adalah atribut yang dimiliki elemen dom sebagai tag html pada dokumen. property adalah atribut yang dimiliki elemen dom sebagai objek di js. Untuk atribut standar html, atribut dan properti disinkronkan dan akan diperbarui secara otomatis. Namun, untuk atribut khusus, keduanya tidak disinkronkan.14. Apa perbedaan antara let dan const?
Tidak ada promosi variabel dalam perintah let. Jika digunakan sebelum let, kesalahan akan dilaporkan. Jika ada perintah let dan const di area blok, cakupan tertutup akan terbentuk dan deklarasi berulang tidak diperbolehkan dan tidak dapat diubah. Namun, jika definisinya adalah Objek, Anda dapat mengubah data di dalam objek tersebut15. Kebocoran memori
Definisi: Berbagai masalah yang disebabkan oleh program tidak dapat dilepaskan atau tidak dapat melepaskan memori heap yang telah dialokasikan secara dinamis dalam program karena alasan tertentu. Kemungkinan kebocoran memori di js: Hasil: pelambatan, crash, penundaan besar, dll. Kemungkinan penyebab kebocoran memori di js Ketika variabel global dom dihapus, masih ada kebocoran memori yang disebabkan oleh adanya elemen anak yang tidak dibersihkan oleh pengatur waktu referensi.16. Bagaimana cara memperkenalkan naskah?
html static <script> memperkenalkan penyisipan dinamis js <script><script defer>: pemuatan asinkron, dieksekusi setelah penguraian elemen selesai <script async>: pemuatan asinkron, tetapi rendering elemen akan diblokir selama eksekusi17. Metode susunan
peta: Melintasi array dan mengembalikan array baru yang terdiri dari nilai pengembalian panggilan balik. forEach: Tidak dapat dipecah, Anda dapat menggunakan throw new Error in try/catch to stop filter: Filter some: Jika satu item mengembalikan nilai true, keseluruhannya adalah trueevery: Jika satu item mengembalikan false, maka nilai keseluruhannya adalah falsejoin: buat string dengan menentukan konektor push/pop: push dan pop di akhir, ubah array asli, kembalikan item push/pop unshift/shift: push dan pop di kepala, ubah array asli, kembalikan item operasi sortir (fn) / mundur: Urutkan dan balikkan, ubah rangkaian array asli: Hubungkan array, tanpa mempengaruhi array asli, irisan salinan dangkal (mulai, akhir): Kembalikan array baru terpotong, tanpa mengubah array asli splice(start,number, value...): Mengembalikan array yang terdiri dari elemen yang dihapus, value adalah item yang disisipkan, mengubah array asli indexOf / lastIndexOf(value, fromIndex): menemukan item array dan mengembalikan subskrip yang sesuai pengurangan / penguranganRight(fn(prev, cur), defaultPrev): Dieksekusi berpasangan, prev adalah nilai kembalian dari fungsi terakhir yang disederhanakan, cur adalah nilai saat ini (mulai dari item kedua)18. Salinan JavaScript dalam dan dangkal?
Salinan dangkal Objek.penetapan salinan dalam dapat diselesaikan dengan JSON.parse(JSON.stringify(object))19. Bicara tentang implementasi pemrograman asynchronous?
Keuntungan dari fungsi panggilan balik: sederhana dan mudah dipahami Kekurangan: tidak kondusif untuk pemeliharaan, penggandengan kode tinggi Pemantauan peristiwa Keuntungan: mudah dimengerti, dapat mengikat banyak peristiwa, setiap peristiwa dapat menentukan beberapa fungsi panggilan balik Kekurangan: didorong oleh peristiwa, prosesnya tidak cukup jelas untuk rilis / Langganan (mode pengamat) mirip dengan mendengarkan acara, tetapi Anda dapat menggunakan 'Pusat Pesan' untuk mengetahui berapa banyak penerbit dan pelanggan yang ada sekarang. Keuntungan objek janji: Anda dapat menggunakan metode lalu untuk menulis dalam a rantai; Anda dapat menulis panggilan balik ketika kesalahan terjadi Kekurangan Fungsi: relatif sulit untuk ditulis dan dipahami Keuntungan Fungsi Generator: pertukaran data di dalam dan di luar badan fungsi, mekanisme penanganan kesalahan Kekurangan: manajemen proses yang tidak nyaman keuntungan fungsi asinkron: pelaksana bawaan, semantik yang lebih baik , penerapan yang lebih luas, mengembalikan Apa yang Dijanjikan, struktur yang jelas Kekurangan: mekanisme penanganan kesalahan20. Bicara tentang ide pemrograman berorientasi objek?
Ide dasarnya adalah menggunakan konsep dasar seperti objek, kelas, pewarisan, dan enkapsulasi untuk merancang program. Keuntungannya adalah mudah dipelihara dan diperluas, penggunaan kembali dan pewarisan pekerjaan pengembangan yang tinggi, dan pengurangan beban kerja duplikasi. Siklus pengembangan yang diperpendek21. Optimalisasi kinerja proyek
Kurangi jumlah permintaan HTTP. Kurangi jumlah elemen DOM. Gunakan JavaScript dan CSS eksternal untuk mengompresi JavaScript, CSS, font, gambar, dll. Optimalkan CSS Sprite. Gunakan iconfont untuk distribusi multi-domain. Bagi konten ke dalam nama domain yang berbeda sebanyak mungkin. Kurangi penggunaan iframe, hindari src gambar kosong, letakkan style sheet di link, dan letakkan JavaScript di bagian bawah dari halaman.22. Apa itu single thread dan hubungannya dengan asynchronous?
Thread tunggal: Hanya ada satu thread yang hanya dapat melakukan satu hal. Alasan: Untuk menghindari konflik dalam rendering DOM, browser perlu merender DOMJS. Struktur DOM dapat dimodifikasi. Saat JS dijalankan, rendering DOM browser akan menjeda dua bagian JS dan tidak dapat dijalankan secara bersamaan (keduanya dimodifikasi). DOM konflik) webworker mendukung multi-threading, tetapi tidak dapat mengakses solusi DOM: asynchronous23. Bicara tentang penyeimbangan beban?
Server tunggal bekerja sama untuk mencegah satu atau beberapa server bekerja berlebihan, dan memaksimalkan peran server. Penyeimbangan beban pengalihan http: penjadwal memilih server sesuai dengan kebijakan untuk merespons permintaan dengan 302. Kerugiannya adalah server tersebut hanya berpengaruh pertama kali, dan operasi selanjutnya Pertahankan penyeimbangan beban dns di server ini: Saat menyelesaikan nama domain, akses salah satu dari beberapa server ip (kemampuan pemantauan lemah) Alasan - hindari konflik rendering DOM Penyeimbangan beban proksi terbalik: akses server terpadu, dan server menjadwalkan akses Server sebenarnya memerlukan server terpadu, dan kinerjanya dipengaruhi oleh jumlah grup server.24. Rantai lingkup?
Rantai cakupan dapat dipahami sebagai sekumpulan daftar objek, termasuk objek induk dan variabelnya sendiri, sehingga kita dapat mengakses variabel atau fungsi yang dideklarasikan di induk melalui rantai cakupan25. Apa yang dimaksud dengan prototipe, rantai prototipe, dan pewarisan?
Semua fungsi memiliki atribut prototipe (prototipe). Semua objek memiliki atribut __proto__. Dalam Javascript, setiap fungsi memiliki atribut prototipe yang menunjuk ke prototipenya sendiri, dan objek yang dibuat oleh fungsi ini juga memiliki atribut proto yang menunjuk ke prototipe tersebut. Prototipe, dan prototipe suatu fungsi adalah sebuah objek, jadi objek ini juga akan memiliki proto yang menunjuk ke prototipenya sendiri, dan ini akan masuk lebih dalam lapis demi lapis hingga prototipe dari objek Object tersebut, sehingga membentuk rantai prototipe.26. Bagaimana mekanisme pengumpulan sampah JS? 1. Ikhtisar
Mekanisme pengumpulan sampah js adalah untuk mencegah kebocoran memori (sebagian memori yang tidak diperlukan masih ada). Mekanisme pengumpulan sampah terus mencari variabel-variabel yang tidak lagi digunakan dan melepaskan memori yang ditunjuknya. Di JS, lingkungan eksekusi JS bertanggung jawab untuk mengelola memori yang digunakan selama eksekusi kode.
2. Siklus hidup variabel
Ketika siklus hidup suatu variabel berakhir, memori yang ditunjuknya akan dilepaskan. JS memiliki dua jenis variabel, variabel lokal dan variabel global. Variabel lokal mempunyai efek pada fungsinya saat ini. Ketika fungsinya berakhir, memori variabel akan dilepaskan. Variabel global akan tetap ada hingga browser ditutup.
3. Ada dua metode pengumpulan sampah js: pembersihan tanda dan penghitungan referensi.
Tandai sapuan: Sebagian besar browser menggunakan pengumpulan sampah semacam ini. Ketika suatu variabel memasuki lingkungan eksekusi (mendeklarasikan variabel), pengumpul sampah menandai variabel tersebut. Ketika variabel tersebut meninggalkan lingkungan, variabel tersebut ditandai lagi, dan kemudian dihapus.
Penghitungan referensi: Metode ini sering menyebabkan kebocoran memori, terutama pada browser versi rendah. Mekanismenya adalah melacak jumlah referensi ke nilai tertentu. Ketika suatu variabel dideklarasikan dan tipe referensi ditetapkan ke variabel tersebut, jumlah referensi bertambah sebesar 1. Ketika variabel menunjuk ke variabel lain, jumlah referensinya. dikurangi 1. Jika nilainya 0, mekanisme daur ulang dimulai.
27. Peningkatan progresif dan degradasi yang anggun
Peningkatan progresif membuat halaman untuk browser versi rendah untuk memastikan fungsi paling dasar, dan kemudian meningkatkan efek, interaksi, dan menambahkan fungsi tambahan untuk browser versi tinggi untuk mencapai pengalaman pengguna yang lebih baik. Penurunan versi secara perlahan: bangun fungsionalitas lengkap dari awal, lalu buat agar kompatibel dengan browser versi lebih rendahpertanyaan wawancara vue
1. Keuntungan dari vue
Ringan, cepat, mudah dipelajari, kopling rendah, dapat digunakan kembali, pengembangan mandiriDokumentasinya lengkap dan dokumentasinya dalam bahasa Mandarin
2. Komponen induk Vue meneruskan data ke komponen anak
alat peraga3. Komponen anak meneruskan kejadian ke komponen induk
$memancarkan4. Poin umum dan perbedaan antara instruksi v-show dan v-if
Poin serupa: keduanya dapat mengontrol tampilan dan penyembunyian elemen DOM.
Bedanya: v-show hanya mengubah atribut display, elemen dom tidak hilang, dan tidak perlu merender ulang halaman saat berpindah.
v-if secara langsung menghapus elemen dom dari halaman. Peralihan lagi memerlukan rendering ulang halaman.
5. Cara membuat CSS hanya berfungsi di komponen saat ini
tercakup6. Apa fungsi dari <keep-alive></keep-alive>
Terutama digunakan untuk menyimpan komponen dalam cache yang perlu sering dialihkan tanpa merender ulang halaman.7. Cara mendapatkan dom
Tambahkan ref='refname' ke elemen dom, lalu dapatkan elemen dom melalui this.$refs.refname
8. Sebutkan beberapa instruksi di Vue dan penggunaannya
v-model
v-on
v-html
v-teks
v-sekali
v-jika
v-pertunjukan
9. Apa itu vue-loader? Untuk apa ini digunakan?
Loader untuk file vue yang mengubah template/js/style menjadi modul js
Tujuan: js dapat menulis es6 dan gaya gaya
10. Mengapa menggunakan kunci
Tambahkan kunci sebagai pengidentifikasi unik untuk setiap elemen DOM. Algoritme diff dapat mengidentifikasi node ini dengan benar dan membuat halaman dirender lebih cepat.11. aksio dan instalasi?
Plug-in axios diperlukan saat menggunakan ajax di proyek vue
Unduh metode cnpm install axios --save
12. Penggunaan model-v
v-model digunakan untuk pengikatan formulir dua arah dan dapat mengubah data secara real time.13. Tolong beri tahu saya penggunaan setiap folder dan file di direktori src di proyek vue.cli.
komponen menyimpan komponen
pintu masuk halaman utama app.vue
entri file utama index.js
pantat menyimpan file sumber daya statis
14. Jelaskan secara singkat masing-masing skenario penggunaan komputasi dan jam tangan.
Untuk menggunakan kalimat dari situs resminya, segala sesuatu yang perlu dihitung harus menggunakan properti terhitung. Ketika beberapa bagian data memengaruhi satu bagian data, gunakan properti terhitung dan gunakan adegan keranjang belanja.
Jika perubahan data memengaruhi beberapa bagian data, gunakan jam tangan dan gunakan kotak pencarian adegan.
15. Bisakah v-on memonitor beberapa metode?
Ya, misalnya v-on="onclick,onbure"16. Penggunaan $nextTick
Setelah modifikasi pada data(), data yang dimodifikasi tidak dapat diperoleh di halaman. Saat menggunakan $nextTick, ketika data dalam data diubah, halaman dapat dirender secara real time.17. Mengapa data pada komponen Vue harus berupa fungsi?
Karena karakteristik JavaScript, dalam komponen data harus ada dalam bentuk fungsi dan tidak boleh berupa objek.
Data dalam komponen ditulis sebagai fungsi, dan data tersebut didefinisikan dalam bentuk nilai pengembalian fungsi, sehingga setiap kali komponen digunakan kembali, data baru akan dikembalikan, yang setara dengan setiap instance komponen yang memiliki komponennya sendiri. ruang data pribadi, dan nilainya Bertanggung jawab untuk memelihara data secara individual tanpa menimbulkan kebingungan. Jika hanya ditulis dalam bentuk objek, semua instance komponen berbagi data yang sama, jadi jika ada yang diubah, semua akan diubah.
18. Pemahaman tentang kerangka progresif
Paling tidak menganjurkan
Level yang berbeda dapat dipilih sesuai dengan kebutuhan yang berbeda
19. Bagaimana Vue mengimplementasikan pengikatan data dua arah?
Pengikatan data dua arah Vue diterapkan melalui pembajakan data, kombinasi, dan mode terbitkan-berlangganan. Artinya, data dan tampilan disinkronkan. Saat data berubah, tampilan pun berubah .
Inti: Mengenai pengikatan data dua arah vue, intinya adalah metode Object.defineProperty()
20. Perbedaan dan kekurangan antara aplikasi satu halaman dan aplikasi multi halaman
Aplikasi satu halaman (SPA), dalam istilah awam, mengacu pada aplikasi dengan hanya satu halaman utama. Browser memuat semua js, html, dan css dari awal. Semua konten halaman terdapat di halaman utama ini. Namun saat menulis, masih ditulis secara terpisah, dan kemudian saat dilindungi, program perutean dimuat secara dinamis, lompatan satu halaman, dan hanya sumber daya lokal yang disegarkan. Kebanyakan digunakan di PC.
Multi-halaman (MPA) berarti ada beberapa halaman dalam suatu aplikasi, dan seluruh halaman disegarkan saat halaman tersebut melompat.
Keuntungan dari satu halaman: pengalaman pengguna baik dan cepat, dan perubahan konten tidak memerlukan memuat ulang seluruh halaman. Berdasarkan ini, spa memberikan lebih sedikit tekanan pada server; bagian depan dan belakang dipisahkan, dan efek halaman akan menjadi lebih keren.
Kekurangan satu halaman: tidak kondusif untuk SEO; navigasi tidak tersedia. Jika Anda harus bernavigasi, Anda perlu menyadari maju dan mundur sendiri. Dibutuhkan banyak waktu untuk memuat untuk pertama kalinya; kompleksitas halaman meningkat pesat.
21. Mengapa perlu menulis key pada komponen list di proyek Vue, dan apa fungsinya? Kuncinya adalah ID unik yang diberikan pada setiap vnode. Anda dapat mengandalkan kunci tersebut untuk mendapatkan node vnode yang sesuai di oldVnode dengan lebih akurat dan cepat.
Ini lebih akurat karena dengan kunci, tidak ada penggunaan kembali di tempat. Dalam perbandingan fungsi sameNode a.key === b.key, penggunaan kembali di tempat dapat dihindari. Jadi akan lebih akurat. Lebih cepat menggunakan keunikan kunci untuk menghasilkan objek peta guna mendapatkan node yang sesuai, yang lebih cepat daripada metode traversal.22. Bagaimana urutan eksekusi kait siklus hidup komponen induk dan komponen anak?
Memuat proses renderinginduk sebelumBuat -> induk dibuat -> induk sebelumMount -> anak sebelumBuat -> anak dibuat -> anak sebelumMount -> dipasang pada anak -> dipasang pada induk
Proses pembaruan subkomponenInduk sebelum Pembaruan -> Anak sebelum Pembaruan -> Anak diperbarui -> Induk diperbarui
Proses pembaruan komponen indukinduk sebelum Pembaruan -> induk diperbarui
proses penghancuraninduk sebelum Hancurkan -> anak sebelum Hancurkan -> anak dimusnahkan -> induk dimusnahkan
23. Ceritakan tentang pemahaman Anda tentang nextTick? Saat Anda mengubah nilai data dan kemudian segera mendapatkan nilai elemen dom, Anda tidak bisa mendapatkan nilai yang diperbarui sebelum berhasil mendapatkannya. .
24. Mengapa data pada komponen vue harus berupa fungsi? Karena karakteristik JavaScript, dalam komponen data harus ada dalam bentuk fungsi dan tidak boleh berupa objek. Data dalam komponen ditulis sebagai fungsi, dan data tersebut didefinisikan dalam bentuk nilai pengembalian fungsi, sehingga setiap kali komponen digunakan kembali, data baru akan dikembalikan, yang setara dengan setiap instance komponen yang memiliki komponennya sendiri. ruang data pribadi. Mereka hanya Bertanggung jawab untuk menjaga data mereka sendiri tanpa menimbulkan kebingungan. Jika hanya ditulis dalam bentuk objek, semua instance komponen berbagi data yang sama, jadi mengubah salah satu instance akan mengubah semuanya.
25. Perbedaan antara vue dan jQuery. jQuery menggunakan pemilih ($) untuk memilih objek DOM dan melakukan operasi seperti penugasan, perolehan nilai, pengikatan peristiwa, dll. Faktanya, satu-satunya perbedaan dari HTML asli adalah bahwa ia dapat lebih nyaman memilih dan mengoperasikan DOM, sementara data dan antarmuka berjalan bersamaan. Misalnya, jika Anda perlu mendapatkan konten dari tag label: $("lable").val();, itu masih bergantung pada nilai elemen DOM. Vue sepenuhnya memisahkan data dan View melalui objek Vue. Untuk mengoperasikan data, Anda tidak perlu lagi mereferensikan objek DOM yang bersangkutan. Dapat dikatakan bahwa data dan View dipisahkan satu sama lain melalui objek Vue, yaitu vm. Ini adalah MVVM yang legendaris.
26. Perbedaan antara delete dan Vue.delete dalam menghapus sebuah array, Delete hanya mengubah elemen yang dihapus menjadi kosong/tidak terdefinisi. Nilai kunci dari elemen lainnya tetap tidak berubah. Vue.delete secara langsung menghapus array dan mengubah nilai kunci dari array.
27. Cara mengatasi pemuatan lambat pada layar pertama SPA dengan menginstal plug-in yang diperlukan untuk pemuatan lambat dinamis menggunakan sumber daya CDN;
28. Apakah proyek Vue mengemas satu file js, satu file css, atau beberapa file? Menurut spesifikasi scaffolding vue-cli, satu file js dan satu file CSS.
29. Metode untuk memicu pembaruan tampilan ketika vue memperbarui array push(); pop(); unshift();
30. Apa yang dimaksud dengan siklus hidup vue? Apa fungsinya? Setiap instance Vue harus melalui serangkaian proses inisialisasi saat dibuat - misalnya, perlu menyiapkan pemantauan data, mengkompilasi template, memasang instance ke DOM, dan memperbarui DOM saat data berubah, dll. Pada saat yang sama, beberapa fungsi yang disebut life cycle hooks juga akan dijalankan selama proses ini, yang memberikan pengguna kesempatan untuk menambahkan kode mereka sendiri pada tahapan yang berbeda.
31. Kait mana yang akan terpicu saat halaman dimuat untuk pertama kalinya? sebelumBuat, dibuat, sebelumDipasang, dipasang
32. Vue umumnya memperoleh data di mana fungsi periode dibuat sebelum Mount dipasang
33. Perbedaan antara Created dan Mounted: Created: dipanggil sebelum template dirender ke dalam html, yaitu nilai atribut tertentu biasanya diinisialisasi dan kemudian dirender menjadi tampilan. mount: Dipanggil setelah template dirender ke dalam HTML, biasanya setelah halaman inisialisasi selesai, dan kemudian melakukan beberapa operasi yang diperlukan pada node DOM HTML.
34. Pemahaman siklus hidup Vue dibagi menjadi 8 tahapan: sebelum/sesudah pembuatan, sebelum/sesudah pemuatan, sebelum/sesudah pembaruan, dan sebelum/sesudah pemusnahan. Sebelum/sesudah pembuatan: Pada tahap beforeCreated, elemen pemasangan $el dan data objek data dari instance vue belum terdefinisi dan belum diinisialisasi. Pada fase pembuatan, data objek data dari instance vue tersedia, namun $el tidak. Sebelum/sesudah pemuatan: Pada tahap beforeMount, $el dan data dari instance vue diinisialisasi, namun node dom virtual sebelumnya masih di-mount, dan data.message belum diganti. Pada fase mount, instance vue sudah di-mount dan data.message berhasil dirender. Sebelum/sesudah pembaruan: Saat data berubah, metode sebelumPembaruan dan pembaruan akan dipicu. Sebelum/sesudah pemusnahan: Setelah menjalankan metode pemusnahan, perubahan pada data tidak akan lagi memicu fungsi periodik, yang menunjukkan bahwa instance Vue telah merilis pemantauan peristiwa dan pengikatan ke DOM, namun struktur DOM masih ada.
35. Apa itu vuex? Manajemen negara dalam kerangka vue.
36. Apa sajakah atribut vuex? Ada lima tipe, State, Getter, Mutation, Action, Module state: data dasar (lokasi penyimpanan sumber data) getter: mutasi data yang berasal dari data dasar: metode untuk mengirimkan data yang diubah, sinkronisasi! tindakan: Seperti dekorator, membungkus mutasi agar tidak sinkron. modul: Modular Vuex
37. keranjang keluarga vue vue-cli, vuex, vueRouter, Axios
38. Perintah npm apa yang biasa digunakan dalam proyek vue-cli?
npm install adalah perintah untuk mengunduh paket sumber daya node_modules. npm run dev adalah perintah npm untuk memulai lingkungan pengembangan vue-cli. npm run build vue-cli adalah perintah npm untuk menghasilkan sumber daya penerapan lingkungan produksi. laporan digunakan untuk melihat file sumber daya penerapan lingkungan produksi vue-cli39. Tolong beri tahu saya tujuan setiap folder dan file di proyek vue-cli?
Folder build menyimpan beberapa konfigurasi awal webpack. Folder config menyimpan beberapa konfigurasi inisialisasi proyek. node_modules adalah modul tempat proyek bergantung dimuat oleh npm. Direktori src adalah direktori yang ingin kita kembangkan: aset digunakan untuk menempatkan komponen gambar .vue adalah file entri proyek main.js dari file inti proyek40. Apa perbedaan antara v-if dan v-show?
Kesamaan mereka: Semuanya menampilkan elemen DOM secara dinamis. Perbedaan: v-if secara dinamis menambah atau menghapus elemen DOM ke dalam pohon DOM. v-show mengontrol tampilan dan penyembunyian dengan mengatur atribut gaya tampilan elemen DOM. jika switch memiliki proses kompilasi/pencopotan sebagian, hancurkan dan bangun kembali event pendengar dan subkomponen internal dengan benar selama proses peralihan v-show hanyalah konsumsi kinerja peralihan sederhana berdasarkan css v-if memiliki biaya peralihan yang lebih tinggi yang dimiliki v-show. biaya rendering awal yang lebih tinggi. Skenario v-if cocok untuk kondisi pengoperasian yang tidak mungkin berubah v-show cocok untuk peralihan yang sering41. Apa prioritas dari v-for dan v-if? Ketika v-for dan v-if digunakan secara bersamaan, maka keduanya mempunyai prioritas untuk dijalankan satu demi satu. if, yang berarti v-for memiliki prioritas lebih tinggi daripada v-if. Penilaian v-if dipanggil setiap kali dalam setiap penugasan loop, jadi tidak disarankan untuk menggunakan v-if dan v-for secara bersamaan. dalam label yang sama.
42. Pengubah yang umum digunakan di Vue?
.stop mencegah peristiwa untuk terus menyebar.mencegah perilaku default tag.capture menggunakan mode penangkapan peristiwa, yaitu peristiwa yang dipicu oleh elemen itu sendiri diproses di sini terlebih dahulu, dan kemudian diserahkan ke elemen internal untuk diproses.hanya sendiri ketika event.target adalah elemen saat ini Fungsi handler dipicu ketika event itu sendiri. Once hanya akan dipicu satu kali. Pasif memberitahu browser bahwa Anda tidak ingin mencegah perilaku default dari event tersebut.Pengubah untuk v-model
.lazy menggunakan pengubah ini untuk melakukan sinkronisasi lagi dalam acara perubahan. nomor secara otomatis mengubah nilai input pengguna menjadi tipe numerik. trim secara otomatis memfilter spasi tambahan yang dimasukkan oleh pengguna.Pengubah acara keyboard
.enter.tab.delete (menangkap tombol "delete" dan "backspace").esc.space.up.down.left.rightpengubah sistem
.ctrl.alt.shift.metaPengubah tombol mouse
.kiri.kanan.tengah43. Bagaimana cara menggunakan objek acara di acara vue?
Dapatkan objek acara dan teruskan $event sebagai parameter metode. Perhatikan bahwa simbol $ digunakan dalam <button @click="Event($event)">objek Event</button> acara44. Apa saja metode transfer nilai komponen?
Lulus dari orangtua ke anak: Komponen anak menerima nilai atribut xx yang diteruskan oleh komponen induk melalui props['xx'] Lulus dari anak ke orangtua: Komponen anak meneruskannya melalui this.$emit('fnName',value) , dan komponen induk menerima event fnName Cara lain untuk menerima callback: dengan membuat bus dan meneruskan nilai menggunakan Vuex45. Bagaimana cara komponen anak memanggil komponen induk di Vue?
Panggil langsung metode komponen induk melalui this.$parent.event di komponen anak. Gunakan $emit() di komponen anak untuk memicu peristiwa ke komponen induk, dan komponen induk dapat mendengarkan peristiwa ini. Komponen induk meneruskan metode ke komponen anak, dan metode tersebut dipanggil langsung di komponen anak.46. Bagaimana cara membuat CSS hanya berfungsi di komponen saat ini? Tambahkan cakupan di depan gaya dalam komponen
47. Bagaimana cara mendapatkan dom?ref="domName" Penggunaan: this.$refs.domName
48. lompatan perutean vue
(1) Tautan router navigasi deklaratif
Tanpa parameter: // Catatan: Jika link di router-link dimulai dengan '/', maka dimulai dari rute root. Jika tidak dimulai dengan '/', maka dimulai dari rute saat ini. <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //Nama dan jalur dapat diterima dengan parameter:< router-link :to="{name:'home', params: {id:1}}"><router-link :to="{name:'home', query: {id:1} }"> < router-link :to="/home/:id"> //Transfer objek<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}} "></ tautan router>(2) ini.$router.push()
Tanpa parameter: parameter kueri this.$router.push('/home')this.$router.push({name:'home'})this.$router.push({path:'/home'}) 1. Konfigurasi perutean: nama: 'home', jalur: '/home' 2. Lompat: this.$router.push({name:'home',query: {id:'1'}})this.$ router.push ({path:'/home',query: {id:'1'}})3. Dapatkan parameter parameter html: $route.query.idscript parameter: this.$route.query.idparams parameter 1. Konfigurasi perutean: nama : 'home', path: '/home/:id' (atau path: '/home:id') 2. Lompat: this.$router.push({name:'home', params: {id:'1 '}}) Catatan: // Anda hanya dapat menggunakan nama untuk mencocokkan rute dan tidak dapat menggunakan jalur // params untuk meneruskan parameter (mirip dengan posting) Jalur konfigurasi perutean: "/home/:id" atau jalur: "/home :id " jika tidak, parameter refresh akan hilang 3. Dapatkan parameter parameter html: $route.params.id parameter skrip: this.$route.params.id Lewatkan parameter secara langsung melalui jalur 1. Konfigurasi rute: nama: 'home', path : '/home/:id' 2. Lompat: this.$router.push({path:'/home/123'}) atau: this.$router.push('/home/123') 3. Dapatkan Parameter: Perbedaan antara this.$route.params.idparams dan query.Query mirip dengan get. Setelah lompatan, URL halaman akan disambung dengan parameter, mirip dengan ?id=1. Yang tidak penting bisa lewat seperti ini, password dan sejenisnya masih menggunakan params, dan ID akan tetap ada saat halaman di-refresh. Params mirip dengan post. Parameter tidak akan disambung setelah URL halaman setelah lompatan.(3) ini.$router.replace()
Cara penggunaannya sama seperti di atas(4) ini.$router.go(n)
Lompat n halaman ke depan atau ke belakang, n dapat berupa bilangan bulat positif atau negatifperbedaannya:
this.$router.push melompat ke jalur url yang ditentukan dan menambahkan catatan di tumpukan riwayat. Mengklik kembali akan kembali ke halaman sebelumnya this.$router.replace melompat ke jalur url yang ditentukan, tetapi tidak akan ada catatan di jalur tersebut. tumpukan riwayat. Rekam, klik Kembali untuk melompat ke halaman sebelumnya (yaitu, langsung mengganti halaman saat ini) ini.$router.go(n) Lompat maju atau mundur n halaman, n dapat berupa bilangan bulat positif atau bilangan bulat negatif49. Prinsip pengikatan dua arah Vue.js. Vue.js 2.0 menggunakan pembajakan data (mode Proxy) dikombinasikan dengan mode penerbit-pelanggan (mode PubSub) untuk membajak setter dan pengambil setiap properti melalui Object.defineProperty(). Publikasikan pesan ke pelanggan ketika data berubah dan picu panggilan balik mendengarkan yang sesuai.
Setiap instance komponen memiliki instance program pengamat yang sesuai, yang mencatat properti sebagai dependensi selama rendering komponen. Nanti, saat penyetel dependensi dipanggil, pengamat akan diberitahu untuk menghitung ulang, menyebabkan komponen terkaitnya diperbarui.
Vue.js 3.0, meninggalkan Object.defineProperty dan menggunakan Proxy asli ES6 yang lebih cepat (interseptor objek akses, juga disebut proxy)
50. Perbedaan antara Computed dan Watch
Atribut yang Dihitung: Tergantung pada nilai atribut lainnya, dan nilai yang dihitung di -cache.
Watch Listener: Ini lebih merupakan fungsi pengamatan, tanpa caching, mirip dengan panggilan balik pemantauan data tertentu.
Skenario aplikasi:
Ketika kita perlu melakukan perhitungan numerik dan mengandalkan data lain, dihitung harus digunakan, karena fitur cache yang dihitung dapat digunakan untuk menghindari penghitungan ulang setiap kali nilainya diperoleh. Tonton harus digunakan ketika kita perlu melakukan operasi asinkron atau mahal saat berubah data. Hasil akhir. Ini adalah hal -hal yang tidak dapat dilakukan oleh properti yang dihitung. Jika beberapa faktor mempengaruhi satu tampilan, gunakan dihitung; jika perubahan dalam satu faktor mempengaruhi beberapa faktor dan tampilan lain, gunakan arloji;Perbedaan antara dihitung dan metode
Komputasi: Properti yang dihitung di-cache berdasarkan ketergantungannya dan hanya akan dievaluasi kembali ketika ketergantungan terkait mereka berubah.51. Filter
Gunakan filter dalam vue untuk memfilter (format) filter. Tampilan.52. Axios adalah perpustakaan HTTP yang mudah digunakan, ringkas dan efisien.
53. Apa itu Sass? Bagaimana cara menginstal dan menggunakannya di vue? Sass adalah bahasa CSS yang dikompilasi.
Gunakan NPM untuk menginstal loader (sass-loader, css-loader, dll. Loader). Konfigurasikan loader sass di webpack.config.js. 54. Halaman Vue.js flash vue.js menyediakan arahan V-cloak, yang tetap pada elemen sampai instance yang terkait mengakhiri kompilasi. Saat digunakan dengan CSS, arahan ini menyembunyikan tag tanpa kompilasi sampai instance dikompilasi. Penggunaannya adalah sebagai berikut. [v-cloak] {display: none;55. Cara memecahkan masalah struktur hierarki data yang terlalu dalam. Anda dapat menggunakan VM. $ Set secara manual menentukan lapisan data: VM. $ Set ("Demo", ABCD)
56. Vue Instruksi Umum
V-model sebagian besar digunakan untuk elemen formulir untuk mengimplementasikan pengikatan data dua arah (sama seperti NG-Model dalam Angular) V-BIND Dynamic Binding Function: Ubah data secara tepat waktu pada halaman V-On: Klik mengikat fungsi ke label , yang dapat disingkat sebagai @, misalnya, untuk mengikat fungsi klik, fungsi harus ditulis dalam metode v-for format: v-for = "nama lapangan di (dari) array json" loop array atau json (sama seperti NG-REPEAT DALAM SANGULAR) Konten tampilan V-Show (Sama seperti NG-show di sudut) V-hide hide content (Sama seperti NG-hide in angular) V-IF Tampilkan dan Sembunyikan (penghapusan dan penambahan elemen DOM adalah sama Sebagai NG-IF dalam sudut, nilai defaultnya salah) V- lain-jika harus digunakan bersama dengan V-if v-else harus digunakan bersama dengan V-if dan tidak dapat digunakan sendiri, jika tidak kesalahan akan terjadi Templat yang dilaporkan Kesalahan Kompilasi V Teks Teks Teks Parse V-HTML Parse HTML Tag V-Bind: Kelas Tiga Metode Pengikatan Jenis Objek '{Red: Isred}' Tynary Type'isred? "Red": "Blue" 'Type Array' [{{ Merah: "Isred"}, {biru: "isBlue"}] 'V-Once hanya membuat sekali saat memasukkan halaman tidak lagi membuat V-cloak untuk mencegah kelap-injak V-Pre output elemen di dalam tag di tempatnya57. Perbedaan antara $ rute dan $ router
$ Route adalah "objek informasi perutean", termasuk jalur, params, hash, kueri, fullpath, kecocokan, nama, dan parameter informasi perutean lainnya. $ router adalah objek "instance perutean" termasuk metode lompatan perutean, fungsi kait, dll.58. Cara Memahami Aliran Data Tunggal Vue
Data selalu diteruskan dari komponen induk ke komponen anak. Ini akan mencegah komponen anak dari secara tidak sengaja mengubah keadaan komponen induk, menyebabkan aliran data aplikasi Anda sulit dipahami. CATATAN: Langsung menggunakan V-model untuk mengikat alat peraga yang ditularkan dari komponen induk ke komponen anak adalah cara penulisan yang tidak teratur, dan lingkungan pengembangan akan melaporkan peringatan. Jika Anda benar -benar ingin mengubah nilai props dari komponen induk, Anda dapat mendefinisikan variabel dalam data, inisialisasi dengan nilai prop, dan kemudian gunakan $ emit untuk memberi tahu komponen induk untuk memodifikasinya.59. Apa itu Dom Virtual? Apa pro dan kontranya? Karena memanipulasi DOM di browser itu mahal. Operasi yang sering pada DOM akan menyebabkan masalah kinerja tertentu. Ini adalah alasan penciptaan DOM virtual. DOM virtual VUE2 menggambar pada implementasi pustaka open source snabbdom. Inti dari DOM virtual adalah menggunakan objek JS asli untuk menggambarkan simpul DOM, yang merupakan lapisan abstraksi dari DOM nyata.
Keuntungan: 1. Kinerja yang Dijamin Batas Bawah: DOM virtual dari kerangka kerja perlu beradaptasi dengan operasi apa pun yang dapat dihasilkan oleh API lapis atas. ; tetapi dibandingkan dengan Kinerja Operasi DOM DOM jauh lebih baik, sehingga DOM virtual dari kerangka kerja setidaknya dapat menjamin bahwa ia masih dapat memberikan kinerja yang baik tanpa optimasi manual, yang tidak hanya menjamin batas kinerja yang lebih rendah. 2. Tidak perlu mengoperasikan DOM secara manual: Kami tidak perlu mengoperasikan DOM secara manual. dengan cara yang dapat diprediksi, yang sangat meningkatkan efisiensi. 3. Cross-Platform: Virtual DOM pada dasarnya adalah objek JavaScript, dan DOM sangat terkait dengan platform. Kerugian: 1. Ketidakmampuan untuk melakukan optimasi pamungkas: Meskipun dom virtual optimasi yang masuk akal cukup untuk memenuhi kebutuhan kinerja sebagian besar aplikasi, dalam beberapa aplikasi dengan persyaratan kinerja yang sangat tinggi, DOM virtual tidak dapat melakukan optimasi utama yang ditargetkan. 2. Saat merender sejumlah besar DOM untuk pertama kalinya, itu akan lebih lambat dari penyisipan innertml karena lapisan ekstra perhitungan DOM.60. Bagaimana menyelesaikan masalah kehilangan data saat halaman Vuex disegarkan?
Data VUEX Kegigihan diperlukan. Disarankan untuk menggunakan plug-in Vuex-Persist, yang merupakan plug-in untuk penyimpanan persisten Vuex. Anda tidak perlu mengakses penyimpanan secara manual, tetapi menyimpan status langsung ke cookie atau storstorage.61. Mengapa Vuex perlu dibagi menjadi modul dan menambahkan ruang nama?
Modul: Karena penggunaan pohon negara tunggal, semua keadaan aplikasi akan terkonsentrasi menjadi objek yang relatif besar. Ketika suatu aplikasi menjadi sangat kompleks, objek menyimpan bisa menjadi sangat kembung. Untuk menyelesaikan masalah di atas, Vuex memungkinkan kita untuk membagi toko menjadi modul. Setiap modul memiliki keadaan sendiri, mutasi, tindakan, pengambil, dan bahkan submodul bersarang.
Namespace: Secara default, tindakan, mutasi, dan getters dalam modul terdaftar di namespace global - ini memungkinkan banyak modul untuk menanggapi mutasi atau tindakan yang sama. Jika Anda ingin modul Anda memiliki tingkat enkapsulasi dan reusability yang lebih tinggi, Anda dapat menjadikannya modul bernama dengan menambahkan namespaced: true. Ketika sebuah modul terdaftar, semua pengambil, tindakan, dan mutasi akan secara otomatis dinamai sesuai dengan jalur yang terdaftar oleh modul.
62. Pola desain apa yang digunakan dalam vue?
1. Mode Pabrik - Lulus dalam parameter untuk membuat instance virtual DOM dan mengembalikan vnode dari tag dasar dan komponen vnode sesuai dengan parameter yang berbeda. 2. Singleton Mode-Seluruh program memiliki satu dan hanya satu contoh. 3. Model Publish-Subscribe. (Mekanisme peristiwa VUE) 4. Pola pengamat. (Prinsip Data Responsif) 5. Mode Dekorator (Penggunaan @Decorator) 6. Mode Strategi.63. Optimalisasi kinerja apa yang telah Anda lakukan untuk Vue? Di sini kami hanya mencantumkan optimasi kinerja untuk VUE.
Jangan membuat hierarki objek terlalu dalam, jika tidak, kinerja akan buruk. Jangan letakkan data yang tidak memerlukan respon dalam data (Anda dapat menggunakan objek.freeze () untuk membekukan data) Kunci saat melintasi, dan kuncinya adalah nilai ID terbaik, dan hindari menggunakan V -jika pada saat yang sama daftar data besar dan optimasi kinerja tabel - daftar virtual/tabel virtual untuk mencegah kebocoran internal, menghancurkan variabel global dan waktu setelah penghancuran komponen, gambar malas pemuatan malas, malas memuat routing asinkron plug-in pihak ketiga sesuai permintaan penggunaan komponen cache tetap-hidup untuk memuat, anti-shaking dan throttling, rendering sisi server SSR atau pra-rendering64. Prinsip Vue.set Metode: Memodifikasi VUE tidak akan memicu pembaruan tampilan dalam dua kasus.
1. Tambahkan atribut baru ke instance setelah instance dibuat (tambahkan atribut ke objek responsif) 2. Langsung ubah subskrip array untuk memodifikasi nilai array. Prinsip vue.set atau $ set adalah sebagai berikut. Saat menambahkan atribut yang tidak ada ke suatu objek, atribut baru pertama-tama akan dilacak secara responsif dan kemudian pengamat yang dikumpulkan oleh DEP objek OB akan dipicu untuk memperbarui. Array itu sendiri untuk memperbarui array.65. Skenario penggunaan dan prinsip -prinsip komponen fungsional.
1. Komponen fungsional perlu menentukan fungsional: benar saat mendeklarasikan komponen. Fungsi, properti yang dihitung tidak dapat digunakan. direferensikan secara eksternal melalui ref, yang sebenarnya direferensikan htmlelement6. $ attrs dan dipasang secara otomatis.Keuntungan: 1. Karena komponen fungsi tidak perlu dipakai, tidak memiliki kewarganegaraan, dan tidak memiliki siklus hidup, kinerja rendering lebih baik daripada komponen biasa.
Skenario Penggunaan:
Komponen tampilan sederhana, yang digunakan sebagai komponen kontainer seperti router-view, adalah komponen fungsional. "Komponen tingkat tinggi" - digunakan untuk menerima komponen sebagai parameter dan mengembalikan komponen yang dibungkus. Kode yang relevan adalah sebagai berikut:
if (isTrue (ctor.options.functional)) {// Mereka yang memiliki atribut fungsional adalah komponen fungsional mengembalikan createFunctionalComponent (ctor, propsdata, data, konteks, anak -anak);} const listeners = data.on; ;66. Mengapa komponen anak tidak dapat memodifikasi prop yang dilewati oleh komponen induk? Semua alat peraga membentuk ikatan ke bawah satu arah antara alat peraga induk dan anak mereka: pembaruan dari prop induk akan mengalir ke bawah ke komponen anak, tetapi tidak sebaliknya. Ini akan mencegah komponen anak dari secara tidak sengaja mengubah keadaan komponen induk, menyebabkan aliran data aplikasi Anda sulit dipahami.
67. Vue Project Creation. Konfigurasi perutean, konfigurasi lingkungan, transfer nilai komponen, dll.
CSS, pertanyaan wawancara html
Apa perbedaan antara HTML dan HTML5?
Ada tiga perbedaan utama:
1. Perbedaan Deklarasi Dokumen
HTML: Bahasa Markup Hypertext, bahasa tipe teks biasa.
HTML5.0: Dokumen tersebut menyatakan bahwa HTML5 mudah ditulis, dirampingkan, dan kondusif untuk membaca dan pengembangan yang cepat oleh pemrogram.
2. Perbedaan dalam semantik struktural
HTML: Tag yang tidak mencerminkan semantik struktural, seperti: <div id = "nav"> </div>
HTML5: Menambahkan banyak tag semantik, seperti: <cart Article>, <sandak>, <diewo>, <bdi> ...
3. Perbedaan menggambar
HTML: Mengacu pada grafik vektor yang dapat diskalakan, grafik berbasis vektor yang digunakan untuk mendefinisikan web.
HTML5: Elemen kanvas HTML5 menggunakan skrip (biasanya menggunakan JavaScript) untuk menggambar gambar di halaman web, dan dapat mengontrol setiap piksel kanvas.
Apa itu model kotak?
Kami akan membagi kotak menjadi beberapa bagian: konten, bantalan, perbatasan, dan margin.Bagaimana cara memahami semantik html5?
Header tag semantik HTML - Judul NAV - Artikel Navigasi - Bagian Artikel - Bagian atau Paragraf Di samping - Footer Sidebar - FooterApa manfaat semantik?
Dengan tidak adanya kode CSS, struktur konten dan struktur kode dapat disajikan dengan baik (sehingga non-teknologi dapat memahami kode) untuk meningkatkan pengalaman pengguna. bermanfaat untuk SEO. SEMANTIONAL DAPAT MENCIPTAKAN KONTON YANG LEBIH BAIK DENGAN PENCARIAN. (Browser) 1. Cookie (1) Digunakan untuk komunikasi antara klien dan server (2) tetapi memiliki fungsi penyimpanan lokal, jadi itu "dipinjam" (3) dokumen. dan memodifikasinya (4) kekurangan cookie untuk penyimpanan ① Kapasitas penyimpanan terlalu kecil, hanya 4kb ② Semua permintaan HTTP dibawa, yang akan mempengaruhi efisiensi akuisisi sumber daya ③ API sederhana dan perlu dienkapsulasi untuk menggunakan dokumen. Cookie 2. LocalStorage, SessionStorage (1) Spesialisasi HTML5 yang dirancang untuk penyimpanan, kapasitas maksimum adalah 5m (2) API sederhana dan mudah digunakan (3) lcoalstorage.setitem (kunci, nilai); localstorage.getItem (key); (4) Dalam mode tersembunyi Safari iOS: LocalStorage.GetItem akan melaporkan kesalahan, saran yang disatukan dari enkapsulasi try-catch 3. SessionStorage digunakan untuk menyimpan data secara lokal dalam suatu sesi. dan data akan dihancurkan saat sesi berakhir. Oleh karena itu sessionStorage bukan penyimpanan lokal persisten, hanya penyimpanan tingkat sesi. LocalStorage digunakan untuk penyimpanan lokal yang persisten. Apa kernel browser umum? ** Kernel Trident: ** berarti bahwa browser adalah IE browser, jadi trident kernel juga disebut kernel E.** inti tokek: ** mewakili browser adalah browser firefox. Kernel tokek adalah open source, dan keuntungan terbesarnya adalah bahwa ia bisa menjadi cross-platform.
WebKit: Kernel WebKit: Perwakilan peramban adalah Safari (Browser Apple) dan versi Google Chrome yang lebih rendah, yang merupakan proyek open source.
** Presto Core: ** mewakili Browser Opera Browser (Cina diterjemahkan sebagai "Browser Terbuka"). . Kernel telah sudah usang.
** Blink Core: ** Dikembangkan oleh Google dan Opera, dirilis pada April 2013, inti chrome saat ini berkedip.
Bicara tentang pemahaman Anda tentang standar web dan W3C?
Standar Web:
Standar web terutama dibagi menjadi tiga bagian: struktur, kinerja dan perilaku.
Struktur: Mengacu pada tag yang biasanya kami tulis di dalam tubuh, yang terutama terdiri dari tag HTML
Kinerja: Mengacu pada gaya tag HTML yang lebih kaya, terutama terdiri dari gaya CSS
Perilaku: Mengacu pada interaksi antara halaman dan pengguna, terutama terdiri dari bagian JS
W3C:
W3C telah mengajukan persyaratan standar untuk standar web, yaitu spesifikasi kode.
persyaratan struktural
1. Huruf label harus menjadi huruf kecil
2. Label harus ditutup
3. Tag tidak diizinkan untuk bersarang secara sewenang -wenang
Persyaratan kinerja dan perilaku
1. Disarankan untuk menggunakan skrip tautan eksternal CSS dan JS untuk mencapai pemisahan struktur dan kinerja, struktur dan perilaku, yang dapat meningkatkan efisiensi rendering halaman dan menampilkan konten web lebih cepat.
Bagaimana cara mengimplementasikan tata letak responsif browser?
Gunakan kueri media (@Media), gunakan tata letak fleksibel, gunakan unit persentase, gunakan unit REM, dan gunakan unit VH dan HW.Memahami pemilih dan prioritas CSS?
Selektor CSS yang umum digunakan
Pemilih ID, Pemilih Kelas, Pemilih Tag, Pemilih Atribut, Pemilih Kelas Sama, Pemilih Keturunan Pemilih
Divisi Berat Badan
Di level yang sama:
! Penting> Gaya Inline> Pemilih ID> Selektor Kelas> (Pemilih Tag, Pemilih Kelas Pseudo, Pemilih Atribut)
Di level yang berbeda:
Biasanya, semakin tinggi nilai berat, semakin tinggi prioritas, tetapi belum ada divisi nilai berat spesifik, sehingga dalam sebagian besar perkembangan saat ini, semakin dalam level, semakin tinggi prioritasnya.
Bicara tentang pemahaman Anda tentang reflow dan menggambar ulang?
Apa itu reflow?
Reflow terjadi ketika lebar, tinggi, tata letak, tampilan atau persembunyian elemen itu sendiri, atau struktur teks di dalam elemen berubah, menyebabkan halaman perlu dibangun kembali.Apa itu mengecat ulang?
Redraw terjadi ketika lebar, tinggi, tata letak, tampilan atau persembunyian elemen itu sendiri tidak berubah, tetapi hanya gaya penampilan elemen yang berubah.
Kapan reflow akan terjadi? Ketika elemen DOM yang terlihat ditambahkan atau dihapus, posisi elemen berubah, ukuran elemen berubah, konten berubah, dan ketika halaman pertama kali diberikan.
Kapan lagi akan dicat ulang?
Daftar beberapa gaya CSS terkait: warna, latar belakang, ukuran latar belakang, visibilitas, shadow kotak
Apa perbedaan antara opacity: 0, visibilitas: tersembunyi, dan tampilan: tidak ada?
Opacity = 0, elemennya tersembunyi, tetapi tata letak halaman tidak akan diubah.
Visibilitas = Tersembunyi, elemen disembunyikan, tetapi tata letak halaman tidak akan diubah, tetapi peristiwa yang terikat pada elemen tidak akan dipicu.
Tampilan = tidak ada yang menyembunyikan elemen dan mengubah tata letak halaman.
Preprocessor CSS
kurangApa perbedaan antara judul dan alt <mmg>?
Biasanya ketika mouse meluncur di atas suatu elemen, ALT ditampilkan. Ini dapat meningkatkan aksesibilitas gambar.Apa elemen inline dan elemen tingkat blok? Elemen apa yang dimiliki IMG?
Alamat - Alamat Blockquote - Pusat Referensi Blok - Pusat Penyelarasan Dir - Daftar Direktori Div - Level blok yang biasa digunakan, Juga label utama tata letak CSS DL - Daftar Definisi Fieldset - Formulir Kelompok Kontrol Bentuk - Formulir Interaktif H1 - Headline H2 - Subtitle H3 - Level 3 Heading H4 - Level 4 Heading H5 - Level 5 Heading H6 - Level 6 Heading HR - Horisontal Separator Line ISIndex - Input Prompt Menu - Daftar Menu NOFRAME - Bingkai Konten Opsional, (Tampilkan ini untuk browser yang tidak mendukung bingkai) Blokir) Konten Noscript - Konten skrip opsional (Konten ini ditampilkan untuk browser yang tidak mendukung skrip) ol - Formulir Pesan P - Paragraf Pre - Tabel Teks yang Diformat - Tabel UL - Daftar Tidak Terurut
A - Anchor Point ABBR - Akronim Singkatan - Huruf pertama B - Bold (tidak disarankan) BDO - BIDI OVERRIDE BESAR - FONT BESAR BR - Break Break CITE - Kode Referensi - Kode Komputer (Diperlukan Saat Mengutip Kode Sumber) DFN - Tentukan Bidang EM - Penekanan pada pengaturan font - font (tidak disarankan) i - IMG Italic - Input Gambar - Input Kotak KBD - Tentukan Label Teks Keyboard - Label Tabel Q - Kutipan Pendek S - Garis Besar (Tidak Disarankan) Sampel - Tentukan Kode Komputer Sampel - Pemilihan Item Pilihan Item Rentang Teks Font Kecil-Kecil-Wadah Inline yang biasa digunakan, mendefinisikan blok dalam pemogokan Teks-Garis bawahi yang kuat-penekanan tebal sub-SUP Subscript-Superscript TextArea-Kotak Input Teks Multi-Line TT-Teks Teletype U-Underscore
IMG adalah elemen pengganti inline dan memiliki efek yang sama dengan elemen blok
Perbedaan antara readitly dan dinonaktifkan dalam formulir
Poin Umum: Ini mencegah pengguna mengubah konten dalam formulir. Tidak dapat dimodifikasi. Kotak teks yang diatur ke dinonaktifkan tidak bisa mendapatkan fokus 3. Jika bidang formulir dinonaktifkan, bidang tidak akan dikirim (nilai yang diteruskan dalam formulir) dan diserialisasi1. Masukkan URL di browser dan tampilkan di halaman web.
Resolusi Domain memulai jabat tangan tiga arah TCP untuk membuat koneksi TCP. meminta sumber daya dalam kode HTML.
2. Kekurangan Cookie
Ada batasan maksimum cookie yang dihasilkan di bawah setiap nama domain tertentu. , umumnya tidak melebihi 4095 byte.
3. browser dan kernel arus utama
Google Chrome: Webkit/Blink Safari: Webkit IE: Trident Firefox: Gecko Opera: Presto/Webkit/Blink
4. Perbedaan antara sesi dan stor localstorage
SessionStorage digunakan untuk menyimpan data secara lokal dalam suatu sesi. localStorage digunakan untuk penyimpanan lokal persisten. Kecuali jika data dihapus secara aktif, data tidak akan pernah kedaluwarsa.
5. Bicara tentang pemahaman spesifikasi BFC
BFC adalah konteks format blok, yaitu konteks format. Efek BFC adalah untuk memungkinkan elemen di dalam dan di luar BFC untuk berinteraksi satu sama lain.
6. Harap beri nama setidaknya tiga cara untuk mengurangi waktu pemuatan halaman.
Minimalkan permintaan HTTP yang berulang di halaman.
7. Bagaimana cara mengoptimalkan kinerja situs web?
Untuk Konten, Kurangi Permintaan HTTP: Gabungkan File, CSS Sprite, dan Inline Images. Gunakan gzip untuk komponen. Di bagian bawah halaman Peregangan gambar dalam HTML.8. Penyimpanan browser?
Ketika itu sementara, kita hanya perlu menyimpan data dalam memori, dan penyimpanan persisten hanya tersedia saat runtime. dll., Di http secara otomatis dibawa, batas atas ukurannya adalah 4K, Anda dapat mengatur waktu kedaluwarsa sendirian stor localstorage / sessionStorage: penutupan penyimpanan / jendela jangka panjang dan penghapusan, batas ukurannya adalah 4 ~ 5mindexdb server terdistribusi cache redis basis data9. Dapat/posting?
Dapatkan: cache, panjang permintaan terbatas, akan disimpan dalam sejarah, tidak ada efek samping (sumber daya tidak dimodifikasi), idempoten (jumlah permintaan tidak ada hubungannya dengan sumber daya) Posting Skenario: Keamanan, data besar, lebih banyak jenis pengkodean10. Masalah Keselamatan?
Serangan XSS: Menyuntikkan Kode Kode Berbalat Set httponly untuk menghindari konten input dan konten output pada halaman CSRF: Pemalsuan Permintaan Lintas Situs, Perlindungan: Dapatkan tidak memodifikasi data dan tidak diakses oleh situs web pihak ketiga mengatur cookie pengguna ke daftar putih dan tidak diakses oleh verifikasi permintaan permintaan situs web pihak ketigaPengoptimalan kinerja
1. Apa aspek optimasi kinerja?
Kompresi dan penggabungan sumber daya, mengurangi permintaan HTTP, pemuatan kode non-inti asinkron, menggunakan cache browser, dan menggunakan CDN untuk melakukan pra-reseve dns2. Pemuatan asinkron?
Skrip dinamis memuat deferasync3. Apa perbedaan dalam metode pemuatan?
Defer dieksekusi setelah HTML diuraikan.4. Preload?
Selama pengembangan, Anda mungkin menghadapi situasi seperti itu. Beberapa sumber tidak perlu digunakan segera, tetapi Anda ingin mendapatkannya sesegera mungkin. Preloading sebenarnya adalah pengambilan deklaratif, yang memaksa browser untuk meminta sumber daya dan tidak memblokir acara Onload. Preloading dapat mengurangi waktu pemuatan layar pertama sampai batas tertentu, karena beberapa file penting yang tidak mempengaruhi layar pertama dapat ditunda dalam pemuatan.5. Pra-resolusi DNS?
Resolusi DNS juga membutuhkan waktu, dan IP yang sesuai dengan nama domain dapat diperoleh terlebih dahulu melalui pra-resolusi. <meta http-equiv = 'x-dns-prefetch-control' content = 'on'> <link rel = "dns-prefetch" href = "// yuchengkai.cn"> Tag A tidak akan diaktifkan secara default di Protokol HTTPS pra-dibarut, jadi meta perlu diatur secara manual6. Eksekusi malas? Teknologi ini dapat digunakan untuk optimasi layar pertama. Eksekusi malas membutuhkan bangun, yang umumnya dapat dilakukan dengan menelepon pengatur waktu atau acara.
7. Pemuatan malas?
Prinsip pemuatan malas adalah hanya memuat apa yang perlu dimuat di area khusus (biasanya area yang terlihat, tetapi juga bisa menjadi area yang akan memasuki area yang terlihat). Untuk gambar, pertama -tama atur atribut SRC dari tag gambar ke gambar placeholder, masukkan sumber daya gambar asli ke dalam atribut khusus, dan saat memasuki area khusus, ganti atribut khusus dengan atribut SRC, sehingga gambar akan mengunduh sumber daya , menyadari pemuatan malas gambar.
Pemuatan malas dapat digunakan tidak hanya untuk gambar, tetapi juga untuk sumber daya lainnya. Misalnya, video hanya akan mulai diputar setelah memasuki area yang terlihat, dll.
reaksi pertanyaan wawancara
1. Kapan Menggunakan Manajer Negara?
Melihat proyek secara keseluruhan, penggunaan pengguna kompleks. Dari berbagai sumber. Komponen. Komponen memiliki sejumlah besar data yang berubah dari waktu ke waktu.2. Apa karakteristik reaksi?
Ini menggunakan ** virtual dom ** bukan dom nyata. Ini dapat diterjemahkan menggunakan sisi server. Ini mengikuti aliran data satu arah atau pengikatan data3. Daftar beberapa keuntungan utama dari React?
Ini meningkatkan kinerja aplikasi dan dapat dengan mudah digunakan di sisi klien dan server. Bereaksi.4. Apa itu JSX?
JSX kependekan dari JavaScript XML. adalah file yang digunakan oleh React yang memanfaatkan daya ekspresif dan sintaks template seperti HTML dari JavaScript. Ini membuat file HTML sangat mudah dimengerti.此文件能使应用非常可靠，并能够提高其性能例子render() {return(<div><h1> Hello World </h1></div>)}5、说说为什么浏览器无法读取JSX?
浏览器只能处理JavaScript 对象，而不能读取常规JavaScript 对象中的JSX。所以为了使浏览器能够读取JSX，首先，需要用像Babel 这样的JSX 转换器将JSX 文件转换为JavaScript 对象，然后再将其传给浏览器6、你理解“在React 中，一切都是组件”这句话?
组件是React 应用UI 的构建块。这些组件将整个UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响UI 的其余部分7、 React 中render()的目的?
每个React 组件强制要求必须有一个render()。它返回一个React 元素，是原生DOM 组件的表示。如果需要渲染多个HTML 元素，则必须将它们组合在一个封闭标记内，例如<form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果8、什么是Props?
Props 是React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据9、React 中的状态是什么？
状态是React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与Props 不同，它们是可变的，并创建动态和交互式组件。可以通过this.state() 访问它们。10、区分状态和Props?
条件StateProps从父组件中接受初始值YesYes父组件可以改变值NoYes在组件中设置默认值NoYes在组件的内部变化YesNo设置子组件的初始值YesYes在子组件的内部改变NoYes11、如何更新组件的状态?
使用this.setState()更新组件的状态12、React 组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段：初始渲染阶段：这是组件即将开始其生命之旅并进入DOM 的阶段。更新阶段：一旦组件被添加到DOM，它只有在prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段卸载阶段：这是组件生命周期的最后阶段，组件被销毁并从DOM 中删除13、你对React 的refs 有什么了解?
Refs 是React 中引用的简写。它是一个有助于存储对特定的React 元素或组件的引用的属性，它将由组件渲染配置函数返回。用于对render()返回的特定元素或组件的引用。当需要进行DOM 测量或向组件添加方法时，它们会派上用场列出一些应该使用refs 的情况?需要管理焦点、选择文本或媒体播放时触发式动画与第三方DOM 库集成14、如何模块化React 中的代码?
可以使用export 和import 属性来模块化代码。它们有助于在不同的文件中单独编写组件15、什么是高阶组件HOC?
高阶组件是重用组件逻辑的高级方法，是一种源于React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为HOC 是“纯（Pure）”组件16、你能用HOC 做什么?
HOC 可用于许多任务:用代码重用，逻辑和引导抽象渲染劫持状态抽象和控制Props 控制17、 React 中key 的重要性是什么?
key 用于识别唯一的Virtual DOM 元素及其驱动UI 的相应数据。它们通过回收DOM 中当前所有的元素来帮助React 优化渲染。这些key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能18、MVC 框架的主要问题是什么?
key 用对DOM 操作的代价非常高程序运行缓慢且效率低下内存浪费严重由于循环依赖性，组件模型需要围绕models 和views 进行创建19、请你解释一下Flux?
20、你对“单一事实来源”有什么理解
Redux 使用“store” 将程序的整个状态存储在同一个地方。因此所有组件的状态都存储在store 中，并且它们从store 本身接收更新。单一状态树可以更容易地跟踪随时间的变化，并调试或检查程序。21、列出Redux 的组件?
Redux 由以下组件组成:Action 这是一个用来描述发生了什么事情的对象Reducer 这是一个确定状态将如何变化的地方Store 整个程序的状态/对象树保存在Store 中View 查只显示Store 提供的数据22、 Store 在Redux 中的意义是什么?
store 是一个JavaScript 对象，它可以保存程序的状态，并提供一些方法来访问状态、调度操作和注册侦听器。应用程序的整个状态/对象树保存在单一存储中。因此，Redux 非常简单且是可预测的。我们可以将中间件传递到store 来处理数据，并记录改变存储状态的各种操作。所有操作都通过Reducer 返回一个新状态23、 Redux 有哪些优点?
结果的可预测性可维护性服务器端渲染易于测试-24、 什么是React 路由?
React 路由是一个构建在React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。这使URL 与网页上显示的数据保持同步。它负责维护标准化的结构和行为，并用于开发单页Web 应用。 React 路由有一个简单的API。25、说说你对React 的渲染原理的理解?
单向数据流。React 是一个MVVM 框架，简单来说是在MVC 的模式下在前端部分拆分出数据层和视图层。单向数据流指的是只能由数据层的变化去影响视图层的变化，而不能反过来（除非双向绑定）数据驱动视图。我们无需关注页面的DOM，只需要关注数据即可渲染过程，生命周期……setState()大部分时候是异步执行的，提升性能。26、React 中三种构建组件的方式?
React.createClass()、ES6 class 和无状态函数。JQuery
说出jQuery中常见的几种函数以及他们的含义是什么? （1）get()取得所有匹配的DOM元素集合； （2）get(index)取得其中一个匹配的元素.index表示取得第几个匹配的元素； （3）append(content)向每个匹配的元素内部追加内容； （4）after(content)在每个匹配的元素之后插入内容； （5）html()/html(var)取得或设置匹配元素的html内容； （6）find(expr)搜索所有与指定表达式匹配的元素； （7）bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数； （8）empty()删除匹配的元素集合中所有的子节点； （9）hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法； （10）attr(name)取得第一个匹配元素的属性值。
jQuery 能做什么？ Get the elements of the page; modify the appearance of the page; change the large content of the page; respond to the user's page operations; add dynamic effects to the page; get information from the server without refreshing the page; simplify common javascript tasks .
如何将一个HTML元素添加到DOM树中的？ 可以通过appendTo()方法在指定的DOM元素末尾添加一个现存的元素或者一个新的HTML元素。
什么是jQuery? jQuer能做什么？ jQuery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，提供了对常见任务的自动化和复杂任务的简化
jQuery的作用快速获取文档元素提供漂亮的页面动态效果创建Ajax无刷新网页提供对JavaScript语言的增强增强的事件处理更改网页内容JQuery可以修改网页中的内容,比如更改网页的文本、插入或转网页图像, jQuery简化了原本使用JavaScript代码需要处理的方式。JQuery 的优点1.利用css的选择器提供高速的元素查找行为。 2.提供了一个抽象层来标准化各种常见的任务，可以解决各种浏览器的兼容问题。 3.将复杂的代码简化，提供连缀编程模式，大大简化了代码的操作。
以上就是分享一些值得收藏的精选Web前端面试题（附答案）的详细内容，更多请关注本站其它相关文章！