Найкращі запитання та відповіді на інтерв’ю для веб-розробників із понад 25 років

top 25 web developer interview questions

Цей підручник містить набір поширених запитань Запитання та відповіді для інтерв’ю веб-розробників для веб-розробників, що працюють на веб-сайтах молодшого та старшого рівня:

Для маркетингової команди важливо створити надійну присутність в Інтернеті, рекламувати свої товари та послуги своїм потенційним клієнтам, відстежувати та надавати післяпродажне обслуговування існуючим клієнтам.

Веб-програми створюються з метою бути доступними у всьому світі, бути визнаними та пропонувати свої товари та послуги на міжнародному ринку.

як зробити власний брандмауер

Для побудови веб-додатків обов’язковим є глибоке знання мов розмітки, таких як HTML5, каскадна таблиця стилів CSS3, JavaScript та бібліотеки JS для взаємодії користувачів, для обробки елементів DOM, перевірки вхідних даних клієнта та створення динамічної та адаптивні веб-сторінки.

Що ви дізнаєтесь:

• Що таке веб-розробка
• Часті запитання щодо інтерв’ю веб-розробника
• Висновок
  • Рекомендована література

Що таке веб-розробка

Веб-розробка відноситься до роботи, пов’язаної зі створенням та підтримкою веб-сайтів та веб-додатків, таких як веб-сайти електронної комерції, Amazon, Flipkart, eBay тощо та сайти соціальних мереж, такі як Facebook, LinkedIn, Instagram та Twitter.

Сюди також входить робота зі створення веб-сайтів для залізниць, банків та всіх основних державних сайтів для трансляції інформації та підвищення обізнаності.

Підвищуйте обізнаність громадськості та пропонуйте освіту за допомогою каналів новин, використовуючи програмне забезпечення для веб-конференцій Skype, Zoom, GoToMeeting. Забезпечуйте онлайн-розваги через веб-серіали, такі як Netflix, Amazon Prime, плеєр MX тощо. Навчайте студентів, проводьте зустрічі для звернення до клієнтів та команд через географічні межі.

А тепер перейдемо до найпоширеніших питань співбесіди для веб-розробників як для молодших, так і для співбесід старшого рівня.

Часті запитання щодо інтерв’ю веб-розробника

Q # 1) Поясніть функції браузера.

Відповідь: Браузер пропонує різні функції. Вони такі:

• Це допомагає отримати доступ до HTML-сторінок та всіх веб-елементів, що використовуються у веб-додатках, а також веб-сайтах, і відображати відповіді з інших веб-сайтів як відповідь на запити.
• Дозволяє веб-пошук веб-сайту, який вас цікавить, ввівши URL або веб-адресу в адресний рядок та переглянути відповідь за допомогою будь-якої пошукової системи.
• Елементи керування навігацією використовуються для повернення до нещодавно відкритих сторінок, натискаючи кнопку назад і наступну кнопку, щоб рухатися вперед.
• Історія відстежує відвідувані місця в хронологічному порядку. Це дозволяє запам’ятовувати веб-сайти, які вас цікавлять, або робити їх закладки, щоб їх можна було переглядати або досліджувати пізніше. Він також зберігає раніше відвідані сайти у формі кешу та робить відвідувачів впізнаваними сайтами, роблячи доступ до цих сайтів швидшим.
• Керує паролями для часто використовуваних веб-сайтів, що вимагають автентифікації, і в більшості випадків зберігає користувачів, які вже ввійшли в обліковий запис.
• Дозволяє отримувати доступ до різних веб-сайтів, обмінюватися інформацією за допомогою дзвінків API, спілкуватися електронною поштою, даними та засобами обміну файлами мультимедійних файлів.

Приклад браузерів: Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari.

Q # 2) Поясніть HTML 5, CSS3, JavaScript та їх значення у веб-розробці.

Відповідь:

• HTML - це незалежна від платформи та браузера мова розмітки із низкою тегів, що забезпечують структуру веб-сторінки.
• CSS покращує макет сторінки та її вміст зі стилем.
• JavaScript контролює поведінку веб-елементів, а отже, робить ваш веб-сайт інтерактивним / адаптивним, перевіряє введені користувачем значення, збирає інформацію про відвідувачів веб-сайту та розпізнає попередніх відвідувачів, допомагає в аналізі відсотка кліків відвідувачів дописів у блозі.

