search

phosphor-icons / homepage

The homepage of Phosphor Icons, a flexible icon family for everyone
https://phosphoricons.com
MIT License
3.93k stars 93 forks source link

Can the script be loaded using the `async` attribute? #389

Closed Flimm closed 7 months ago

Flimm commented 7 months ago

The README.md file contains this sample code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
  </head>
  <body>
    <i class="ph-smiley"></i>
    <i class="ph-fill ph-heart" style="color: hotpink"></i>
    <i class="ph-thin ph-cube"></i>
  </body>
</html>

I would like to know if this script will still function as expected if I add an async attribute to it, like this:

    <script async src="https://unpkg.com/@phosphor-icons/web"></script>

This allows the browser to continue rendering the rest of the document even before downloading and executing the script, and it's a recommended practise for web performance.

rektdeckard commented 7 months ago

Yes, async scripts are supported. But beware it may lead to noticeable "pop-in" as the icons will appear significantly after other content on the page, causing layout shifts.