HTML <script> async-eigenschap

HTML <script> tag

Definitie en gebruik

async De eigenschap is een booleaanse eigenschap.

Als er is ingesteld async De eigenschap, het script wordt tegelijkertijd gedownload tijdens het parseren van de pagina en wordt onmiddellijk uitgevoerd zodra het beschikbaar is. Zodra het script volledig is gedownload, wordt het parseren van de pagina onderbroken, vervolgens wordt het script uitgevoerd en vervolgens wordt het parseren van de rest van de pagina hervat.

Note:async De eigenschap is alleen van toepassing op externe scripts (en zou alleen moeten worden gebruikt wanneer de src-eigenschap bestaat).

Note:Externe scripts kunnen op meerdere manieren worden uitgevoerd:

  • Als async is ingesteld: het script wordt tegelijkertijd gedownload tijdens het parseren van de pagina en wordt onmiddellijk uitgevoerd zodra het beschikbaar is (voor het parseren is voltooid)
  • Als defer is ingesteld (en geen async): het script wordt tegelijkertijd gedownload tijdens het parseren van de pagina en wordt uitgevoerd nadat de pagina is geparset
  • Als er geen async of defer is ingesteld: het script wordt onmiddellijk gedownload en uitgevoerd, wat het parseren van de pagina blokkeert, totdat het script is voltooid

Voorbeeld

Het verwijzende script wordt tegelijkertijd gedownload tijdens het parseren van de pagina en wordt onmiddellijk uitgevoerd zodra het beschikbaar is:

<script src="demo_async.js" async></script>

Probeer het zelf

Syntaxis

<script async>

Asynchrone script-uitvoering

Het standaard gedrag van de browser bij het tegenkomen van een script-element is om de pagina te laden en het script uit te voeren, terwijl de verwerking van de pagina wordt onderbroken. Elke script-element wordt in volgorde (volgens de gedefinieerde volgorde) synchroon (binnen het script-laden en -uitvoeren) uitgevoerd.

Als standaard manier om scripts te verwerken, heeft de synchrone volgorde-executeerbaarheid zijn betekenis. Echter, sommige scripts hebben geen dergelijke verwerking nodig, voor deze scripts kan async Property to improve its performance. A typical example of this is tracking scripts (tracking scripts). These scripts can report user website visit records so that advertising companies can customize and place ads based on user habits, or collect website visitor statistics for analysis, etc. These scripts are self-contained and generally do not need to interact with elements in the HTML document. There is no point in delaying the display of the page to wait for them to load and then send reports to their own servers.

Used async After the property, the browser will asynchronously load and execute the script while continuing to parse other elements in the HTML (including other script elements). If used properly, this can greatly improve overall loading performance.

Note:Usage async One important consequence of the property is that scripts in the page may no longer execute in the order defined. Therefore, if scripts use functions or values defined in other scripts, it is not advisable to use async Property.

Browser support

The numbers in the table indicate the first browser version to fully support this property.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
8.0 10.0 3.6 5.1 15.0

HTML <script> tag