Q # 3) Що ви розумієте під Framework?

Відповідь: Framework - це структура, яка забезпечує платформу для створення додатків. Це колекція файлів подібного типу, розміщених таким чином, що вони налаштовані на внутрішнє з’єднання / інтеграцію між собою.

Приклад: Структура API, яка містить добре перевірені, попередньо написані та скомпільовані класи для виконання загальних функцій, таких як функція завантаження файлів, читання вмісту файлів, звітів у форматі PDF та подібних форматів, інтегрованих із їх веб-додатком.

Q # 4) Що таке бібліотека з контекстом веб-розробки?

Відповідь: Бібліотека - це колекція коду, яка попередньо протестована та розроблена для очікуваних функціональних можливостей, розроблених розробниками, і доступна у сховищах. Веб-розробники можуть інтегрувати ці бібліотеки та використовувати їхні функціональні можливості, а не винаходити код, щоб виконати ту саму функціональність з самого початку.

Ви можете використовувати бібліотеки iText та Apache FOP у своєму додатку, щоб допомогти експортувати дані у файли формату PDF.

Q # 5) Які причини проблеми із зависанням браузера?

Відповідь: Щоб виявити першопричину та усунути часту проблему зависання браузера, виконайте наведені нижче дії:

Тут ми розглядаємо Google Chrome як браузер за замовчуванням.

1. Перевірте будь-яку проблему, пов’язану з Інтернетом: Клацніть на піктограму Вікно (Пуск) -> Виберіть Панель управління -> У розділі Мережа та Інтернет -> Клацніть на Перегляд стану мережі та завдань -> Перевірка Переглянути свою активну мережу - клацніть на підключення або відключення -> На ній повинно відображатися підключення до Інтернету для вибраного мережі.
2. Chrome неправильно закрито: У крайньому правому куті правою кнопкою миші клацніть правою кнопкою миші та виберіть запуск диспетчера завдань, якщо ви знайдете декілька chrome.exe на вкладці процеси, клацніть правою кнопкою миші на цьому записі та виберіть Завершити процес. Це звільнить простір в оперативній пам’яті. Потім перезапустіть Chrome знову.
3. Вимкнути розширення Chrome: Відкрийте браузер Chrome і введіть в адресному рядку -> chrome: // extensions / і натисніть Enter. Вимкніть усі активні розширення та перезапустіть браузер Chrome знову. Перейдіть до розширень Chrome і ввімкніть усі розширення.
4. Перевірте комп’ютер на наявність шкідливих програм: Запустіть Chrome і перейдіть до налаштувань. Натисніть Додатково, знайдіть Скинути та Очистіть. Клацніть на Очистити комп'ютер.
5. Скинути налаштування Chrome: Запустіть Chrome, перейдіть до налаштувань, натисніть Додатково, знайдіть Скинути та очистити та натисніть Відновити налаштування до початкових значень за замовчуванням.
6. Видалити несумісні програми: Під час сканування, якщо Chrome виявляє будь-яку несумісну програму, натисніть на оновлення або видаліть несумісні програми.
7. Нарешті, якщо проблема не зникне, видаліть версію Chrome та встановіть останню версію.

Q # 6) Як покращити взаємодію з користувачами, які відвідують ваш веб-сайт?

Відповідь: Нижче наведено пропозиції щодо покращення взаємодії з користувачем:

• Ваш веб-сайт / програма має працювати 24 × 7.
• Він повинен обробляти багаторазове завантаження доступу користувачів під час піку або сезону.
• Це повинно бути зручним для користувача та легким переходом до функцій, які відвідувач шукає.
• Повинні бути привабливі відео для ознайомлення з особливостями вашого продукту.
• Веб-сайт слід шукати в пошукових системах на основі введених ключових слів.
• Веб-сайт повинен бути інтегрований із платіжним шлюзом із усіма можливими альтернативами транзакцій.
• Повинні мати вільне користування функціями, доступними для користувачів, щоб прийняти рішення про придбання вашого продукту.
• Дані користувачів повинні бути захищені під час доступу до веб-сайту.
• Сеанси та функції кешу повинні розпізнавати відвідувачів, що повертаються.

