29 Front End-intervjufrågor och svar (2023)

Varför skulle du behöva känna till alla de vanligaste frågorna och svaret på front-end-utvecklarintervjuer?

I dagens teknikvärld bör en front-end-utvecklare vara tekniskt kunnig och skicklig för att översätta kundens behov till kreativa och interaktiva webbapplikationer och mobilappar där utvecklare behöver särskilda färdigheter för det senare. Att få dessa färdigheter kräver frontend utvecklingsträning. Idag letar många toppföretag efter att anställa för front-end utvecklarpositioner så att dessa utvecklare kan hjälpa dem att bygga eleganta, intuitiva, lyhörda och interaktiva användargränssnitt som fungerar bra på olika enheter. Men problemet är att de flesta kandidater blir förvirrade eller inte är säkra på vilken typ av intervjufrågor de måste förbereda för en front-end utvecklingsintervju som så småningom kommer att hjälpa dem att bli anställd.

Det är ganska enkelt att upptäcka olika praxisfrågor, men det är svårt att välja rätt bland dessa alternativ.

Att veta rätt frågor är avgörande för alla som vill få en front-end utvecklare jobbintervju.

Oavsett om du är nybörjare eller en erfaren kandidat, kolla in listan över de främsta frågorna och svaren på utvecklarintervjuerna nedan. Denna artikel hjälper dig att lära känna båda frågorna och vara beredd, så att du kommer att lyckas i din intervju.

Frågor och svar om intervju med utvecklare

Låt oss se vilka viktiga front-end-intervjufrågor man behöver förbereda sig för.

1. Vilka är de tekniska och ytterligare färdigheter som krävs för att vara en front-end-utvecklare?

En bra frontend-utvecklare måste ha en fungerande kunskap om:

• html
• CSS
• jQuery
• Javascript

Bortsett från de ovan nämnda tekniska färdigheterna bör en front-end-utvecklare ha de nedan nämnda "bra att ha" -färdigheterna:

• Erfarenhet av något av de mest populära Content Management Systems (CMS) som WordPress, Drupal och Joomla och till och med de nyare som Ghost
• Kunskap om testning av webbläsare
• Kunskap om testning över olika enheter
• Kunskap om OOPS och PHP.
• Grundläggande kunskaper om SEO och verktyg som Adobe Photoshop och CSS3 och HTML5, och olika Javascript -tekniker som till exempel native script, Angular, som används för att presentera webbaserad information för slutanvändare.

2. Förklara hur du ser till att din webbdesign är användarvänlig och vilka steg skulle du vidta för att uppnå detta?

En frontend-utvecklare måste kommunicera ofta och arbeta tillsammans med UX-designers (User Experience) för att föreställa sig och konceptualisera en webbsida som designar en användarcentrerad upplevelse, testa webbplatsen med användare för att säkerställa optimal design och säkerställa att webbsidan eller webbplatsen är optimerad för mobilsurfning. Om vi ​​inte har en UX-designer till hands skulle vi köra användartester eller användarinspelningar som Hotjar för att säkerställa att det inte finns några UX-blockerare i webbdesignen eller webbappen vi utvecklar.

3. Beskriv kaffeskript?

CoffeeScript är ett litet programmeringsspråk som kompileras till JavaScript. Det är ett försök att använda de bästa delarna av Javascript på ett enkelt sätt. Det hjälper också utvecklare att skriva JavaScript-kod bättre genom att presentera användaren med en mer konsekvent syntax och köra JavaScript-språket ovanligt.

4. Förklara vad som är den tydliga egenskapen i CSS?

Smakämnen clear egenskap anger på vilka sidor av ett element flytande element som inte får flyta. Den används när du inte vill att ett element ska lindas runt ett annat element, till exempel en flottör.

5. Beskriv när skulle du använda CSS float-egenskapen?

Float används när du vill att ett element på din webbsida ska skjutas åt höger eller vänster och låta andra element visas runt det.

6. Vad är en återuppringningsfunktion?

En återuppringningsfunktion är en funktion som överförs till en annan funktion som ett argument, som sedan anropas inuti den yttre funktionen för att slutföra någon form av rutin eller handling.

7. Hur strukturerar du källkoden så att den blir lätt att använda av dina kollegor?

En frontend-utvecklare måste använda vanliga standarder och förklara hur de använder kodorganisation och kommentarer. De måste förklara hur de använder anteckningar i sin programmeringsprocess för att förklara de steg de har tagit, och på så sätt säkerställa effektiviteten i förståelsen bland samarbetspartners. Om det finns standarder för att kommentera eller dokumentera kod i företaget, skulle behöva följa dessa standarder.

8. Förklara vad som är skillnaden mellan klass och prototyp arv i Javascript?

