UI Developer Interview Questions and Answers Web Development

You may start by defining what a user interface is before responding. To satisfy user expectations and enable the site's efficient operation, the user interface is crucial. Through eye-catching graphics, simple design, and responsiveness, a well-done user interface improves the interaction between the user and the system. 

The visual comprehension of user interfaces is the responsibility of the UI developer, a position that combines technical expertise with design expertise. 

The functionality, convenience, and aesthetic appeal of the user interfaces are the top considerations for UI developers. 

This is a frequently asked question in UI Developer interview questions.

The performance of a website is really important. According to Google Lighthouse (available in Chrome browser) and the Think With Google website, a website's performance is great if its loading time is less than 4 seconds. A website is acceptable if the loading time is between 4 and 5 seconds. However, a website is terrible if the loading time exceeds 8 seconds. 

Even the Chrome Lighthouse test, which is available in Google Chrome, Microsoft Edge, and Chromium browsers, is useful for assessing website performance and usability. 

A UI Developer is in charge of designing the visual components that allow users to navigate around a website. A UX Developer enhances the quality of the user's engagement with the firm and its product. 

Front-end developers design the client-side of the web interface and ensure that all of the website's parts function properly. The UI Developer ensures that everything on the site is user-friendly. 

Basically, UI developer is the user interface developer while the UX developer is the front end developer. 

 These difference-based questions are common in UI developer interview questions for freshers and experienced. 

Expect to come across this popular question in UI Developer interview questions and answers.

You may enhance the performance of the page by performing the following: 

• Image size reduction 
• Delete the cache 
• lowering the number of external HTTP requests 
• Making your website mobile-friendly 
• removing extraneous widgets 

You may optimize a website's assets by doing the following: 

• Concatenation of files 
• Compression of files 
• CDN Web Hosting 
• Asset disposal 
• Code reorganization and refinement 

HTML, CSS, and JS are technologies that are interpreted by browsers. Asp.net, Java, and PHP, on the other hand, are not browser interpreted. They operate on the server and require a compiler or interpreter to transform their code into machine code. As a result, HTML, CSS, and JavaScript are also referred to as front-end technologies. JIT Compiler is used by browsers to interpret HTML, CSS, and compile JavaScript during runtime.

HTML5 included semantic tags such as header, navigation, article, section, aside, footer, and figcaption. These tags describe the content of the container. In HTML4, however, the div element was utilised to define divisions with descriptive classes. Semantic Elements improves search results and social media crawling.

The following are some jQuery effects methods: 

• show(): displays the elements that have been chosen. 
• hide(): Hides the components that have been chosen. 
• toggle(): It toggles between the hide() and show() methods, displaying or hiding the chosen items. 

Filters used in AngularJS include: 

• currency: Use this function to convert an integer to a currency format. 
• date: Formats a date in a certain manner. 
• filter: Choose a subset of the elements in an array. 
• json: Convert an item into a JSON string. 
• limit: To restrict an array or string to a specific amount of elements or characters. 
• lowercase: Changes the case of a string. 
• string: Convert a number to a string. 
• orderBy: Sorts an array based on an expression. 
• uppercase: Changes the casing of a string to uppercase. 

The Window is the first thing that shows in the browser. It features measurements like inner width, inner height, and length. The Document is loaded into the Window object. It operates in the same way as HTML, PHP, and other browser-loaded documents do.

Comments are used to explain and clarify code, as well as to prevent code from being recognised by browsers. Comments begin with a "*" and conclude with a "->."

Tags are used to link images. The picture must be specified in quotations using the source attribute, src, in the opening tag. The anchor element is used for hyperlinking, and the link is supplied in the href property. The hyperlinked text should be inserted between the anchor tags. href is an abbreviation for "HYPERTEXT REFERENCE." The href specification for a link to an email will be mailto:send@here.com.

Using HTML, CSS, JavaScript, and other popular client-side technologies, front-end developers construct client-side web interfaces. A website is viewed by a FE developer as a collection of individual pages. They guarantee that the website and all of its components work properly. 

Additionally, HTML, CSS, JavaScript, and other client-side technologies are used by UI-Developer. More focus is placed on HTML and CSS for UI developers. Their main goal is to provide more precise assets, such buttons, tooltips, and other modular parts that will be included into a bigger, final project. 