Q # 7) Які відеоформати використовуються у веб-розробці?

Відповідь: Деякі формати відео, які підтримуються та використовуються при веб-розробці, перелічені нижче:

• AVI від Microsoft
• FLV Adobe Flash Video Player
• WMV, що підтримується медіаплеєром Windows
• MOV від програвача QuickTime
• MP4 підтримується мобільними та іншими платформами

Q # 8) Як би ви включили функції доступності на свій веб-сайт?

Відповідь: Доступність є важливою функцією, необхідною для впровадження на вашому веб-сайті, щоб дозволити відвідувачам з особливими потребами та інвалідами отримати доступ до вашого веб-сайту та вивчити його.

• Веб-сайт повинен бути зручним для клавіатури, тобто всі функції повинні бути доступними без використання миші.
• Користувачі повинні мати можливість вимкнути динамічний та рухомий вміст, такий як файли GIF, анімація, відеофайли. Цей вміст може негативно вплинути на споживачів епілепсії.
• Стенограми / підписи для перегляду відео. Для глухих користувачів перегляду відео із субтитрами недостатньо, такі функції, як підписи, повинні відображатися під час запуску відео.
• Функція голосової допомоги та позначення фотографій, графіки та кнопок для відвідувачів із вадами зору мають важливе значення для дотримання вказівок щодо вивчення та використання функцій, пропонованих на веб-сайті
• Функції автоматичного заповнення в рядку пошуку та зручні для пошуку функції для відвідувачів із затримкою або поганою моторикою.
• Збільште розмір області, на яку можна натиснути. Використовуйте тонкі кольори для відвідувачів, які мають дальтонізм.

Q # 9) Коли б ви застосували AJAX у своїй веб-програмі?

Відповідь: AJAX оновлює розділ вмісту сторінки, не перезавантажуючи всю сторінку. Ця функція є важливою, коли користувачеві потрібні швидкі результати, без будь-яких затримок очікування відправленого запиту, натиснувши кнопку 'Надіслати' та чекаючи відповіді. Навантаження сервера можна зменшити, застосовуючи AJAX з меншою кількістю запитів, що економить пропускну здатність.

Ви можете використовувати AJAX для перевірки форми. Замість спливаючих вікон можна використовувати лайтбокс, сортуючи та фільтруючи вміст у табличному форматі, відображаючи результати або голоси за допомогою програми чату, перезавантажуючи капчу для перевірки автентичності.

найкраще програмне забезпечення для стиснення відеофайлів

Q # 10) Як ми можемо впроваджувати веб-служби у веб-додатки?

Відповідь: Веб-програма надсилає запити до веб-служби за допомогою протоколу HTTP. За вказаною URL-адресою веб-служба обробляє запит і повертає відповідь назад до програми. SOAP та RESTful - це два типи веб-сервісів.

Q # 11) Як і які функції безпеки ви можете застосувати до свого веб-сайту?

Відповідь: Щоб захистити свій веб-сайт від викрадення даних, вам потрібно покращити захист вашого веб-сайту, наприклад

• Застосовуйте чітку політику щодо паролів, дозволяючи паролю мати принаймні 10 символів і повинен містити верхні, нижні, спеціальні символи та цифри.
• Хост, який встановлює ваш веб-сайт, повинен мати резервну копію, встановлений антивірус та брандмауер для захисту вашого вмісту.
• Сторінка входу повинна мати Captcha, функції OTP, функцію блокування облікового запису (у разі введення 3 помилкових паролів) тощо, щоб запобігти доступу несанкціонованого відвідувача до вашого облікового запису.

Q # 12) Яка конфігурація та налаштування необхідні для надсилання електронних листів через ваш веб-сайт?

Відповідь: В ідеалі ви можете налаштувати ваш SMTP на одному сервері за допомогою сторонніх служб, таких як Gmail SMTP, або використовувати еластичну електронну пошту, використовуючи ім'я хосту, порт, ім'я користувача та пароль.

Q # 13) Для чого б ви створили адаптивний веб-сайт?

Відповідь: Еластичний веб-дизайн допомагає автоматично змінювати розмір ширини та висоти браузера на основі робочих столів, планшетів та мобільних пристроїв відповідно до розміру монітора для настільних комп’ютерів або ноутбуків.

