Front End Developer Interview Questions

Front-end Job Interview Questions

File ini berisi sejumlah pertanyaan wawancara kerja yang dapat digunakan saat pemeriksaan calon potensial. Namun Hal ini tidak berarti dianjurkan untuk menggunakan setiap pertanyaan tunggal di sini pada calon yang sama (yang akan memakan waktu beberapa jam). Memilih beberapa item dari daftar ini akan membantu Anda dokter hewan keterampilan dimaksudkan Anda butuhkan.

Catatan: Perlu diingat bahwa banyak dari pertanyaan-pertanyaan ini terbuka dan dapat menyebabkan diskusi menarik yang memberitahu lebih lanjut tentang kemampuan seseorang dari jawaban langsung akan.

Daftar Isi

  1. Pertanyaan dasar
  2. Pertanyaan HTML
  3. Pertanyaan CSS
  4. Pertanyaan JS
  5. jQuery Questions
  6. Pertanyaan Coding
  7. Pertanyaan-seru

Pranala

  1. Original Contributors
  2. Recent Contributors
  3. How to Contribute
  4. License

Pertanyaan Dasar:

  • Apa yang Anda pelajari kemarin / minggu ini?
  • Apa menggairahkan atau kepentingan Anda tentang coding?
  • Apa tantangan teknis baru-baru ini yang Anda alami dan bagaimana Anda mengatasinya?
  • Apa UI, Keamanan, Kinerja, SEO, Maintainability atau Teknologi pertimbangan Anda membuat sambil membangun aplikasi web atau situs?
  • Bicara tentang lingkungan pengembangan pilihan Anda. (OS, Editor atau IDE, Browser, Tools, dll)
  • Yang sistem kontrol versi yang Anda kenal?
  • Dapatkah Anda menjelaskan alur kerja Anda ketika Anda membuat halaman web?
  • Jika Anda memiliki 5 stylesheet yang berbeda, bagaimana Anda terbaik mengintegrasikan mereka ke situs ini?
  • Dapatkah Anda menjelaskan perbedaan antara peningkatan progresif dan degradasi anggun?
  • Bagaimana Anda akan mengoptimalkan sebuah website aset / sumber daya?
  • Secara tradisional, mengapa itu lebih baik untuk melayani aset situs dari beberapa domain?
  • Berapa banyak sumber daya akan download browser dari domain yang diberikan pada suatu waktu?
  • Apa pengecualian?
  • Nama 3 cara untuk mengurangi beban halaman (dirasakan atau waktu buka yang sebenarnya).
  • Jika Anda melompat pada sebuah proyek dan mereka menggunakan tab dan Anda menggunakan ruang, apa yang akan Anda lakukan?
  • Tulis slideshow halaman sederhana
  • Alat apa yang Anda gunakan untuk menguji kinerja kode Anda?
  • Jika Anda bisa menguasai satu teknologi tahun ini, apakah itu?
  • Apa perbedaan antara panjang-Polling, Websockets dan SSE?
  • Jelaskan pentingnya standar dan badan-badan standar.
  • Apa FOUC? Bagaimana Anda menghindari FOUC?
  • Lakukan yang terbaik untuk menggambarkan proses dari saat Anda mengetikkan URL situs web untuk itu menyelesaikan loading pada layar Anda.
  • Jelaskan apa ARIA dan screenreaders, dan bagaimana membuat sebuah website dapat diakses.
  • Jelaskan beberapa pro dan kontra untuk animasi CSS dibandingkan animasi JavaScript
  • Jelaskan permintaan dan respon header berikut:
    • Diff. antara Expires, Date, Age dan If-Modified-...
    • DNT
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options

Pertanyaan HTML:

  • Apa yang doctype lakukan?
  • Apa perbedaan antara modus standar dan modus quirks?
  • Apa keterbatasan ketika melayani halaman XHTML?
  • Apakah ada masalah dengan melayani halaman sebagai aplikasi/xhtml+xml?
  • Bagaimana Anda melayani halaman dengan konten dalam berbagai bahasa?
  • Apa jenis hal yang harus Anda berhati-hati ketika desain atau mengembangkan untuk situs multibahasa?
  • Apa data atribut baik untuk?
  • Pertimbangkan HTML5 sebagai platform web terbuka. Apa blok bangunan HTML5?
  • Jelaskan perbedaan antara cookie, sessionStorage dan localStorage.
  • Dapatkah Anda menjelaskan perbedaan antara GET danPOST?
  • Jelaskan perbedaan antara <script>, <script async> & <script defer>.