The developer views an asset as a collection of unique CSS styles and is more concerned with how the object will seem, feel, and function in various situations. A website may not even be seen as a whole by UI developers, but rather as a collection of components used on pages. The UI developer ensures that everything on the website is easy to use and appealing to the eye. 

You can prepare and learn more with our UI UX developer interview questions list. 

A common question in UI Developer interview questions for freshers, don't miss this one.

The following guidelines should be adhered to when designing or constructing websites for many languages:

The text direction language word length should be considered as it may affect the layout. The default language should be defined using Unicode encoding. We should utilize the 'lang' property and be cognizant of typical font sizes.

The float property has four possible values and can move an element to the left or right. 

This indicates that the element inherits the float value from its parent. 

• None: This is the element's default value and it doesn't float. 
• Left: This indicates that the element floats to the left of the container. 
• Right: This indicates that the element floats to the right of the container. 

An element can be moved in relation to its present location using position relative. Position absolute has the ability to shift an element in relation to its present position or the position of its parent components. In DOM Flow, Absolute Elements take up no room. Location fixed provides an element a fixed position on a device screen. These components don't scroll with the page. Additionally, Fixed Elements doesn't take up any room in DOM Flow.

HTML is an abbreviation for HyperText Markup Language. It is the most widely used language for developing websites. It is made up of a collection of parts that explain the structure of a Web page. HTML components instruct the browser on how to display the material. 

A UI developer is someone who has a keen eye for every aspect and user experience. 

HTML, CSS, JavaScript, AJAX, JSON, jQuery, Java, and SQL database development are all important programming abilities for UI developers to have. 

CSS is the language used to define styles for Web pages, such as colors, layout, and fonts. CSS allows you to set the layout and display variants for different devices and screen sizes (laptop, tablet, mobile). 

CSS is independent of HTML and may be used with any XML-based markup language. 

Node Package Manager is abbreviated as npm. npm offers the following two major features: 

• Online Node.js package/module repositories searchable at search.nodejs.org 
• A command-line program for installing Node.js packages, managing their versions, and managing their dependencies. 

Another key application of npm is dependency management. If you have a node project with a package.json file, you can use npm install from the project root to install all of the dependencies indicated in the package. json. 

It is, indeed, a case-sensitive language. 

Case sensitive implies that variables, function names, and other identifiers must always use consistent letter capitalization. 

Javascript reqUIres less server interaction. Before transferring the page to the server, user input may be qUIckly validated. 

Javascript provides visitors with qUIck feedback; the user does not have to wait for the page to reload to discover if they have forgotten to type something. 

Javascript improves interaction. Interfaces that respond when the user hovers over them with the mouse or activates them with the keyboard can be created. 

A staple in UI Developer interview questions and answers for freshers, be prepared to answer this one.

HTML is an abbreviation for hypertext markup language, while XHTML is an abbreviation for extended hypertext markup language. 

XHTML is an XML-based language, whereas HTML is an SGML-based language. In comparison to HTML, XHTML is considered stringent since it does not enable users to get away with any code or structural errors. 

XHTML is the XML-based cleaner and stricter version of HTML4. XHTML does not enable users to make any code or structural mistakes. 

HTML5, the most recent version of the HTML Web Standard, includes CSS and JavaScript. 

S.O.L.I.D. is an abbreviation for Robert C. Martin's first five object-oriented design (OOD) principles. 

• S - The concept of single-responsibility. A class should only have one reason for change, which means it should only have one duty. 
• O - stands for the open-closed concept. Objects or entities should be able to be extended but not modified. 
• The substitution principle of L - Liskov. Let q(x) be a property that can be proven about objects of type T. Then q(y) should be provable for objects y of type S, where S is a subclass of T. 
• I - The principle of interface isolation. Clients should never be compelled to implement an interface they do not use, nor should they be forced to rely on methods they do not utilize. 
• D - stands for the Dependency Inversion Principle. Entities must rely on abstractions rather than concretions. It specifies that the high level module shall not rely on the low level module, but rather on abstractions. 

ClickJacking is a form of attack that deceives users into believing they are clicking on one thing while, in fact, they are clicking on something else.