Arv i JavaScript skiljer sig från de flesta andra programmeringsspråk. Objektsystemet i JavaScript är prototypbaserat, inte klassbaserat. Objekt i JavaScript är bara en samling av ett namn (nyckel) och värdepar. När det gäller arv har JavaScript bara en konstruktion: objekt. Varje objekt har en privat egendom som innehåller en länk till ett annat objekt som kallas dess prototyp.

9. Kan du förklara skillnaden mellan synlighet: dold; och visa: ingen?

Med Synlighet: Dolda är objektet inte synligt men förbrukar det ursprungliga utrymmet. Med display: Ingen; objektet är dolt och tar inget utrymme.

10. Förklara vad som är skillnaden mellan ett värdobjekt och ett inbyggt objekt i Javascript?

Värdobjekt som är objekt som levereras av en viss miljö. Native Objects är inbyggda standardobjekt som definieras av Javascript. 

11. Vad är skillnaden mellan XHTML och HTML?

HTML och XHTML är båda markeringsspråk där webbsidor och webbplatser är skrivna. Huvudskillnaden mellan de två är att HTML-syntax är SGML-baserad medan XHTML-syntax är XML-baserad.

12. Förklara hur variabler skiljer sig åt i CoffeeScript jämfört med JavaScript?

Innan JavaScript, innan vi använder en variabel, måste vi deklarera och initialisera den (tilldela värde). Till skillnad från JavaScript, när du skapar en variabel i CoffeeScript, finns det inget behov av att deklarera den med var nyckelordet. Vi skapar helt enkelt en variabel bara genom att tilldela ett värde till en bokstav som visas nedan.

13. Kan du berätta för oss vad är fördelarna med CoffeeScript jämfört med JavaScript?

• Lätt att förstå - CoffeeScript är en förkortad form av JavaScript, dess syntax är ganska enkel jämfört med JavaScript. Med hjälp av CoffeeScript kan vi skriva rena, tydliga och lättförståeliga koder.

• Skriva less göra mer - För en enorm kod i JavaScript behöver vi relativt mycket less antal rader med CoffeeScript.

• Pålitlig - CoffeeScript är ett säkert och pålitligt programmeringsspråk för att skriva dynamiska program.

• Läsbar och underhållbar - CoffeeScript tillhandahåller alias för de flesta operatörer vilket gör koden läsbar. Det är också enkelt att underhålla programmen skrivna i CoffeeScript.

• Klassbaserat arv - JavaScript har inte klasser. Istället för dem ger det kraftfulla men förvirrande prototyper. Till skillnad från JavaScript kan vi skapa klasser och ärva dem i CoffeeScript. Utöver detta ger det också instans- och statiska egenskaper samt mixins. Den använder JavaScript: s ursprungliga prototyp för att skapa klasser.

• Inget nyckelord - Det finns inget behov av att använda var-nyckelordet för att skapa en variabel i CoffeeScript, så vi kan undvika oavsiktlig eller oönskad retardation av omfånget.

• Undviker problematiska symboler - Det finns inget behov av att använda de problematiska semikolonerna och parentesen i CoffeeScript. Istället för lockiga hängslen kan vi använda mellanslag för att differentiera blockkoder som funktioner, slingor etc.

• Omfattande biblioteksstöd - I CoffeeScript kan vi använda JavaScript-biblioteken och vice versa. Därför har vi tillgång till en rik uppsättning bibliotek när vi arbetar med CoffeeScript. 

14. Förklara vad är skillnaden mellan en GET- och POST-begäran?

Både en GET- och POST-metod används för att överföra data från klient till server i HTTP-protokollet. Huvudskillnaden mellan POST- och GET-metoden är att GET bär förfrågningsparametrar bifogade i URL-strängen medan en POST bär begäranparameter i meddelandetexten vilket gör det till ett säkrare sätt att överföra data från klient till server i HTTP.

15. Kan du berätta för oss när du skulle använda CSS clear-egenskapen?

