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

bästa jobbintervjufrågor

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 frontutvecklare vara tekniskt kunnig och skicklig för att översätta kundbehov till kreativa och interaktiva webbapplikationer. För att få dessa färdigheter krävs utvecklingsutbildning. Idag vill många toppföretag anställa ledande utvecklarpositioner så att dessa utvecklare kan hjälpa dem att bygga eleganta, intuitiva, responsiva 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äker på vilken typ av intervjufrågor de har för att förbereda sig för en front-end utvecklingsintervju som så småningom hjälper dem att bli anställda.

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.

Innehåll[Show]

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 frontutvecklare måste kommunicera ofta och arbeta tillsammans med UX (User Experience) -designers för att föreställa sig och konceptualisera en webbsida som utformar en användarcentrerad upplevelse, testa webbplatsen med användarna för att säkerställa optimal design och se till att webbsidan eller webbplatsen är optimerad för mobiltelefonsurfning.

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?

Du har nu möjlighet  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 front-end-utvecklare måste använda gemensamma standarder och förklara sin användning av 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 därigenom säkerställa effektiv förståelse bland medarbetare.

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 skulle du 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?

n 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. Lokal lagringsegenskap gör att applikationer kan lagra data utan 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? 

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 frågorna och svaren på front-end-utvecklarintervjuer. T / hey hjälper dig med din förberedelse inför en anställningsintervju i front-end utveckling. Om vi ​​har missat några andra viktiga frågor från front-end-utvecklare, låt oss veta i kommentarerna nedan.

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
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.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...