Pertanyaan CSS:

  • Apa perbedaan antara CLASS dan ID dalam CSS?
  • Jelaskan apa "reset" CSS berkas dilakukan dan bagaimana hal itu berguna.
  • Jelaskan Mengapung dan bagaimana mereka bekerja.
  • Jelaskan z-index dan bagaimana susun konteks terbentuk.
  • Apa saja berbagai teknik kliring dan yang sesuai untuk konteks apa?
  • Jelaskan sprite CSS, dan bagaimana Anda akan menerapkannya pada halaman atau situs.
  • Apa teknik pengganti gambar favorit Anda dan mana yang Anda gunakan kapan?
  • Hacks properti CSS, kondisional termasuk Css file, atau ... sesuatu yang lain?
  • Bagaimana Anda melayani halaman Anda untuk browser fitur-dibatasi?    * Teknik apa / proses yang Anda gunakan?
  • Apa cara yang berbeda untuk visual menyembunyikan konten (dan membuatnya tersedia hanya untuk pembaca layar)?
  • Apakah Anda pernah menggunakan sistem grid, dan jika demikian, apa yang Anda inginkan?
  • Apakah Anda menggunakan atau menerapkan pertanyaan media atau mobile tertentu layout / CSS?
  • Setiap keakraban dengan styling SVG?
  • Bagaimana Anda mengoptimalkan halaman web Anda untuk cetak?
  • Apa adalah beberapa "gotchas" untuk menulis CSS efisien?
  • Apa keuntungan / kerugian dari menggunakan preprosesor CSS? (Sass, Compass, Stylus, LESS)    * Jika demikian, jelaskan apa yang Anda suka dan tidak suka tentang preprosesor CSS yang telah digunakan.
  • Bagaimana Anda akan menerapkan desain web comp yang menggunakan font non-standar?
  • Jelaskan bagaimana browser menentukan apa elemen cocok dengan pemilih CSS.
  • Jelaskan pemahaman Anda tentang model kotak dan bagaimana Anda akan memberitahu browser di CSS untuk membuat tata letak Anda dalam model kotak yang berbeda.
  • Apa * { box-sizing: border-box; }? Apa keuntungan?
  • Daftar sebagai banyak nilai untuk properti display yang dapat Anda ingat.
  • Apa perbedaan antara inline dan inline-block?
  • Apa perbedaan antara, tetap, unsur mutlak dan statis diposisikan relatif?
  • The 'C' di CSS adalah singkatan dari Cascading. Bagaimana prioritas ditentukan dalam menentukan gaya (beberapa contoh)? Bagaimana Anda bisa menggunakan sistem ini untuk keuntungan Anda?
  • Apa yang ada kerangka kerja CSS telah Anda gunakan secara lokal, atau dalam produksi? (Bootstrap, PureCSS, Foundation dll)
    • Jika demikian, yang mana? Jika Anda bisa, bagaimana Anda akan mengubah / memperbaiki mereka?
  • Apakah Anda bermain-main dengan yang baru CSS Flexbox atau Grid spesifikasi?
  • Bagaimana desain responsif yang berbeda dari desain adaptif?
  • Apakah Anda pernah bekerja dengan grafis retina? Jika demikian, kapan dan teknik apa yang Anda gunakan?