Q # 14) Які формати обміну даними?

Відповідь: Різні формати обміну даними - це формати XML, CSV, JSON та текст.

Q # 15) Що ви маєте на увазі під протоколом?

Відповідь: У мережевій термінології протокол - це набір правил форматування та обробки даних. Для спілкування обидва пристрої повинні мати однаковий протокол. Інтернет-протокол (IP) - це протокол мережевого рівня, який відповідає за маршрутизацію. Протокол управління передачею (TCP) передає пакети даних через мережі.

Протокол передачі гіпертексту (HTTP) - це рівень 7, що використовується в Інтернеті і передає дані між пристроями. Протокол користувацьких датаграм (UDP) використовується в програмах швидкого обміну даними, таких як потокове відео та ігри.

Q # 16) Які методи ви застосували б для зменшення часу завантаження сторінки?

Відповідь: З метою зменшення часу завантаження сторінки та підвищення продуктивності можна застосувати наступні прийоми:

• Застосовуйте найновіші версії веб-технологій побудови, такі як CSS3 та HTML5
• Використовуйте JavaScript та таблиці стилів до мінімуму
• Намагайтеся уникати використання переспрямувань
• Використовуйте невеликий розмір зображень
• Включити код із мережі доставки вмісту (CDN)
• Застосуйте AJAX для швидких та адаптивних веб-програм

Q # 17) Перелічіть відмінності між HTTP 1.1 та 2.0?

Відповідь: Відмінності між HTTP 1.1 та HTTP 2 наведені в таблиці нижче:

Q # 18) Які пріоритети ви б врахували під час створення веб-додатку?

Відповідь: Під час створення веб-додатків слід пам’ятати про наступні пріоритети:

• Сторінки веб-сайтів слід перевірити на ефективність, оскільки вони повинні завантажуватися якомога швидше.
• Сторінки програм не повинні мати непрацюючих посилань.
• Додаток повинен бути сумісним з усіма основними браузерами, такими як Mozilla Firefox, Google Chrome, Internet Explorer та Opera.
• Сайт повинен містити ключові слова, доступні для пошукових систем.
• Потрібно забезпечити безперебійний зв’язок з базою даних.
• Сутності баз даних, такі як збережені процедури, повинні бути ретельно перевірені з використанням дійсних даних.
• Беккенд-столи повинні бути захищені, захищені від фальсифікацій.
• Вставка даних повинна перевірятися обмеженнями на рівні стовпців і рядків.
• Вставляти дані в таблиці БД та переглядати їх у процесі користувальницького інтерфейсу слід якомога швидше.
• Фреймворк, який використовується для інтеграції сторінок, повинен бути простим і тестуватися без компіляції.
• Сторінки введення для користувача повинні бути розроблені з мінімальними входами від користувача, елементи, що використовуються, повинні бути зручними для доступу.
• Використання HTTP2 для швидкого завантаження вмісту сторінки.
• Використання JavaScript має бути мінімальним.
• Повинні бути передбачені такі можливості, як динамік для читання тексту, більший розмір шрифту, сенсорний доступ до екрану, щоб люди з фізичними обмеженнями також могли легко заходити на веб-сайт.
• Потрібно інтегрувати мультимедійні файли, такі як аудіо та відео, які можна відкрити, не покладаючись на місцеве програмне забезпечення для виконання цих файлів.
• Веб-сторінки повинні реагувати на мобільні екрани.

Q # 19) Які нові функції представлені в HTML5?

Відповідь: Нові семантичні, графічні, мультимедійні елементи були введені в HTML5, додані різні атрибути елементів, тоді як небагато елементів було видалено.

Він додав основні нові функції, такі як мультимедійні елементи відео та аудіо, API геолокації, API на веб-сховищі, веб-сокет, веб-працівник JS, Canvas та Drag-n-Drop.

Q # 20) Поясніть на прикладах, відмінності між Canvas та SVG.

Відповідь: Обидва контейнери Canvas та SVG використовуються для зберігання графіки на HTML-сторінці, однак між ними є такі відмінності.

Q # 21) Що таке елемент DOM та його ієрархія?

