HTML Module 11
Scripts, styles, performance and security interview questions
Interview questions on scripts, styles, performance and security: warm-ups, then what each harder question tests and how a good answer starts.
Warm-up questions
Short questions with short answers, each answered in full.
-
Fresher
What is the difference between async and defer on a script element?
Questions with model answers
What each question tests, the first step of a good answer and the follow-ups to expect.
-
Fresher to mid
Two scripts in a shop's head use async: cart.js fills a cart object and analytics.js reports it. Some visitors' reports are empty, others are fine. Explain why it depends on the visitor, and change the markup so that it always works without delaying the first paint.
- What it tests
- How async and defer scripts are scheduled, why download times and engines change the order of async scripts, and choosing attributes that keep an order without blocking the parser.
- First step
- Say when each async script runs: as soon as its own file has arrived. Their order therefore follows download times, which change with the network, the cache and the browser. Scripts that depend on each other need an order that never changes, and defer and module scripts give one: they run after parsing, in document order.
- Follow-ups
-
- Would moving both scripts to the end of the body fix it?
- The analytics snippet has to stay async. How do you keep the report correct?
- How would you show the bug and the fix in three browser engines?
From the lesson Adding CSS and JavaScript to a page
Model answer, Pro. Model answers open with any pass; prices are in the notice on this page.Opening the model answers with your pass…
Model answers open with any MySmartCoPilot pass.
- Pro pass · 1 week₹79$2.99
- 30 days₹179$5.99
- 1 year₹1,699$45
One payment; a pass never renews. The price shown is the total you pay: no fees or charges are added at checkout.
Passes can’t be bought right now, so the model answers can’t be opened at the moment. If you have a pass, enter your licence key.
It also opens every other in-depth part in Learn and every Pro tool. Sales are final, except where the law gives you a right to withdraw, for example in the EU and the UK (refund policy).
In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes
-
Mid to senior
A Content-Security-Policy of script-src 'self' goes live on an admin dashboard. Two buttons stop working, nothing else breaks, and the console shows script-src-attr violations. What broke, how do you fix it properly, and which quick fixes would you turn down?
- What it tests
- Reading violation reports, how event-handler attributes fall under script-src-attr, moving them into listeners, and judging 'unsafe-inline' and 'unsafe-hashes'.
- First step
- Read the directive in the violation: script-src-attr covers event-handler attributes such as onclick. The two buttons use inline handlers, which the policy refuses to compile because it allows only script files from the page's own origin. Listeners added by those files keep working, which is why nothing else broke.
- Follow-ups
-
- When is 'unsafe-hashes' with a hash acceptable?
- The page also has an inline import map. What happens to it under this policy?
- How do you stop inline handlers from coming back?
From the lesson Adding CSS and JavaScript to a page
Model answer, Pro.In the answer:
- Model answer
- Follow-up answers
- Common mistakes
- Rubric
- Variants
- about 4 minutes