Frontend Interview Questions 2025 (Part 3)

hi folks here we go senior frontend interview questions now Bon are you ready yes let's go very important question comes up uh every almost in every frontend engineering interview I've been doing what is critical CSS and how do we extracted in a on a web page uh sure so critical CSS is the name we give to the CSS Styles needed to display the elements uh that appear above the fold so basically imagine you land on a page and you see certain elements without scrolling that would be uh the above default elements in the critical CSS

it's all the CSS we need in order to make those element uh position and to style them in order to extract it uh you can use certain module bundle plugins like I used in the past the weback plugin it will basically render the application with paper a headless browser so in the background it will render the application for the specific width and then it would use browser mechanism like the CSS coverage to extract the CSS ties that you need to render a specific width once you extracted critical CSS you can use it to improve the

performance of your application by deferring all the CSS except the critical CSS because CSS is a unique name space the browsers really try to collect all the CSS and in PR it and render it before they move on with the HTML part so if we have a lot of CSS that uh that can take a long a very long time and decrease the application speed so if we are able to separate that we can improve uh drastically the the performance cool now we're going to move on with a accessibility question have you ever heard about

the area attributes in HTML and when are they useful so most of the times we just want to stick to semantic HTML that's the easiest and best way to make something accessible but there are some edge cases where we just cannot use semantic HTML because of design constraints or because we're building a specific widget and in that case you can use area attributes to specify semantic um accessibility roles for non-semantic HTML elements like div or span I would definitely use them if you have accessibility constraints and you cannot use semantic HTML talking about semantic TXS

in HTML what are those footer or header or image those are all semantic tags they have meaning and the accessibility tools understand them cool now we're going to move on can you explain what the defer and asking attributes do when added to an HTML script tag um sure so we use defer and a sync to control when a certain script tag will be loaded and interpreted um defer will basically download the script in the background as we Ender the HTML so we can paralyze but interpret the script uh just before the D content loaded event

so just when it finishes the HTML then it goes with that script whereas I think it's pretty um it's pretty parallel so it just really downloads the script and interprets it as soon as possible and um it doesn't really care about when the HTML is rendered it can finish before or after so it doesn't really matter and as far as I recall es6 modules are deferred by default in in most web browsers understood now why do we want to use this defer and assing attributes in the first place when uh loading a script in HTML

uh so the main reason to do that is to avoid scripts blocking the critical rendering pad and have much better web performance uh much better initial loading and so we pretty much take all of our non-critical JavaScript all of the JavaScript that we don't really need in the initial load and we can push it down so it doesn't block the the rendering of the page cool now we're going to move on to an an es6 question can you explain the difference between a normal Import in es6 and a dynamic import basically Dynamic Imports work more

like the commonjs Imports like a function you can think of it as a function and it will just um import or fetch over the network than module whereas normal Imports are static Imports so they get interpreted um at build time and the biggest difference is that with static Imports okay normal Imports you can apply three shaking you can infer typescript types so you have all the advantages of static analysis whereas with Dynamic inputs you do not have all those advantages but because they are like a function you can use them in code so you can

for example use them inside if statements or switch statements so they allow you to Lazy load components okay so lazy loading certain components right yes and you can also load certain modules uh depending on a user action so you could for example if you only use load Dash when the user does something you can add an uh Dynamic import that Imports low Dash when the on click event happens so you don't need to load load Dash in the initial load which makes that initial load much faster and it only loads that code on demand awesome

cool um now we're going to move on with a performance web performance question the question is have you heard of the CLS metric and can you explain it so CLS it's one of the core web vitals I think it stands for cumulative layout shift and it's basically the layout shift that happens as we load the page so normally what would happen is we render our HTML and then maybe some Styles arrive too late maybe some fonts or images arrive too late and if we haven't optimized our page well the user will perceive that as a

switch and layout it happens sometimes you go to a slow page all of the sudden an image is going there at the top and they push everything to the bottom and maybe you clicked on something but you end up clicking on something else uh so that would be the cumulative layout shift how would you fix this what would be the first steps to fix a bad CLS score the first thing I would do is probably use some debugging tool to see which element has a lot of CLS uh the new Google Chrome performance Insight does

a very good job at it and they pinpoint exactly the div that's moving and then based on that you mention images but there can be many different causes it can be the font it can be asss loading slower then you have different solutions so for example if it would be if an image is the main cause I would add some fixed width and height um uh attributes to this image and then the browser would know ahead of time hey this image will be this big so it would render stuff around it and you w have

CS if the issue with it's with fonts for example I would try to optimize the font loading and you can also uh specify what would be the height of the fonts coming again versus the the web browsers defaults and then you have now CLS so again depending on the cause you'd have Solutions if it's CSS Implement uh critical CSS and only load the CSS we need awesome sounds good and uh final question for today I want you to explain the difference between essential State and derived state in a frontend application as the name says the

I State it's usually State we can calculate based on other state and essential state is state that changes independently and we cannot really calculate or deduct the value from other state variables it's either coming from user interactions or data fetching over the network so just to give you maybe an example if you have a checkout page I would say essential state is the items in the card whereas theive State it's anything we need to compute based on those items like the total price the net price the price with tax how many items you have in

the card all that would be theive state it doesn't really change independently and we can derive or compute the value based on the existing essential State makes sense awesome B then well um thank you for today for the for you people watching us is there any question any interview question that you want B and NY to address in this videos then just drop it in the comments and finally if you want B and I to personally Mentor you for you to close your gaps and become that competent confident senior engineer check the links uh in

the descriptions as well you can schedule a quick chat with me find out if there's a match if there's a fit and you know I will have to you know understand your situation better see if you could be a fit and see if we could help you you can apply in the comments with that being said we will see you in the next one