home
play_circle_filled
menu
cached
settings_brightness
Run
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <title>HTML script tag async defer Example</title> <style> label { padding: 5px; margin-top: 10px; width: 580px; height: 280px; } input[type='text'] { border: 1px solid rgb(19, 18, 18); border-radius: 5px; background-color: #d1e0ff; padding: 5px; margin-top: 10px; width: 200px; height: 23px; } input[type='button'] { border: 1px solid rgb(19, 18, 18); border-radius: 5px; background-color: #d1e0ff; padding: 5px; margin-top: 10px; width: 120px; height: 42px; } input[type='button']:hover { background-color: #c1d0ff; } </style> </head> <body> <h2>HTML script tag async defer Example</h2> <p>Refresh page to see the loading sequence of the script files</p> <table> <tr> <td>Script1 loading time:</td> <td><input type="text" id="p1" name="p1"></td> </tr> <tr> <td>Script2 loading time:</td> <td><input type="text" id="p2" name="p2"></td> </tr> <tr> <td>Script3 loading time:</td> <td><input type="text" id="p3" name="p3"></td> </tr> </table> <script async src='./resources/js/script1_async_attribute.js'></script> <script async src='./resources/js/script2_async_attribute.js'></script> <script async src='./resources/js/script3_async_attribute.js'></script> </body> </html>