CSS clear-egenskapen används när du vill att ett element till vänster eller höger om `flytande element inte ska lindas runt det.

16. Beskriv vad som är skillnaden mellan Null och Odefinierad?

I JavaScript, undefined betyder att en variabel har deklarerats men ännu inte har tilldelats något värde. null är ett uppdragsvärde. Den kan tilldelas en variabel som en representation av inget värde.

17. Förklara vikten av HTML-DOCTYPE?

DOCTYPE är en instruktion till webbläsaren om vilken version av markeringsspråket sidan är skriven i. DOCTYPE-deklarationen måste vara det första i ditt HTML-dokument innan märka. Doktypdeklarationen pekar på en dokumenttypsdefinition (DTD). Doktypen innehåller markeringsspråkregler så att en webbläsare kan tolka innehållet korrekt.

18. Förklara skillnaden mellan cookies, lagring av sessioner och lokal lagring?

Cookies tillåter applikationer att lagra data i en klients webbläsare. Sessionslagringsegenskapen tillåter applikationer att lagra data tills webbläsarfönstret stängs, men dessa hålls vanligtvis på servernivå (inte på webbläsaren). Lokal lagringsegenskap tillåter applikationer att lagra data utan ett utgångsdatum.

19. Beskriv vad som är ett tråd-lokalt objekt i Python Flask?

Ett tråd-lokalt objekt är ett objekt som lagras i en dedikerad struktur, kopplad till det aktuella tråd-id. Flask använder lokala trådar föremål internt så att användaren inte behöver skicka objekt från funktion till funktion inom en begäran om att hålla sig trådsäkra. Trådens lokala lagring utförs inom den aktuella tråden. Detta tillvägagångssätt är användbart, men det behöver ett giltigt begärandekontext för beroendeinjicering eller när du försöker återanvända kod som använder ett värde som är kopplat till begäran.

20. Förklara syntaxen och hur man använder en funktion som klass?

function functionName(name){
this.name = name;
}
// Creating an object
var variable_name = new functionName(“Collective”);
console.log(variable_name.name); //Collective

21. Vad är lat lastning?

Lazy loading (även kallad on-demand-laddning) är en optimeringsteknik för onlineinnehåll, vare sig det är en webbplats eller en webbapp. I stället för att ladda hela webbsidan eller bilderna och återge den till användaren på en gång som vid massbelastning, hjälper begreppet lat laddning att endast ladda det önskade avsnittet och fördröja det återstående tills det behövs av användaren (till exempel när användaren rullar till önskad bild).

22. Förklara skillnaden mellan klasser och ID?

Klasser och ID-väljare, båda används som krokar för CSS-stilar. ID används vanligtvis för att utforma element som bara visas en gång på en sida, till exempel en instans av en navigeringsmeny. Klasser används för att utforma olika element på samma sätt, som närvaron av länkar, knappar, formulär, text etc. 

23. Vad är Event Delegation?

Händelse delegering är processen att använda händelseutbredning för att hantera händelser på en högre nivå i DOM snarare än det element som händelsen härstammar från. Det gör att du kan undvika att lägga till händelserlyssnare i vissa noder. istället kan du lägga till en enskild händelselyssnare till ett överordnat element. 

24. Hur kan du öka sidans prestanda?

• Rensa upp HTML-dokumentet
• Minska externa HTTP-förfrågningar och externa skript
• Använd komprimerad och mindre bild
• Skjut upp JavaScript till botten av sidan
• Använd de senaste versionerna av kod som PHP
• Förminska CSS, JavaScript, HTML
• Använd CDN och Caching
• GZip eller Brotli Komprimera innehåll
• Utnyttja caching i webbläsaren 

25. Vad är Ajax?

AJAX (Asynchronous JavaScript and XML) tillåter applikationer att transportera data till / från en server asynkront utan att uppdatera sidan. Det betyder att det troligtvis kommer att uppdatera delar av en webbsida utan att ladda om hela sidan. Till exempel kommer dina nya Gmail-meddelanden och markeras som nya även om du inte har uppdaterat webbsidan. 

26. Vad är skillnaden mellan Block, Inline, Inline-block och Box-dimensionering?

• Inline är standard. Till exempel: Ett inbyggt element är .
• Block visar som ett blockelement, till exempel eller .
• Inline-block visar ett element som en inline-nivå blockbehållare.
• Box-storlek visar webbläsarens storlek egenskaper.

27. Vad är Event Bubbling?

Event bubbling är en typ av händelseutbredning där händelsen först utlöses på det djupaste målelementet. Det gör att alla händelser i underordnade noder automatiskt skickas till sina föräldernoder. Fördelen med denna metod är prestanda eftersom koden endast kräver att korsa DOM-trädet en gång.

28. Förklara vad som är en stängning? 

A förslutning är en kombination av en funktion buntad (bifogad) med referenser till dess omgivande tillstånd ( lexikalisk miljö). En stängning ger dig tillgång till en yttre funktions räckvidd från en inre funktion. I JavaScript skapas stängningar varje gång en funktion skapas, vid tidpunkten för att skapa funktioner. 

29. Förklara hur du hanterar webbläsarspecifik stilkompatibilitet?

Det finns flera sätt att kringgå detta. Det enklaste sättet att gå vidare är att använda ett villkorligt uttalande i HTML-taggen. På detta sätt kan du känna igen webbläsaren och ladda in ett externt formatmall.

Slutsats

Det här är några av de viktigaste intervjufrågorna och svaren för frontend-utvecklare. De hjälper dig med din förberedelse inför en anställningsintervju inom front-end-utveckling. Om vi ​​har missat några andra viktiga front-end-utvecklarfrågor, låt oss veta i kommentarerna nedan.

Om författaren

Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/e-post: david@collectiveray.com

David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.