FAQ: Learn HTML: Script - Async attribute

This community-built FAQ covers the “Async attribute” exercise from the lesson “Learn HTML: Script”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Async attribute

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

In JavaScript Interactive Websites attribute async, I am not seeing the effect of the async attribute, I added to the turnBlue.js . the codeacademy logo is still pink. can someone explain why

1 Like

I guess according to the explain, the Codeacademy logo is supposed to be yellow but it starts with pink.
@oreva20 I saw the logo in blue once after hit the run many times

yes, I did see the logo in blue once.

I think that the CSS file is loading AFTER the scripts are run. I think that is why we are seeing pink.

In this exercise, THE SCRIPT ELEMENT: Async attribute, I see that the file style.css comes first than the file turnBlue.js inside the HTML document. If, as it was said before, the HTML parser, analyzes the document sequentially, why does .css prevail over .js?

1 Like

A CSS document will probably be lighter than a JS script so rather have your site looking as it should before rolling out animations and whatever else maybe in your js file.

So js will take longer to load which would delay your whole site, if the HTML & CSS is loaded first then there is no unnecessary delays.

1 Like

I would think that defer works even better because what if the script is downloaded so quickly that before HTML parsing the actual

, it’s been executed before HTML parser start rendering CSS file.
Then in this case the final rendered result is derterminated by CSS.

@zainabrawat, I think rui_melim, by saying

He may be referring to the fact that, as long as we don’t add async, the logo never turns blue. At least that’s how it behaves for me. I tried running the code before adding async and the logog remained pink, as if the .js script was never executed - or it was, but the CSS styling somehow got the upper hand? Also when I remove the async attribute and run the code again, the logo turns back from blue to pink.