Pertanyaan JS:

  • Jelaskan delegasi acara
  • Jelaskan bagaimana this bekerja dalam JavaScript
  • Jelaskan karya warisan bagaimana prototypal
  • Bagaimana Anda pergi tentang pengujian Anda JavaScript?
  • AMD vs CommonJS?
  • Jelaskan mengapa berikut tidak bekerja sebagai Iife: function foo () {} ();.
    • Apa yang perlu diubah untuk benar menjadikannya sebuah Iife?
  • Apa perbedaan antara variabel yaitu: null,undefined atau undeclared?
    • Bagaimana Anda pergi tentang memeriksa untuk negara-negara ini?
  • Apa penutupan, dan bagaimana / mengapa Anda akan menggunakan satu?
  • Apa kasus penggunaan khas untuk fungsi anonim?
  • Bagaimana Anda mengatur kode Anda? (pola modul, warisan klasik?)
  • Apa perbedaan antara objek tuan rumah dan benda-benda asli?
  • Perbedaan antara: function Person(){}, var person = Person(), dan var person = new Person()?
  • Apa perbedaan antara .call dan.apply?
  • Jelaskan Function.prototype.bind.
  • Bila Anda mengoptimalkan kode Anda?
  • Bila Anda akan menggunakan document.write ()?
  • Apa perbedaan antara fitur deteksi, fitur inferensi, dan menggunakan string UA
  • Jelaskan AJAX dalam sedetail mungkin.
  • Jelaskan bagaimana JSONP bekerja (dan bagaimana itu tidak benar-benar AJAX).
  • Apakah Anda pernah menggunakan JavaScript template?
    • Jika demikian, apa perpustakaan telah Anda gunakan? (Mustache.js, Handlebars dll.)
  • Jelaskan "mengangkat".
  • Jelaskan acara menggelegak.
  • Apa perbedaan antara "atribut" dan "properti"?
  • Mengapa memperluas dibangun dalam JavaScript benda bukan ide yang baik?
  • Perbedaan antara acara buka dokumen dan dokumen event siap?
  • Apa perbedaan antara == dan ===?
  • Jelaskan kebijakan yang sama-asal berkaitan dengan JavaScript.
  • Membuat pekerjaan ini:
javascriptCopy to clipboard
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
  • Mengapa disebut ekspresi Ternary, apa kata "Ternary" menunjukkan?
  • Apa "use strict";? apa keuntungan dan kerugian untuk menggunakannya?
  • Buat untuk loop yang iterates sampai 100 sementara keluaran " desis " di kelipatan 3, "buzz" pada kelipatan 5 dan " fizzbuzz " di kelipatan 3 dan 5
  • Mengapa, secara umum, ide yang baik untuk meninggalkan lingkup global dari sebuah situs web seperti apa dan tidak pernah menyentuhnya?

Pertanyaan Jquery:

  • Jelaskan "chaining".
  • Jelaskan "deferreds".
  • Apa sajakah optimasi tertentu jQuery Anda dapat menerapkan?
  • Apa iru .end() ?
  • Nama 4 nilai yang berbeda Anda dapat lulus dengan metode jQuery.
  • Selector (string), HTML (string), Callback (function), HTML element, object, array, element array, jQuery Object, dll
  • Apa perbedaan antara .get(), [], dan .eq()?

Pertanyaan Coding:

  • Pertanyaan: Bagaimana Anda akan membuat pekerjaan ini *
javascriptCopy to clipboard
add(2, 5); // 7
add(2) (5); // 7
  • Pertanyaan: Apa nilai dikembalikan dari pernyataan berikut *?
javascriptCopy to clipboard
"i'm a lasagna hog".split("").reverse().join("");
  • Pertanyaan: Apakah nilai window.foo?*
javascriptCopy to clipboard
(Window.foo || (window.foo = "bar"));
  • Pertanyaan: Apa hasil dari dua tanda di bawah ini *
javascriptCopy to clipboard
var foo = "Hello"; 
(function() { 
  var bar = " World"; 
  alert(foo + bar); 
})(); 
alert(foo + bar);
  • Pertanyaan: Apakah nilai foo.length *
javascriptCopy to clipboard
var foo = [];
foo.push (1);
foo.push (2);

Pertanyaan Seru:

  • Apa proyek keren yang Anda baru saja bekerja pada?
  • Apa sajakah hal-hal yang Anda sukai tentang alat pengembang yang Anda gunakan?
  • Apakah Anda memiliki proyek hewan peliharaan? Jenis apa?
  • Apa fitur favorit Anda Internet Explorer?
  • Bagaimana Anda seperti kopi Anda?

Contributors:

Dokumen ini dimulai pada tahun 2009 sebagai kolaborasi @paul_irish @bentruyman @cowboy @ajpiano @SlexAxton @boazsender @miketaylr @vladikoff @gf3 @jon_neal @sambreed dan @iansym. Sejak itu menerima sumbangan dari 100 developers.