Its alternate name, user interface (UI) redressing, better describes what is going on. Users assume they are using a web page's conventional UI, but there is a hidden UI in control; in other words, the UI has been redressed. When customers click on something they think is secure, the hidden UI performs an unexpected action.

jQuery - is a DOM manipulation library. - Has nothing to do with models - lacks two-way binding - gets complicated and difficult to manage as project size grows - often reqUIres more code to provide the same functionality as Angular 

Angular - is an MVVM Framework - is used for constructing SPA (Single Page Applications) - has significant features like as routing, directives, two-way data binding, models, dependency injection, unit tests, and so on - is modular - is manageable as project size rises - is fast, and so on 

Basically, jQuery is a single tool (it handles one specific problem: dom manipulation), but AngularJS is a toolbox full of solutions for many situations (routing, modelbindings, dom manipulation, etc.). 

Actually, jqLite (a subset of jQuery) is included with AngularJS and is used to overcome the dom-manipulation problem. 

You can find here all the important angular UI developer interview questions. 

A grid system is a structure that allows items to be piled vertically and horizontally in a consistent and comprehensible manner. Rows and columns are the two main components of grid systems. 

Several Grid Systems: 

• Pure 
• Flexbox Grid 
• Simple Grid 
• Bootstrap 
• Foundation 

IIFE stands for Immediately-Invoked Function Expression. It runs immediately after being created:

(function IIFE(){
console.log( "Hello!" );
})();
// "Hello!"

Because any variables used inside the IIFE (like any other regular function) are not accessible outside its scope, this pattern is frequently employed when attempting to avoid polluting the global namespace.

It might be a variety of things, but the most typical errors include missing a tag bracket or a quotation for href, src, or alt text. You should also double-check the link.

Internet Explorer 7 and 8 do not support the new HTML5 tags. Using HTML5 tags on Internet Explorer 7 or 8 might result in problems and difficulties. Instead, html5shiv.js may be used to execute the tags on earlier browsers.

In AngularJS, filters are utilized:

• number - prepares numerical data currency - converts numbers to the chosen currency date -formats the date using the specified format 
• uppercase - changes a string to uppercase 
• lowercase - filters a string to make it lowercase. - filters the array according to the criteria supplied orderby - arrays are sorted according to expressions 
• Json is a tool that converts JavaScript objects into JSON strings. 
• limit - restricts the number of elements in an array. 

A common question in UI Developer interview questions and answers for experienced, don't miss this one.

The CSS box model is a rectangular layout paradigm for HTML components that includes: 

• The box's content, which includes text and graphics. 
• Padding is a clear region that surrounds the content (i.e., the amount of space between the border and the content) 
• Border - A border that surrounds the padding and content (if any). 
• A translucent region surrounding the border is known as a margin (i.e., the amount of space between the border and any neighboring elements). 

Asynchronous JavaScript, or JavaScript with callbacks, is difficult to master intuitively. A lot of code looks something like this:

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

Have you seen the pyramid form and all the }) towards the end? This is often known as callback hell.

Callback hell occurs when individuals attempt to build JavaScript in such a way that execution occurs visually from top to bottom. Many folks make this error! In other languages, such as C, Ruby, or Python, it is expected that whatever happens on line 1 will be completed before the code on line 2 begins to execute, and so on, along the file.

Strict Mode is a new feature in ECMA Script 5 that allows you to set a program or function in a "strict" operating context. This stringent context prohibits some actions from being executed and creates extra exceptions.

/ Non-strict code...
(function(){
  "use strict";
  // Define your library strictly...
})();
// Non-strict code...

Webpack is a build tool that organizes all of your assets, including Javascript, pictures, fonts, and CSS, into a dependency graph. Webpack allows you to utilize need() in your source code to refer to local files, such as photos, and control how they're handled in your final Javascript bundle, such as substituting the path with a URL connecting to a CDN. 

Yes, if you're creating a complicated Front End application with a lot of non-code static assets like CSS, photos, fonts, and so on, Webpack will be qUIte useful. 

Webpack will provide you with several advantages. 

If your application is relatively tiny, you don't have many static assets, and you just need to compile one Javascript file to provide to the client, Webpack may be too much overhead. 

A qUIck method for dividing workloads among several servers or clusters is load balancing. Round Robin is the most widely used and basic load balancing method. This method of load balancing divides requests in a circular pattern to ensure that each computer receives an equal amount of requests and is neither overburdened nor underloaded. 