Відповідь: Об'єкт документа - це документ HTML, який відображається у вікні браузера, коли ми переходимо на веб-сторінку. DOM або об'єктна модель документа - це спосіб доступу або модифікації цього документа.

Віконний об'єкт є батьківським для всіх елементів, за яким слідує об'єкт Document, який відображає вміст сторінки, а потім з'являється файл Об’єкт форми , який ідентифікується тегами.

Елементи керування формою: Усі елементи введення, такі як текстові поля, кнопки, перемикачі, прапорці, списки тощо, містяться в об'єкті форми.

Q # 22) Коли слід використовувати селектор id та class?

Відповідь: Ідентифікатор як селектор визначається для однозначної ідентифікації його як елемента, отже, не повинен застосовуватися такий самий ідентифікатор до будь-якого іншого елемента на тій самій сторінці. Тоді як селектори класів - це типи селекторів CSS, які застосовуються для того, щоб додати стиль до цього елементу, для приклад, сімейство шрифтів, розмір шрифту або колір, отже селектори класу можуть застосовуватися до декількох елементів.

У JavaScript ми маємо getElementById () метод, який повертає перший елемент, знайдений у вихідному коді, тоді як getElementsByClassName () метод повертає колекцію елементів з певним іменем класу.

Q # 23) Поясніть API, представлені HTML5.

Відповідь: HTML 5 представив такі методи API:

• API високої роздільної здатності: Це дає поточний час у роздільній здатності до мілісекунд, незалежно від перекосу та регулювання системного годинника.
• API часу користувача: Це дозволяє точно вимірювати продуктивність коду JavaScript.
• API часу навігації: Це допомагає в оцінці часового інтервалу під час затримки завантаження сторінки, а також враховує перенаправлення сторінки, пошук DNS та час для побудови DOM, затримки з'єднання TCP тощо.
• API інформації про мережу: Це допомагає визначити тип підключення веб-відвідувача та статус усього журналу пропускної здатності.
• API вібрації: Він може стимулювати реакцію під час певних подій в ігрових додатках, вібруючи користувацькими пристроями (мобільним телефоном), забезпечуючи максимальну зручність для користувачів.
• API стану батареї: Він пропонує інформацію про стан акумулятора пристрою, наприклад, про зарядку, залишкові секунди до повного розрядження тощо.
• API видимості сторінки: Він надає детальну інформацію про такі статуси видимості сторінок, як зведений до мінімуму, зосереджений на даний момент, і надає рішення щодо зупинки споживання процесора або пропускної здатності.
• Повноекранний API: Це дозволяє повноекранний дисплей від користувача на основі специфікації програми.
• getUserMedia API: Він надає доступ до мультимедійних потоків, таких як відео, аудіо або обидва вбудовані у веб-сторінку.
• API WebSocket: Він підтримує постійний зв’язок між браузером та сервером.
• API геолокації: Це допомагає відстежувати географічне розташування місця та людей за допомогою Глобальної системи позиціонування (GPS) і отримує широту та довготу, тим самим наносячи положення на карті в реальному часі.

Q # 24) Яка різниця між значенням Null, Empty та Undefined і як ви можете з ними обробляти?

Відповідь: Порожній рядок, Null та Undefined подібні за типом, але відрізняються один від одного.

Невизначено: Коли ми просто оголошуємо змінну, але не присвоїли значення. Змінна OR не існує або не оголошена. Приклад: значення; console.log (значення); ==> невизначено

Нуль: Ідентифікатори або імена, надані функціям, змінним, справді існують, але не мають значення. тобто значення дорівнює нулю. Приклад: val = нуль

Порожній рядок: Коли змінна з рядковим типом даних не містить жодних символьних даних. Приклад: a = '';

Q # 25) Поясніть різні спливаючі вікна, що використовуються в JavaScript.

Відповідь: В основному в JavaScript є три спливаючі вікна, а саме. Сповіщення, підтвердження та запит.

Сповіщення - це спливаюче вікно для надання інформації користувачеві за допомогою кнопки Ok. Користувачі можуть прочитати повідомлення та натиснути кнопку Ok, щоб закрити це вікно.

Синтаксис, який використовується для оповіщення в JavaScript:

