Why place a CSS filed in the header and the script file at the bottom of the page?
When a browser encountered a tag pointing to an external resource, the browser would stop parsing the HTML, retrieve the script, execute it, then continue parsing the HTML. In contrast, if the browser encountered a for an external stylesheet, it would continue parsing the HTML while it fetched the CSS file (in parallel). The purpose of the "put stylesheets at the top and scripts at the bottom" rule is that, in general, it's the best way to achieve optimal progressive rendering, which is critical to the user experience.
Hence, the widely-repeated advice to put stylesheets first – they would download first, and the first script to download could be loaded in parallel.
However, modern browsers (including all of the browsers I tested with above) have implemented speculative parsing, where the browser "looks ahead" in the HTML and begins downloading resources before scripts download and execute.
Can you describe the difference between progressive enhancement and graceful degradation?
Progressive enhancement is the practice of building basic web functionality that works in all browsers and gradually improving it over time and making it automatically available to users.
Graceful degradation is the practice of building web functionality so that it provides a certain level of UX in modern web browsers, but degrades gracefully to a lower level of UX in older browsers while still offering the core functionality.
If you have 5 different stylesheets, how would you best integrate them into the site?
By compiling them into one file. It is easier and faster to load one file than it is to load five separate stylesheets. I would import them as partials into a main stylesheets using a preprocessor like Sass. I would also consider refactoring the CSS in the respective stylesheets, to make sure my code is DRY.
From a page speed standpoint, @import from a CSS file should almost never be used, as it can prevent stylesheets from being downloaded concurrently.
What is Flash of Unstyled Content? How do you avoid FOUC?
Flash of Unstyled Content is an instance where a web page loads information with the browser's default styles prior to loading an external CSS style sheet. There are some methods of using JS to hide elements until everything is loaded, but One of the simplest ways to prevent the FOUC is by ensuring all stylesheet links are included at the very top of the header, so they are loaded by the browser first.
Name 3 ways to decrease page load (perceived or actual load time).
Reduce perceived download time: Add a some visual feedback, either a spinner or an actual progress, bar that displays during page load.
Load static content first: Ensure that static page content loads first and then load additional assets in the background afterwards.
Reduce the quantity of items to load: Eg combine all js files into a single file, all css files into a single file, etc), to reduce the number of requests that the browser needs to make.
If you jumped on a project and they used tabs and you used spaces, what would you do?
I’d use tabs, but I would also inquire as to why tabs were being used and check to see if there was any interest in switching to using spaces for new projects.
Explain what ARIA and screen readers 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.
Screen readers are what people who has disabilities use to view a page. It interprets whats being shown on screen by reading it aloud to them descriptively. This is where alt tags and good accessibility practices shine!
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.
Minify code by getting ride of comments, console.logs, and unnecessary blank space.
Optimize images and other large files that can bog the site down
Thanks for reading! Good luck smashing those interviews!