Load balancing is intended to 

• Improve resource use (avoid overload and under-load of any machines) 
• Obtain the Highest Throughput 
• Reduce reaction time. 

The strategies for load balancing used by web applications most often include 

• "Round robin" 

Sticky session, IP Address affinity or session affinity 

These are the top UI developer interview questions and answers. 

KISS, an acronym for "keep things simple, stupid," is a design gUIdeline established by the United States Navy in 1960. According to the KISS principle, most systems perform best when they are maintained simple rather than convoluted; hence, simplicity should be a fundamental aim in design, and needless complexity should be avoided. 

span (an inline element) while div (a block element). 

You may also mention that this is unacceptable to put a block element inside an inline element, and that although div can have a p tag and a p tag can have a span, span cannot have a div or a p tag inside. 

One of the most frequently posed senior UI Developer interview questions, be ready for it.

An interpreted programming language with object-oriented features, JavaScript. It is portable. It enables one to add interaction to HTML pages that would otherwise be static. 

The most popular front-end development languages are Javascript and React.js. 

Additionally, backend development tools like Node.js, Nest.js, Next.js, etc. are used. 

Javascript has a number of features, including: 

• It is a simple, interpreted programming language. 
• The development of network-centric applications is its intended use. 
• It complements Java and is linked with it. 
• It complements HTML and is connected with it. 
• It is a free, universal programming language. 

If you are preparing for some big companies, then here you get important senior UI developer interview questions. 

The technique to indicate how a web page is organized is through the HTML layout. 

The following list of HTML5 elements is used to define the various webpage components: 

• This section's <header> specifies a heading for a page or a section.
• <Nav>: describes a container for navigation links. 
• <section>: Definition of a Section in a Document:
• <Article>:An Independent, Self-Contained Article 
• A sidebar is an example of an <aside> from the content.
• A document's <footer>is specified here. 
• Sometimes you can be asked to explain the terms or write code in UI interview questions for experienced.

Block components always begin on a new line and occupy the whole width of the container. 

It enlarges itself to fill the container's available width. Some instances of the elements at the block level include <div>, <p>, <img>, <section> 

Only the width needed to fit the element inside the container is necessary for inline elements. 

Take the text flow on the page as an example as we attempt to comprehend. The text wraps onto a new line after one line has filled the whole width of the container, and so on. 

The inline element will only occupy the width or amount of space that is reqUIred for it. a few instances are <span>, <label>, <a>, <b> 

UI development interview questions mostly have this

This is among the often requested UI Developer Interview Questions. 

After declaring the variables in JavaScript, we may access them. 

When a variable is declared at the end of a script but used earlier, JavaScript produces an error stating that the variable is undefined. 

Before any code is executed in Javascript, assignment variables and function declarations are "hoisted" to the top of their scope. 

Therefore, regardless of whether a function has a local or global scope, it is relocated to the top of its range. 

Semantic components should be used since they make the code easier to read. 

When examining the initial piece of code using semantic components, it is the item that stands out as being the most significant. It's a short, straightforward example, but as a programmer, you may read hundreds or thousands of lines of code, so readability is crucial. The developer's work is made considerably simpler if the code is simpler to read and comprehend. 

Additionally, a code having semantic components is more accessible. 

When semantic features are employed, search engines and assistive technology (such as screen readers for individuals with vision impairments) are also better eqUIpped to comprehend the context and content of your website. As a consequence, website visitors get a better overall experience. 

Overall, using semantic components results in more consistently written code. 

Various programmers (since they have different coding styles) express this as<div class=”header”>, <div id=”header”>, <div class=”head”>, or simply <div> or just when bUIlding a header utilizing non-semantic components. 

The creation of a header element can be done in a variety of methods, each according to the developer's preferences. It makes code simpler for everyone to comprehend by developing and adhering to a common semantic element. 

A few additional "semantic" components have been introduced to HTML5, an improved version of HTML4. Some of us might still be perplexed as to why so many various components don't appear to have undergone significant alterations. 

Example <section>&<article> 

What is the difference, one may wonder? These two components, which are both utilized for content sectioning, are unquestionably interchangeable. 