Підтвердьте - це спливаюче вікно, яке користувачі можуть вирішити та вибрати один із варіантів, від OK та Скасувати.

• Для того, щоб погодитись із повідомленням, як Ти хочеш? , користувач може натиснути OK, щоб підтвердити рішення.
• Щоб не погодитися з повідомленням, користувач може натиснути Скасувати та відмовитись від рішення.

Підкажіть - це тип спливаючих вікон, коли користувачеві рекомендується ввести якесь значення, наприклад, ім’я чи вік, і після натискання кнопки OK він приймає введене значення. Приклад: yourage = підказка (“Введіть дійсний вік”);

Q # 26) Опишіть використання анімації CSS на прикладі.

Відповідь: Ви можете додавати анімацію (поступово змінювати один стиль на інший) до елементів HTML без використання JavaScript або Flash, використовуючи анімацію CSS.

Вказуються ключові кадри, які містять, які стилі елемент буде змінено в певний час.

Приклад наведений нижче на екрані:

Приклад анімації CSS зміна кольору з червоного на аква

Q # 27) Поясніть призначення кожного з типів запитів HTTP, що підтримуються веб-службами RESTful

Відповідь: У веб-службі RESTful кожен тип запиту HTTP має певне призначення. Вони пояснюються нижче:

• ОТРИМАТИ це тип запиту, який отримує дані з сервера.
• Опублікувати це тип запиту, який використовується для подання детальних даних форми нових даних, а потім завантаження файлу.
• ВСТАНОВИТИ - це запит, подібний до POST, але застосовується для оновлення існуючої сутності.
• ВИДАЛИТИ - це запит, подібний до PUT, і використовується для видалення ресурсу з сервера.
• СЛІД використовується для перевірки вмісту, отриманого разом із мережею під час запиту.
• КЕРІВНИК подібний до GET, але отримує заголовки відповідей під час запиту.

Q # 28) Які відмінності між тегом Span та Div у HTML5?

Відповідь: І Div, і Span використовуються для представлення певного розділу веб-сторінки, але обидва вони відрізняються один від одного, як пояснюється в таблиці нижче:

Q # 29) Поясніть клас Pseudo у CSS на прикладах.

Відповідь: Псевдо-клас у каскадних таблицях стилів - це ключове слово, що застосовується до селекторів елементів HTML, щоб додати особливий стиль до подій HTML, таких як onblur, onclick, onchange, onhover тощо, з посиланням на зовнішні фактори, такі як попереднє відвідування веб-сайту з історії навігації, положення або переміщення мишкою, статус вмісту елемента форми.

Синтаксис класу Pseudo:

Приклад:

CSS-псевдо-клас на HTML-сторінці:

як перевірити введення sql вручну -

Наведення курсору миші на різні елементи відображає ефекти псевдокласу.

Висновок

Таким чином, у цьому підручнику ми обговорили питання інтерв’ю, пов’язані з розробкою та підтримкою веб-сайтів та веб-додатків. Важливо добре розуміти та практичні знання щодо інтеграції нових технологій, інтерфейсних бібліотек мов сценаріїв, API HTML5, CSS3 та таких мов, як Java, ASP, PHP. Крім того, ми повинні знати, як налаштовувати програми на веб-серверах та базі даних, обробляти ключові слова SEO, веб-безпеку та сумісність браузера.

Ви повинні добре знати такі знання мереж, як протокол, веб-служби, досвід користувачів, вирішення проблем та інновації у веб- і мобільних додатках, а також функції безпеки, обробки сесій та доступності.

Усього найкращого у майбутньому інтерв’ю веб-розробника.

Рекомендована література

• Повне керівництво по тестуванню веб-додатків (Як протестувати веб-сайт)
• 25 найкращих запитань та відповідей на інтерв’ю для спритного тестування
• 30 найкращих запитань та відповідей на інтерв’ю CSS
• 25+ Найпопулярніші запитання та відповіді на інтерв’ю ADO.NET
• Топ 20+ запитань та відповідей на інтерв’ю .NET
• 30 найпопулярніших запитань та відповідей на інтерв’ю в HTML (СПИСОК 2021)
• Найкращі 25 запитань та відповідей на інтерв’ю веб-служб Java
• 20 найважливіших запитань та відповідей на тестування API