Sean Cassiere SeanCassiere

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

	"use client"

	import { ChevronLeft, ChevronRight } from "lucide-react"
	import * as React from "react"
	import { DayPicker } from "react-day-picker"

	import { buttonVariants } from "@/components/ui/button"
	import { cn } from "@/lib/utils"

	export type CalendarProps = React.ComponentProps<typeof DayPicker>

	accent: "#818cf8"
	foreground: "#0f172a"
	background: "#f8fafc"
	details: "lighter"
	terminal_colors:
	normal:
	red: "#f87171"
	yellow: "#facc15"
	black: "#0f172a"
	cyan: "#22d3ee"

	import { JWE, JWK, JWS } from 'node-jose'
	import fs from 'fs'
	import { join } from 'path'
	import jwkToPem from 'jwk-to-pem'
	import jwt from 'jsonwebtoken'

	const certDir = '.cert'
	const keystoreFile = join(certDir, 'keystore.json')
	const raw = {
	iss: 'test',

Sean Cassiere SeanCassiere

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

`<script> async, defer, async defer, module, nomodule, src, inline` - the cheat sheet