In essence, it depends on whatever circumstance. While HTML4 only supplied the <div> container element, HTML5 gave us the <section> and <article> container elements to replace <div>. Although HTML5 still makes use of <div> 

<Section> and <article> components are conceptually interchangeable and identical. We should keep in mind the following while choosing one of these elements: 

While a section is a topical grouping of material, an article is intended to be independently distributable or reusable. 

To locate certain items inside an array of objects, write a Javascript code snippet. 

For the same, we may utilize the Javascript "find" technique. 

UI developer interview questions and answers for experienced can be short as well as long depending on the company. 

This is a frequently asked question in UI Developer coding interview questions.

A Boolean value must be returned by the function. 

The function's code is shown below. If the string is a palindrome, the function returns true; otherwise, it returns false. 

functionisPalindrome(string) { 
  string = string.replace(/\W/g, '').toLowerCase(); 
  return (string == string.split('').reverse().join('')); 
} 

For example: 

console.log(isPalindrome("level"));                   // logs 'true' 
console.log(isPalindrome("levels"));                  // logs 'false' 

This concludes the blog post on the most common UI Developer Interview Questions. This should enable you to perform well in any forthcoming interviews. I wish you luck on the interview! 

Join the Free Online Courses given by Great Learning Academy to upskill right away if you want to learn more about these ideas. 

The instructions are reqUIre() and include(). The need () command generates a fatal error when it is unsuccessful, whereas the include () method raises a warning. 

 As its name suggests, Reset.css removes all of the bUIlt-in styles that come with browsers, including padding, margin, and border. 

On the other hand, normalize, as implied by the name. 

A uniform book-like look is established across all browsers through CSS, including bold headers, margins between paragraphs, and a consistent font. The styles are just normalized; they are not reset. 

AJAX is asynchronous JavaScript and XML in its full form. It is a JavaScript-based client-side application. 

Without having to reload the page, we may retrieve or upload data from a remote site using AJAX. 

The Bootstrap plugin library has a wide variety of plugins, as seen below. 

• Alert 
• Affix 
• Collapse 
• Dropdown 
• Popover 
• Button 
• Carousel 
• Scrollspy 
• Modal 
• Tab 
• Tooltip 

UI developer interview questions for 5 years experience are as above and below. 

This question also gives the interviewer a chance to assess your approach, but it also gives you a chance to highlight your skill in problem-solving. Guide the interviewer through the processes you would take to determine what makes websites run slowly and what you would do to improve loading times as you respond to this question. 

Example: "I would examine different aspects of your website. One thing I would do is check the website for any dead links using a link analysis tool. I would also examine the site's various pages' code. 

Linking related pages to a single CSS sheet can help with the latter issue by streamlining the coding. 

Moving the JavaScript code to the HTML document's bottom of a page is another thing I might do. This enables the page to display before the download of all JavaScript code. In addition, I would verify the website's servers. If permitted, I would switch the website's distribution to a content delivery network. By doing this, visitors may view the website from a server that is located closer to them. After all of this, I'll check the website's loading times once again. 

Negative feedback is something that all UI designers will encounter, but what you do with it is what counts. You are able to employ the STAR approach with this query. Talk about a time when you received critical comments and what you did to make it better. 

"I previously worked on a free smartphone game app that required users to tap the screen at precisely the correct moment," for example. Three out of every five clients, however, filed complaints alleging that the program was indifferent to their needs. The vast majority of them were given one or two stars. 

I investigated the code of my app and discovered that it was too huge for various phone operating systems after interacting with some users and asking them to look into whether there were any external problems, such magnets, that were causing their screens to be unresponsive on their end. I made coding changes and re-submitted the application. All of the people I spoke with agreed that the system had significantly improved. 

Another query regarding your professional background as a UI designer can follow the one about user input. You have the chance to discuss how you collaborated with a team on a bigger project at this point. Think about sharing a time when you overcame a hurdle and describe what you did to get the desired outcome. 

An accomplished author and motivational speaker's website needed to be updated, so I once worked on a four-person team to do it. The website had many broken links, most of the content was placed in tables, there was a lot of text that was colorful, and the navigation was not simple. Over 150 pages of information were improved through collaboration with a writer, a graphic designer, and an IT specialist. 

