Top 27 pytań i odpowiedzi na wywiad z programistą front-end
Opublikowany: 2021-11-02Front-end development to jedna z najbardziej dochodowych dziedzin, szczególnie dla początkujących w tworzeniu stron internetowych. Ponieważ wymaga to głównie podstawowych umiejętności, takich jak HTML, CSS, JavaScript i odrobiny wiedzy o serwerach, wielu nowicjuszy uważa, że programowanie front-end jest dobrym punktem wyjścia do kariery w pełnym rozwoju.
Rzecz w tym, że front-end development jest rozbudowany i obejmuje wiele różnych narzędzi i technik. W rezultacie pytania do rozmowy kwalifikacyjnej dotyczące roli programistów front-end są dość zróżnicowane i obejmują różne domeny.
Spis treści
Pytania i odpowiedzi dotyczące wywiadu z programistą front-end
spójrzmy na 27 najczęściej zadawanych pytań do wywiadów z programistami front-end. Przejrzyj teraz ten artykuł i dodaj go do zakładek na później – do powtórki przed terminem rozmowy kwalifikacyjnej!
1. Co to jest DOCTYPE i do czego służy?
DOCTYPE jest powiązany z DTD (definicją typu dokumentu) i oznacza typ dokumentu. Dzięki temu programiści mogą informować przeglądarkę o wersji HTML używanej w konkretnym dokumencie. Na przykład deklaracja dla HTML 4 będzie wyglądać tak – <!DOCTYPE HTML4>.
2. Jakie jest znaczenie tagów Meta w HTML?
Metatagi znajdują się wewnątrz znacznika <head> i dostarczają metadane dotyczące całego dokumentu HTML. Wykonują one zadanie określania specyfikacji, takich jak zestaw znaków strony, opis strony, język strony, nazwisko autora strony itp. Oto przykład przy użyciu metatagów:
<!DOCTYPE html>
<html>
<głowa>
<meta charset=”utf-8″>
<nazwa meta=”viewport” content=”width=szerokość-urządzenia, początkowa skala=1″>
<meta name=”Słowa kluczowe” content=”Pytania do wywiadu z programistami front-end, CSS, HTML, JavaScript”>
<title>Pytania i odpowiedzi podczas rozmowy wstępnej</title>
</head>
<ciało>
</body>
</html>
3. Co rozumiesz przez Lazy Loading?
Lazy loading to jedna z technik ładowania treści w przeglądarce zgodnie z potrzebami użytkownika. Optymalizuje to wykorzystanie zasobów i wykorzystanie serwera. Przykład tego można zobaczyć w aplikacjach eCommerce, takich jak Flipkart lub Amazon. Gdy szukasz konkretnego produktu na tych stronach, zobaczysz tylko szczegóły (cena, zdjęcie, kluczowe cechy) elementów dostępnych tylko na pierwszym złożeniu. Następnie, podczas przewijania w dół, poniższe elementy ładują się w razie potrzeby.
4. Co wiesz o przymusie w JavaScript?
Przymus to metoda konwersji typu danych zmiennej. Używając przymusu, możesz przekonwertować obiekt na wartość logiczną, łańcuch na liczbę i tak dalej. Oto fragment kodu, który lepiej to wyjaśni:
zm x= 23;
zmienna y = ciąg(x);
typ(x)
typ(y)
Dane wyjściowe dla tego kodu to Number i String, co oznacza, że typem danych zmiennej x jest Number, a po wymuszeniu typ danych zmienia się na String.
JavaScript obsługuje dwa rodzaje przymusu:
- Niejawny: w tym przypadku sam JavaScript zmieni typ danych zmiennej.
Na przykład: var x = 10;
zmienna y = x + '01';
W tym przypadku wartością y będzie „1001”, a typem danych będzie String. JavaScript niejawnie konwertuje typ danych Number z x na String, aby połączyć go z nowym łańcuchem '01', w wyniku czego końcowym wynikiem w zmiennej y jest '1001'.
- Jawne: Jawne wymuszanie wymaga od programisty celowej zmiany typu danych za pomocą wbudowanych funkcji, takich jak Number(), Boolean(), String i tym podobne.
Na przykład: var x = 12;
zmienna y = ciąg(x);
W powyższym kodzie typ danych zmiennej x został wyraźnie zmieniony z Number na String.
5. Co rozumiesz o Zmiennym Zakresie w JavaScript?
Zakres zmiennej służy do ustawienia regionu lub zakresu kontroli dowolnej zmiennej w określonym programie JavaScript. W JavaScript istnieją dwa typy zakresu zmiennej:
- Zakres lokalny: Zakres lokalny oznacza, że dostępność i dostępność tej zmiennej są ograniczone do funkcji, w której jest zdefiniowana.
Na przykład:
suma funkcji () {
zm x = 5;
zmienna y = 2;
}
funkcja równieżSum()
{
zmienna z = x+y;
}
W powyższym kodzie druga funkcja nie zostanie poprawnie wykonana, ponieważ zmienne xiy należą do zakresu funkcji sum() – są lokalne w tym zakresie. Czyli druga zmienna nie ma dostępu do x i y, więc ta funkcja będzie niepoprawna.
- Zakres globalny: Zakres globalny dotyczy zmiennych zdefiniowanych poza wszystkimi funkcjami. W takim przypadku każda funkcja może uzyskać dostęp do zmiennej.
Na przykład:
zm x = 2; // jest to zmienna globalna
suma funkcji () {
zm = 3;
zmienna y = x + z;
}
Ponieważ zmienna x ma zasięg globalny w powyższym kodzie, funkcja sum() ma do niej dostęp. Dlatego zmienna y otrzymuje wartość 5 (x+z) i ta funkcja działa zgodnie z oczekiwaniami.
6. Do czego służy Node.JS?
Node.JS to środowisko uruchomieniowe JavaScript, które ma charakter open-source. Płynnie umożliwia wykonanie kodu JS na samym serwerze. Przed Node.JS kod JavaScript działał w przeglądarce, ale NOde całkowicie to zmienił. Obecnie Node.JS jest szeroko stosowany w rozwoju pełnego stosu do obsługi części serwerowej. Pozwala to programistom pracować przy użyciu jednego języka (JavaScript) na wszystkich końcach aplikacji internetowej (przy użyciu stosu MEAN, na przykład, możesz wykonywać pełne tworzenie stosów przy użyciu tylko języka JS, różnych frameworków!)
7. Wyjaśnij NPM
Skrót od Node Package Manager, NPM to narzędzie do tworzenia pakietów dla Node.JS. Oferuje repozytorium online dla projektów węzłów oraz narzędzie wiersza poleceń do zarządzania różnymi pakietami i pracy z nimi. Aby uzyskać dostęp lub użyć dowolnego konkretnego pakietu Node.JS, można wywołać i użyć NPM.
8. Jak serwer współpracuje ze stronami internetowymi lub aplikacjami, które zawierają treści wielojęzyczne?
Gdy użytkownik uzyskuje dostęp do tych witryn, przeglądarka użytkownika wysyła informacje związane z wyborem języka przez użytkownika. Odbywa się to za pomocą nagłówka Accept-Language. Serwer odczytuje i wykorzystuje te informacje, aby odesłać język we właściwym języku.
9. Co to jest atrybut data-* w HTML i czy zachęca się do korzystania z niego teraz?
Atrybut Data-* służy do przechowywania niestandardowego, który jest prywatny na stronie internetowej. Służy to programistom do debugowania witryny lub wprowadzania prywatnych zmian. Używanie atrybutów data-* nie jest zalecane, ponieważ teraz można zrobić to samo za pomocą konsoli inspekcji w przeglądarce.
10. Co to jest IIFE w JavaScript?
IIFE, skrót od Immediately Invoked Function Expression, to technika wykonywania funkcji zaraz po ich utworzeniu. Jest zwykle używany do wypełniania globalnych obiektów lub zmiennych.
11. Czy wiesz o React.JS?
Tak – React to biblioteka JavaScript używana do tworzenia front-endu (UI) jednostronicowych aplikacji internetowych. Został opracowany przez Facebooka i służył głównie do obsługi widoku z przodu ich aplikacji mobilnych i internetowych.
12. Zewnętrzny JS/CSS czy inline JS/CSS – który preferować i dlaczego?
Kodowanie inline zwiększa rozmiar dokumentu, co prowadzi do wolniejszego wykonywania kodu. Dzięki kodowaniu inline przeglądarka użytkownika traci możliwość buforowania kodu CSS i JS i przechowywania go w celu szybszego wykonania. Z drugiej strony przeglądarka może buforować pliki za pomocą zewnętrznego CSS i JS, co prowadzi do skrócenia czasu ładowania strony.
13. Wyjaśnij użycie słowa kluczowego „robi” w JavaScript
Pojęcie słowa kluczowego „does” jest podobne do powiązania dynamicznego w innych technikach programowania wysokiego poziomu. Jest używany w odniesieniu do obiektu, z którym jest powiązany.
Na przykład:
var student = {
fImię: „Sam”,
lNazwa : „Harris”,
id : 2123,
CompleteName : function() {
zwróć this.fName + ” ” + this.lName;
}
};
W powyższym przykładzie this.firstname zwróci wartość zmiennej 'firstName' zapisaną w funkcji 'this', tj. Sam. Funkcja fullName() zwróci wynik „Sam Harris”, łącząc imię i nazwisko. Jest to przydatna właściwość, gdy mamy do czynienia z dużym kodem z wieloma funkcjami i podobnymi nazwami zmiennych.
14. Co wiesz o wstrzykiwaniu SQL?
SQL Injection to technika umieszczania złośliwego kodu w formularzach wejściowych w celu uzyskania dostępu do bazy danych SQL witryny. Jest to jedna z najbardziej praktykowanych i znanych technik hakerskich, a każda witryna, która jest źle zaprojektowana i nie stosuje ścisłych środków ochrony serwera, może łatwo paść ofiarą wstrzyknięcia SQL.
15. Wyjaśnij wszystkie elementy CSS Box Model
Model pudełkowy w CSS składa się z czterech elementów:
- Treść: obejmuje główną treść, w tym cały tekst, obrazy i wszystko inne na stronie internetowej.
- Padding: Padding można rozumieć jako przestrzeń między obszarem zawartości a zewnętrzną granicą strony. Pomyśl o tym jako o przestrzeni oddechowej treści strony internetowej.
- Border: Border to obszar, który obejmuje dopełnienie. Jest to zewnętrzna warstwa wyściółki .
- Margines: Margines leży poza obramowaniem i służy do pomiaru odległości między obrzeżem strony HTML a granicami ekranu użytkownika w celu zapewnienia prawidłowej orientacji strony.
Proszę odnieść się do poniższego obrazu, aby uzyskać więcej jasności na temat czterech terminów:
16. Co to jest „miksowanie” w CSS i jak jest zaimplementowane?
Mixin służy do ustawiania wzorców wielokrotnego użytku dla par właściwość-wartość. Autorzy kodu używają go do uproszczenia kodu.
Na przykład:
@mixin .rounded10px {
-moz-border-radius: 10px;
}
W takim przypadku „.rounded10px” można użyć w dowolnym miejscu w kodzie HTML, aby zaimplementować instrukcję „-Moz-border-radius: 10px;”. Daje to dużą przenośność i czytelność kodu CSS.
17. Co wiesz o SASS?
SASS to skrót od Syntactically Awesome Stylesheets. Jest to preprocesor CSS, który służy do optymalizacji kodu CSS. Wprowadza funkcje, takie jak zagnieżdżone reguły, domieszki, zmienne, importy wbudowane i wiele więcej, aby zorganizować kod CSS w znacznie lepszy sposób i jednocześnie używać wielu kodów CSS, korzystając z pojęć matematycznych. Przeglądarka nie może uruchamiać plików SASS, więc przed wysłaniem ich do przeglądarki należy je najpierw przekonwertować na CSS.
18. Rozróżnij pliki cookie, przechowywanie lokalne i przechowywanie sesji.
Pliki cookie, magazyny lokalne i magazyny sesji to trzy sposoby, w jakie przeglądarka przechowuje informacje w celu szybszego przetwarzania i wyszukiwania. Zapoznaj się z poniższą tabelą, aby dokładnie zrozumieć, jak te trzy techniki różnią się w zależności od danych.
Metryczny | Ciastko | Lokalny magazyn | Pamięć sesji |
Data ważności | Nic. Ale mogą być ręcznie zniszczone przez użytkownika lub ustawione przez programistę dla ich konkretnej witryny. | Nic. | Wygasa automatycznie na koniec każdej sesji. |
Trwałość w wielu sesjach | Zależy od tego, czy programista ustawił czas wygaśnięcia, czy nie. | Tak, to utrzymuje się w wielu sesjach. | Nie, to jest automatycznie niszczone, więc nie jest zachowywane między sesjami. |
Komunikacja z serwerem | Automatycznie wysyłane do nagłówka przez „Cookie Header”. | Brak komunikacji z serwerem. | Brak komunikacji z serwerem. |
Możliwość przechowywania | 4kb | 5MB | 5MB |
| Dostępność | Wszystkie okna | Wszystkie okna | Tylko ta sama karta |
Metryczny
Ciastko
Lokalny magazyn
Pamięć sesji
Data ważności
Nic. Ale mogą być ręcznie zniszczone przez użytkownika lub ustawione przez programistę dla ich konkretnej witryny.
Nic.
Wygasa automatycznie na koniec każdej sesji.
Trwałość w wielu sesjach
Zależy od tego, czy programista ustawił czas wygaśnięcia, czy nie.
Tak, to utrzymuje się w wielu sesjach.
Nie, to jest niszczone automatycznie, więc nie jest zachowywane między sesjami.
Komunikacja z serwerem
Automatycznie wysyłane do nagłówka przez „Cookie Header”.
Brak komunikacji z serwerem.
Brak komunikacji z serwerem.
Możliwość przechowywania
4kb
5MB
5MB
Dostępność
Wszystkie okna
Wszystkie okna
Tylko ta sama karta
19. Co wiesz o renderowaniu progresywnym?
Renderowanie progresywne odnosi się do metody stosowanej w celu zwiększenia procesu renderowania treści dowolnej strony internetowej. Jest to przydatne do optymalizacji wykorzystania danych mobilnych przez użytkownika. Renderowanie progresywne obejmuje takie koncepcje, jak leniwe ładowanie, asynchroniczny kod HTML, nadawanie priorytetów widocznej zawartości i wiele innych.
20. Wyjaśnij użycie atrybutu 'srcset' w tagu <img>
'srcset' służy do renderowania różnych rozdzielczości tego samego obrazu – w oparciu o różne przeglądarki lub urządzenia. Służy to poprawie doświadczenia użytkownika i upewnieniu się, że widzi najlepszą rozdzielczość obrazu na urządzeniu, na którym go ogląda. Korzystając z srcset, możemy zapewnić, że przeglądarka wyświetli obrazy wysokiej jakości na urządzeniach i przeglądarkach o dobrej rozdzielczości oraz obrazy o niskiej rozdzielczości na innych urządzeniach. W ten sposób można go wykorzystać:
<img srcset="picture_low_quality.jpg 480w,
picture_high_quality.jpg 800w”
rozmiary=”(maksymalna szerokość: 600px) 480px,
800px”
src="picture_high_quality.jpg">
21. Czym są języki szablonów w odniesieniu do HTML?
Język szablonów to język zastępczy, który pomaga użytkownikom wprowadzać dane do dowolnego dokumentu HTML. Różne języki szablonów współpracują z frameworkami zaplecza. Na przykład Jinja to jeden z popularnych języków szablonów, który współpracuje z frameworkami Django Flask w Pythonie. Slim to kolejny język szablonów używany w Ruby i Rails.
22. Wyjaśnij zmienną 'float' w CSS.
Float służy do pozycjonowania elementu w sensie względnym. Określa, w jaki sposób dany element powinien „unosić się” w widocznym obszarze zgodnie z różnymi rozmiarami urządzeń. Służy to utrzymaniu responsywności strony internetowej, a zalecaną praktyką jest używanie pływaka.
23. Dlaczego używane są znaczniki <span> i <div>?
Znacznik <span> jest używany głównie do elementów wbudowanych, podczas gdy znacznik <div> jest używany do bloków. Te znaczniki nie mają żadnego nieodłącznego znaczenia, ale można ich użyć do określenia bloku lub wbudowanego fragmentu kodu w dokumencie HTML, aby nadać mu inny styl lub format i mieć nad nim większą kontrolę. Na przykład:
<div id=”informacje”>
<p>Skontaktuj się z <span class=”name”>upGrad</span> na <span class=”courses”> programowanie front-end i pełne kursy programistyczne</span></p>
</div>
W powyższym fragmencie kodu zdefiniowaliśmy dwa fragmenty <span>. Jeden dotyczy nazwy (upGrad), a drugi kursów. W ten sposób mamy większą kontrolę nad tymi dwoma fragmentami kodu i możemy go sformatować w inny sposób, aby się wyróżniać.
24. Czym różni się MongoDB od MySQL?
MySQL to relacyjny system DBMS, który wykorzystuje SQL jako język do zarządzania wszystkimi operacjami związanymi z bazą danych. Będąc RDBMS, używa struktur podobnych do tabeli do przechowywania i manipulowania danymi. Z drugiej strony, MongoDB to baza danych NoSQL, która do przechowywania wszystkich danych używa płaskiego formatu podobnego do JSOL. Aby modyfikować elementy w MongoDB, programiści muszą używać MQL (MongoDB Query Language).
25. Co wiesz o funkcjach anonimowych w JavaScript?
W normalnych scenariuszach najpierw definiowana jest nazwa funkcji, a następnie treść funkcji. Z kolei w funkcjach anonimowych nazwa funkcji nie jest zdefiniowana. Używane są tylko operatory zmiennej i przypisania, a funkcja jest przechowywana jako obiekt. Następnie, używając zmiennych, będziemy mogli wywołać funkcję. Na przykład:
var add = function(a,b){ console.log(a+b)}
dodaj(4,5);
W powyższym przykładzie funkcja jest anonimowa i wyświetla poprawne wyjście 9.
26. Kiedy stosuje się AJAX?
AJAX jest skrótem od asynchronicznego JavaScript i SML i ułatwia komunikację między serwerem WWW a przeglądarką użytkownika. AJAX nie jest językiem programowania. Służy do ładowania i wysyłania danych do iz przeglądarki użytkownika nawet po załadowaniu strony. Jest to potężne narzędzie do aktualizacji danych na stronie użytkownika bez konieczności odświeżania strony przez użytkownika. Zasadniczo AJAX pozwala na odświeżanie i aktualizowanie strony w czasie rzeczywistym.
27. W jaki sposób zapewniłbyś, że Twoja strona internetowa lub aplikacja jest przyjazna dla użytkownika?
Aby zapewnić, że witryna lub aplikacja internetowa jest całkowicie przyjazna dla użytkownika, programiści front-end muszą współpracować z projektantami UX (User Experience) w celu konceptualizacji stron internetowych, które rozwiązują problemy odbiorców, do których są skierowane. Celem jest stworzenie środowiska skoncentrowanego na użytkowniku z optymalnym przepływem projektu, zawartością i strukturą strony w różnych przeglądarkach i ekranach.
Podsumowując
Powyższe pytania mają na celu przedstawienie zakresu pytań, które może objąć Twoja rozmowa kwalifikacyjna. Ponieważ front-end to zadanie, które obejmuje różne umiejętności, takie jak projektowanie, HTML, CSS, JavaScript, AJAX i inne, zostaną zadane pytania dotyczące wszystkich odpowiednich umiejętności.
Jeśli nie masz pewności co do swoich umiejętności lub chcesz rozwijać się jako programista front-end, jesteś we właściwym miejscu. W upGrad oferujemy programy w inżynierii oprogramowania , które przeprowadzą Cię przez cały proces rozwoju front-end i back-end oraz zapewnią wszystkie niezbędne narzędzia i umiejętności wymagane do osiągnięcia doskonałości w świecie pełnego rozwoju. Zapisz się i rozpocznij swoją podróż już dziś!
Co obejmuje programowanie front-endu?
Jak sama nazwa wskazuje, programowanie front-end zajmuje się front-endem lub ekranem renderującym dowolnej aplikacji internetowej. Do tego potrzebne są umiejętności i znajomość HTML, CSS, JavaScript i jego frameworków, AJAX, zarządzanie serwerem.
Kto może dostać pracę w front-end development?
Praktycznie każdy zainteresowany tworzeniem stron internetowych i mający zmysł projektowania może zdobyć umiejętności wymagane do rozpoczęcia i doskonalenia kariery w tworzeniu stron internetowych.
Czy programiści front-end mogą później stać się programistami fullstack?
Zdecydowanie. W miarę zdobywania coraz większego doświadczenia jako programista front-end, powoli zaczniesz również wybierać koncepcje pełnego stosu, ponieważ będziesz współpracować również z programistami back-end. Ta wiedza pomoże Ci przejść od programisty front-end do programisty pełnego stosu.