Top 27 de întrebări și răspunsuri la interviu pentru dezvoltatori front-end
Publicat: 2021-11-02Dezvoltarea front-end este unul dintre cele mai profitabile domenii, în special pentru începătorii în dezvoltarea web. Deoarece necesită în mare parte abilități fundamentale precum HTML, CSS, JavaScript și un pic de cunoștințe de server, mulți începători consideră că dezvoltarea front-end este un bun punct de plecare pentru o carieră în dezvoltarea full-stack.
Cu toate acestea, lucrul este că dezvoltarea front-end este extinsă și acoperă multe instrumente și tehnici diferite. Ca rezultat, întrebările de interviu pentru rolul dezvoltatorilor front-end sunt destul de diverse și se întind pe diferite domenii.
Cuprins
Întrebări și răspunsuri la interviu pentru dezvoltatori front-end
să ne uităm la cele 27 de întrebări cele mai adresate pentru interviurile pentru dezvoltatori front-end. Parcurgeți acest articol acum și marcați-l pentru mai târziu - pentru a-l revizui înainte de data interviului!
1. Ce este DOCTYPE și ce face?
DOCTYPE este asociat cu DTD (Document Type Definition) și reprezintă tipul de document. Acest lucru permite dezvoltatorilor să informeze browser-ul despre versiunea de HTML utilizată în documentul specific. De exemplu, declarația pentru HTML 4 va fi – <!DOCTYPE HTML4>.
2. Care este relevanța etichetelor meta în HTML?
Metaetichetele se află în interiorul etichetei <head> și oferă metadatele despre întregul document HTML. Aceștia îndeplinesc sarcina de a specifica specificații precum setul de caractere ale paginii, descrierea paginii, limba paginii, numele autorului paginii etc. Iată un exemplu de utilizare a etichetelor meta:
<!DOCTYPE html>
<html>
<cap>
<meta charset="utf-8″>
<meta name="viewport” content="width=device-width, initial-scale=1″>
<meta name="Keywords” content="Întrebări de interviu pentru dezvoltatori front-end, CSS, HTML, JavaScript">
<title>Întrebări și răspunsuri la interviu frontal</title>
</cap>
<corp>
</corp>
</html>
3. Ce înțelegeți prin Lazy Loading?
Încărcarea leneră este o tehnică de încărcare a conținutului în browser în funcție de nevoile utilizatorului. Acest lucru optimizează utilizarea resurselor și utilizarea serverului. Un exemplu real în acest sens poate fi văzut cu aplicațiile de comerț electronic precum Flipkart sau Amazon. Atunci când căutați un anumit produs pe aceste site-uri, veți vedea doar detaliile (preț, poză, caracteristici cheie) pentru elementele disponibile doar în primul rând. Apoi, pe măsură ce derulați în jos, elementele de mai jos continuă să se încarce la nevoie.
4. Ce știi despre Coerciție în JavaScript?
Coerciția este o metodă de conversie a tipului de date al unei variabile. Folosind constrângerea, puteți converti un obiect într-un boolean, un șir într-un număr și așa mai departe. Iată o bucată de cod pentru a explica asta mai bine:
var x= 23;
var y = String(x);
tip de(x)
tip de(y)
Ieșirea pentru acest cod va fi Number și String, ceea ce implică faptul că tipul de date al variabilei x este Number, iar după constrângere, tipul de date se schimbă în String.
JavaScript acceptă două tipuri de constrângere:
- Implicit: în aceasta, JavaScript însuși va schimba tipul de date al variabilei.
De exemplu: var x = 10;
var y = x + '01';
În acest caz, valoarea lui y va fi „1001”, iar tipul de date va fi String. JavaScript convertește implicit tipul de date Number al lui x în String pentru a-l concatena la un șir nou „01”, rezultând „1001” ca rezultat final în variabila y.
- Explicit: constrângerea explicită necesită ca dezvoltatorul să schimbe în mod deliberat tipul de date folosind funcții încorporate, cum ar fi Number(), Boolean(), String și altele.
De exemplu: var x = 12;
var y = String(x);
În codul de mai sus, tipul de date al variabilei x a fost modificat în mod explicit de la Number la șir.
5. Ce înțelegeți despre Variable Scope în JavaScript?
Domeniul de aplicare al variabilei este utilizat pentru a seta regiunea sau domeniul de aplicare al controlului oricărei variabile dintr-un anumit program JavaScript. Există două tipuri de domeniu variabil în JavaScript:
- Domeniul de aplicare local: domeniul de aplicare local implică faptul că accesibilitatea și disponibilitatea acelei variabile sunt limitate la funcția în care este definită.
De exemplu:
funcția sum() {
var x = 5;
var y = 2;
}
funcția și Suma()
{
var z = x+y;
}
În codul de mai sus, cea de-a doua funcție nu se va executa corect, deoarece variabilele x și y aparțin domeniului de aplicare al funcției sum() – sunt locale în acel domeniu. Deci, cealaltă variabilă nu are acces la x și y, așa că această funcție va fi incorectă.
- Domeniul de aplicare global: domeniul de aplicare global este pentru variabilele care sunt definite în afara tuturor funcțiilor. Într-un astfel de caz, orice funcție poate accesa variabila.
De exemplu:
var x = 2; // este o variabilă globală
funcția sum() {
var z = 3;
var y = x + z;
}
Deoarece variabila x are un domeniu de aplicare global în codul de mai sus, funcția sum() are acces la ea. De aceea variabila y primește valoarea 5 (x+z), iar această funcție rulează conform așteptărilor.
6. Pentru ce este folosit Node.JS?
Node.JS este un mediu de rulare JavaScript care este de natură open-source. Permite fără probleme executarea codului JS pe serverul însuși. Înainte de Node.JS, codul JavaScript rula pe browser, dar NOde a schimbat acest lucru complet. Astăzi, Node.JS este utilizat pe scară largă în dezvoltarea full-stack pentru a gestiona partea de server. Acest lucru permite dezvoltatorilor să lucreze folosind un singur limbaj (JavaScript) în toate capetele aplicației web (folosind stiva MEAN, de exemplu, puteți face dezvoltare full-stack folosind doar limbajul JS, cadre diferite!)
7. Explicați NPM
Prescurtare pentru Node Package Manager, NPM este un instrument de pachet pentru Node.JS. Oferă un depozit online pentru proiectele Node și un utilitar de linie de comandă pentru gestionarea și lucrul cu diferite pachete. Pentru a accesa sau utiliza orice pachet Node.JS anume, NPM poate fi invocat și utilizat.
8. Cum funcționează serverul cu pagini web sau aplicații care au conținut multilingv?
Atunci când un utilizator accesează aceste site-uri, browserul utilizatorului trimite informații legate de alegerea limbii de către utilizator. Acest lucru se face folosind antetul Accept-Language. Serverul citește și folosește aceste informații pentru a trimite înapoi limba în limba corectă.
9. Ce este atributul data-* în HTML și este încurajat să le folosiți acum?
Atributul Data-* este folosit pentru a stoca personalizate care sunt private pentru pagina web. Acesta este folosit pentru a ajuta dezvoltatorii să depaneze site-ul web sau să facă modificări private. Utilizarea atributelor data-* nu este încurajată, deoarece acum este posibil să faceți același lucru doar folosind consola de inspectare în browser.
10. Ce este IIFE în JavaScript?
IIFE, prescurtare de la Immediately Invoked Function Expression, este o tehnică de executare a funcțiilor imediat ce sunt create. Este folosit în general pentru a popula obiecte sau variabile globale.
11. Știți despre React.JS?
Da – React este o bibliotecă JavaScript folosită pentru a construi aplicații web cu o singură pagină (UI). A fost dezvoltat de Facebook și a fost folosit în principal pentru a gestiona vizualizarea din față a aplicațiilor lor mobile și web.
12. JS/CSS extern sau JS/CSS inline – care ar trebui să fie preferat și de ce?
Codarea inline mărește dimensiunea documentului, ceea ce duce la o execuție mai lentă a codului. Cu codarea inline, browserul utilizatorului pierde capacitatea de a stoca în cache codul CSS și JS și de a-l stoca pentru o execuție mai rapidă. Pe de altă parte, browserul poate stoca în cache fișierele cu CSS și JS extern, ceea ce duce la îmbunătățirea timpului de încărcare a paginii.
13. Explicați utilizarea cuvântului cheie „does” în JavaScript
Conceptul de cuvânt cheie „does” este similar cu Dynamic Binding din alte tehnici de programare de nivel înalt. Este folosit pentru a se referi la obiectul cu care este asociat.
De exemplu:
var student = {
fNume: „Sam”,
lNume: „Harris”,
ID: 2123,
completeName: function() {
returnează this.fName + ” ” + this.lName;
}
};
În exemplul de mai sus, this.firstname va returna valoarea variabilei „firstName” stocată în funcția „this”, adică Sam. Funcția fullName() va returna rezultatul „Sam Harris”, concatenând numele și numele. Aceasta este o proprietate utilă atunci când aveți de-a face cu un cod mare cu funcții multiple și nume de variabile similare.
14. Ce știi despre SQL Injection?
SQL Injection este o tehnică de inserare a codului rău intenționat în formularele de intrare pentru a obține acces la baza de date SQL a site-ului web. Aceasta este una dintre cele mai practicate și cunoscute tehnici de hacking, iar orice site web care este prost proiectat și nu a luat măsuri stricte de protecție a serverului poate cădea cu ușurință pradă SQL Injection.
15. Explicați toate elementele modelului CSS Box
Modelul cutie în CSS are patru elemente:
- Conținut: acesta acoperă conținutul principal, inclusiv tot textul, imaginile și orice altceva de pe pagina web.
- Umplutură: Umplutura poate fi înțeleasă ca spațiul dintre zona de conținut și limita exterioară a paginii. Gândiți-vă la asta ca la spațiul de respirație al conținutului paginii web.
- Chenar: chenar este zona care acoperă umplutura. Este stratul exterior de căptușeală .
- Marja: Marja se află în afara graniței și este utilizată pentru a măsura distanța dintre periferia paginii HTML și limitele ecranului utilizatorului pentru a asigura orientarea corectă a paginii.
Vă rugăm să consultați imaginea de mai jos pentru a obține mai multă claritate cu privire la cei patru termeni:
16. Ce este „mixin” în CSS și cum este implementat?
Mixin este folosit pentru a seta modele reutilizabile de perechi proprietate-valoare. Autorii codului îl folosesc pentru a simplifica codul.
De exemplu:
@mixin .rounded10px {
-moz-border-radius: 10px;
}
În acest caz, „.rounded10px” poate fi folosit oriunde în codul HTML pentru a implementa instrucțiunea „-Moz-border-radius: 10px;”. Acest lucru oferă multă portabilitate și lizibilitate codului CSS.
17. Ce știi despre SASS?
SASS este prescurtarea de la Syntactically Awesome Stylesheets. Este un preprocesor pentru CSS, care este folosit pentru a optimiza codul CSS. Introduce caracteristici precum reguli imbricate, mixuri, variabile, importuri inline și multe altele pentru a organiza codul CSS într-un mod mult mai bun și pentru a utiliza mai multe coduri CSS la unison, folosind conceptele matematicii. Browserul nu poate executa fișiere SASS, așa că acestea trebuie mai întâi convertite în CSS înainte de a fi trimise către browser.
18. Faceți diferența între cookie, stocarea locală și stocarea sesiunii.
Cookie-urile, stocarea locală și stocarea sesiunii sunt trei moduri prin care browserul stochează informații pentru o procesare și o recuperare mai rapidă. Consultați tabelul de mai jos pentru a obține o înțelegere cuprinzătoare a modului în care aceste trei tehnici diferă în funcție de diferite valori.
Metric | Cookie | Stocare locală | Stocarea sesiunii |
Data expirarii | Nici unul. Dar poate fi distrus manual de utilizator sau setat de dezvoltator pentru site-ul propriu. | Nici unul. | Expiră automat la sfârșitul fiecărei sesiuni. |
Persistență în mai multe sesiuni | Depinde dacă dezvoltatorul a stabilit un timp de expirare sau nu. | Da, acest lucru persistă în mai multe sesiuni. | Nu, aceasta este distrusă automat, astfel încât să nu persistă între sesiuni. |
Comunicarea cu serverul | Trimis automat la antet prin „Cookie Header”. | Nicio comunicare cu serverul. | Nicio comunicare cu serverul. |
Capacitate de stocare | 4 kb | 5MB | 5MB |
| Accesibilitate | Toate ferestrele | Toate ferestrele | Doar aceeași filă |
Metric
Cookie
Stocare locală
Stocarea sesiunii
Data expirarii
Nici unul. Dar poate fi distrus manual de utilizator sau setat de dezvoltator pentru site-ul propriu.
Nici unul.
Expiră automat la sfârșitul fiecărei sesiuni.
Persistență în mai multe sesiuni
Depinde dacă dezvoltatorul a stabilit un timp de expirare sau nu.
Da, acest lucru persistă în mai multe sesiuni.
Nu, aceasta este distrusă automat, deci nu persistă între sesiuni.
Comunicarea cu serverul
Trimis automat la antet prin „Cookie Header”.
Nicio comunicare cu serverul.
Nicio comunicare cu serverul.
Capacitate de stocare
4 kb
5MB
5MB
Accesibilitate
Toate ferestrele
Toate ferestrele
Doar aceeași filă
19. Ce știi despre redarea progresivă?
Redarea progresivă se referă la metoda folosită pentru a crește procesul de redare a conținutului oricărei pagini web. Acest lucru este util pentru optimizarea utilizării datelor mobile pentru utilizator. Randarea progresivă include concepte precum încărcarea leneșă, HTML asincron, prioritizarea conținutului vizibil și multe altele.
20. Explicați utilizarea atributului „srcset” în eticheta <img>
„srcset” este folosit pentru redarea diferitelor rezoluții ale aceleiași imagini – pe baza diferitelor browsere sau dispozitive. Acesta este folosit pentru a îmbunătăți experiența utilizatorului și pentru a se asigura că văd cea mai bună rezoluție a imaginii referitoare la dispozitivul pe care o vizionează. Folosind srcset, ne putem asigura că browserul afișează imagini de înaltă calitate pe dispozitive și browsere cu rezoluție bună și imagini cu rezoluție scăzută pe alte dispozitive. Acesta este modul în care poate fi folosit:
<img srcset="picture_low_quality.jpg 480w,
picture_high_quality.jpg 800w”
dimensiuni=”(lățime maximă: 600px) 480px,
800px”
src="picture_high_quality.jpg">
21. Ce sunt limbajele de șablon în raport cu HTML?
Limbajul de șabloane este un limbaj substituent care ajută utilizatorii să introducă date în orice document HTML. Diverse limbaje de șabloane funcționează alături de cadrele back-end. De exemplu, Jinja este un limbaj popular de șabloane care funcționează cu cadrele Django Flask în Python. Slim este un alt limbaj de șablon folosit pentru Ruby și Rails.
22. Explicați variabila „float” în CSS.
Float este folosit pentru a poziționa un element într-un sens relativ. Acesta definește modul în care un anumit element ar trebui să „plutească” pe fereastra de vizualizare în funcție de diferite dimensiuni ale dispozitivului. Acest lucru este folosit pentru a menține capacitatea de răspuns a paginii web, iar utilizarea float este o practică recomandată.
23. De ce sunt folosite etichetele <span> și <div>?
Eticheta <span> este folosită mai ales pentru elementele inline, în timp ce eticheta <div> este folosită pentru blocuri. Aceste etichete nu au semnificații inerente, dar pot fi folosite pentru a specifica un bloc sau o bucată de cod inline într-un document HTML pentru a-l stila sau formata diferit și pentru a avea un control mai mare asupra acestuia. De exemplu:
<div id="info”>
<p>Luați legătura cu <span class="name”>upGrad</span> pentru <span class="courses”> cursuri de dezvoltare front-end și full-stack</span></p>
</div>
În fragmentul de cod de mai sus, am definit două bucăți de <span>-uri. Unul este pentru nume (upGrad), iar celălalt este pentru cursuri. În acest fel, avem mai mult control asupra acestor două bucăți de cod și le putem formata în alte moduri pentru a le face să iasă în evidență.
24. Prin ce diferă MongoDB de MySQL?
MySQL este un SGBD relațional care utilizează SQL ca limbaj pentru a gestiona toate operațiunile legate de bazele de date. Fiind RDBMS, folosește structuri asemănătoare tabelelor pentru a stoca și manipula datele. Pe de altă parte, MongoDB este o bază de date NoSQL care utilizează un format de fișier plat asemănător JSOL pentru a stoca toate datele. Pentru a modifica elemente în MongoDB, dezvoltatorii trebuie să folosească MQL (MongoDB Query Language).
25. Ce știi despre funcțiile anonime din JavaScript?
În scenariile normale, mai întâi este definit numele funcției și apoi corpul funcției. În funcțiile anonime, pe de altă parte, numele funcției nu este definit. Sunt utilizate doar o variabilă și operatori de atribuire, iar funcția este stocată ca obiect. Apoi, folosind variabile, vom putea invoca funcția. De exemplu:
var add = function(a,b){ console.log(a+b)}
adaugă (4,5);
În exemplul de mai sus, funcția este anonimă și tipărește rezultatul corect 9.
26. Când se utilizează AJAX?
AJAX este scurt de JavaScript asincron și SML și facilitează comunicarea dintre serverul web și browserul utilizatorului. AJAX nu este un limbaj de programare. Este folosit pentru a încărca și trimite date către și de la browserul utilizatorului chiar și după ce pagina se încarcă. Este un instrument puternic pentru a actualiza datele de pe pagina utilizatorului fără ca acesta să fie nevoit să reîmprospăteze pagina. În esență, AJAX permite reîmprospătarea și actualizarea paginii în timp real.
27. Cum v-ați asigura că site-ul sau aplicația dvs. sunt ușor de utilizat?
Pentru a se asigura că site-ul web sau aplicația web este complet ușor de utilizat, dezvoltatorii front-end trebuie să lucreze alături de designeri UX (User Experience) pentru a conceptualiza paginile web care rezolvă problemele publicului căruia îi este adresată. Scopul este de a crea o experiență centrată pe utilizator, cu un flux de design optim, conținut și structură a paginii pe diferite browsere și ecrane.
În concluzie
Întrebările de mai sus au scopul de a vă oferi o imagine de ansamblu asupra gamei de întrebări pe care le poate acoperi interviul dvs. Deoarece front-end-ul este o sarcină care încorporează diferite abilități precum proiectare, HTML, CSS, JavaScript, AJAX și multe altele, vi se vor pune întrebări despre toate abilitățile relevante.
Dacă nu ai încredere în abilitățile tale sau vrei să crești ca dezvoltator front-end, ești la locul potrivit. La upGrad, oferim programe de inginerie software care vă ghidează prin întregul proces de dezvoltare front-end și back-end și vă oferă toate instrumentele și abilitățile necesare pentru a excela în lumea dezvoltării full-stack. Înscrie-te și începe-ți călătoria astăzi!
Ce acoperă dezvoltarea front-end?
După cum sugerează și numele, dezvoltarea front-end se ocupă de front-end-ul sau ecranul de randare al oricărei aplicații web. Pentru asta, sunt necesare abilități și cunoștințe de HTML, CSS, JavaScript și cadrele sale, AJAX, managementul serverului.
Cine poate obține un loc de muncă în dezvoltarea front-end?
Practic, oricine este interesat de dezvoltarea web și cu simțul designului poate dobândi abilitățile necesare pentru a începe și a excela într-o carieră în dezvoltare web.
Pot dezvoltatorii front-end să devină mai târziu dezvoltatori full-stack?
Categoric. Pe măsură ce dobândiți mai multă experiență ca dezvoltator front-end, veți începe încet să preluați și concepte full-stack, deoarece veți lucra și în colaborare cu dezvoltatorii back-end. Aceste cunoștințe vă vor ajuta să treceți de la un dezvoltator front-end la un dezvoltator full-stack.