I was able to revamp each page of the website after two months, relocating the navigation from the side to the top of each page. Even a site map would have been part of my plan. The website's traffic increased by more than three times six months later. 

The website's creator was so taken with its layout that he suggested me to one of his friends because of it. 

These are the design elements: 

• LINE: The edge formed when two forms converge or the linear markings made with a pen or brush. 
• SHAPE: A shape is a discrete region of organic or geometric elements (such as squares and circles) (free formed shapes or natural shapes). A negative form always results from a positive shape. 
• DIRECTION: All lines have a direction, whether it is horizontal, vertical, or oblique. Horizontal conveys tranqUIlity, stability, and peace. The vertical position conveys a sense of harmony, formality, and awareness. Obliquely implies motion and action 
• SIZE - The connection between the area filled by one form and another is known as size. 
• TEXTURE: A shape's texture—which might be rough, smooth, soft, hard, glossy, etc.—defines its surface quality. 
• COLOR - Color is the light that an item reflects. Hue, or the color's name (red, green, blue, etc.), value, and intensity make up the three primary components of color (how bright or dull it is). 

An HTTP header called Content Security Policy (CSP) gives site owners fine-grained control over where resources on their site can be loaded from. The most effective way to guard against cross-site scripting (XSS) vulnerabilities is to use this header. CSP is required for all new websites and is highly advised for all high-risk sites that are already online due to the challenge of retrofitting CSP into existing websites. 

The main advantage of CSP is the removal of dangerous inline JavaScript. As a result of inline JavaScript, which can be reflected or saved, incorrectly escaped user inputs may result in code that the web browser interprets as JavaScript. 

You may successfully stop virtually all XSS attacks on your website by using CSP to prevent inline JavaScript. 

Here is a sample of Javascript code that uses the "filter" function: 

1. let data = [ 
2. "files/dir1/file1", 
3. "files/dir1/file2", 
4. "files/dir2/file1", 
5. "files/dir2/file2" 
6. ]; 
7. let filteredData = data.filter(path =>path.includes('dir2')); 
8. console.log(filteredData); 
9. [ 'files/dir2/file1', 'files/dir2/file2' ]

Event propagation is defined as the order in which events occur on the element. 

When the event is triggered, the element bubbles up the DOM tree, calling the child node first and then the parent node. This is referred to as event bubbling. 

Event capturing is the inverse of event bubbling in that the parent node is called first, followed by the child node. 

The distinction between local storage, session storage, and cookies is as follows: 

• Local storage has the highest possible storage capacity and enables for data storage with no expiration date. 
• Session storage associates saved data with a session. The data disappears when the user closes the tab or browser, just like in local storage. 
• Cookies are little pieces of data that are transmitted back to the server. The data stored must be less than 4KB in size. 

Because of the following advantages:

• It is simple to use and learn. 
• It is easily extensible. 
• Cross-browser compatibility (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) 
• Simple to use for DOM manipulation and navigation. 
• A large number of bUIlt-in techniques are available. 

AJAX Capabilities:

• Methods for altering or applying CSS, as well as producing animations. 
• Event detection and handling 
• There are several plug-ins available to meet a wide range of reqUIrements. 

PUT directs a file or resource to a certain URI. If there is already a file or resource at that URI, PUT replaces it. If there is no resource or file present, PUT creates one. 

POST delivers data to a certain URI and expects the resource at that URI to handle the request. At this point, the web server may determine what to do with the data in the context of the requested resource. 

PUT is idempotent, which means that using it any number of times has no effect on resources. 

POST, on the other hand, is not idempotent, which means that if you use it numerous times, it keeps producing new resources. 

If neither attribute is present, the script is downloaded and performed synchronously, and processing of the page is halted until it has completed execution (default behavior). Scripts are downloaded and run in the order they are encountered. 

The defer attribute downloads the script while the document is still parsing but waits until the document is through parsing before running it, which is analogous to executing within a DOMContentLoaded event listener. Deferred scripts will run sequentially. 

The async property downloads the script while processing the page, but it pauses the parser to run the script before it has finished parsing. Async scripts will not always execute in the same sequence. 

Both attributes must be used only if the script contains a src attribute (i.e. not an inline script). 

<script src="myscript.js"></script> 
<script src="myscript.js" defer></script> 
<script src="myscript.js" async></script>