↓Skip to main content

Front End Job Interview General Questions and Answers

··5 mins

I recently found a repo concerning Front End development questions used in an interview, and thought it would be interesting to write how I would answer the questions down. I figured it would help me solidify some concepts, and hopefully help someone later down the line as well.

I also have a few other posts concerning interview questions based on the same repo.

General Questions #

I did not answer some of the questions from here, as they were more personal, and instead concentrated on the questions that would require more domain-specific knowledge.

If you have 5 different stylesheets, how would you best integrate them into the site? #

I’d preferably want to concatenate, and preferably minify, those stylesheets if they were going to be used on every page in the webpage/application. It would save multiple HTTP requests, and in general would be more performant.

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

One way to reduce the number of components in the page is to simplify the page’s design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times. [1]

CSS Tricks provides some information on why you may need more than one CSS file - especially if the application is bigger and uses different templates. But generally, most sites only really need one CSS file. So, use a build tool such a Gulp or Grunt and save yourself some effort.

Kyle Simpson has some great information about HTTP requests and how to balance them.

Soon with HTTP/2 this won’t matter as much. But for now the above information is still pertinent.

Can you describe the difference between progressive enhancement and graceful degradation? #

With progressive enhancement you start with a barebones web structure, that will run in older browsers, and then build on that structure with enhancements that come with more modern day browsers.

Graceful degradation is the opposite. You start building with modern day browsers, and then check to see how your application is performing on older browsers, and then make adjustments from there.

How would you optimize a website’s assets/resources? #

There are some general optimizations that can be done for most sites. As mentioned before, we can concatenate files, as well as minify them to reduce the amount of HTTP requests and file size.

  • Use a CDN to serve static resources
  • Leverage the browsers caching with Cache Headers/Etags, etc.
  • Combine images into CSS sprites to save on HTTP requests.
  • Load Javascript asynchronously, and defer to the bottom of the page to prevent render-blocking.
  • Prefetch/preload DNS, pages, and assets to reduce load time on subsequent pages.
  • Split code bundles into separate, smaller bundles and then load them in with XHR requests.

How many resources will a browser download from a given domain at a time? #

Max Number of default simultaneous persistent connections per server/proxy:

Firefox 2:  2
Firefox 3+: 6
Opera 9.26: 4
Opera 12:   6
Safari 3:   4
Safari 5:   6
IE 7:       2
IE 8:       6
IE 10:      8
Chrome:     6

Name 3 ways to decrease page load (perceived or actual load time) #

  • Use progress bars or loading screens to help transition users.
  • Prefetch or preload data
  • CSS at the top of the page - Javascript at the bottom. Use parallelization when possible.
  • See previous answers for more solutions

Explain the importance of standards and standards bodies #

So we’re not in the wild west of the web world. The web used to be quite a different place, before standards came in to the picture. You’d be lucky to have a site functioning the same way across multiple browsers. Which is why standards came into place - so we’re all not running around with our heads cut off. Everything is not completely standardized, but at least the web heading even more so in that direction.

What is Flash of Unstyled Content? How do you avoid FOUC? #

A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser’s default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift is quite visible and distracting.

How to fix it? #

Just one LINK element or SCRIPT element inside a document’s HEAD element will prevent a flash of unstyled content.

Explain what ARIA and screenreaders are, and how to make a website accessible #

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications (especially those developed with Ajax and JavaScript) more accessible to people with disabilities.

A screen reader is a software application that attempts to identify and interpret what is being displayed on the screen (or, more accurately, sent to standard output, whether a video monitor is present or not).

From W3.org:

  • Images & animations: Use the alt attribute to describe the function of each visual.
  • Image maps: Use the client-side map and text for hotspots.
  • Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
  • Hypertext links: Use text that makes sense when read out of context. For example, avoid “click here.”
  • Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
  • Graphs & charts: Summarize or use the longdesc attribute.
  • Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.
  • Frames: Use the noframes element and meaningful titles.
  • Tables: Make line-by-line reading sensible. Summarize.
  • Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG
↑