1.字体
- 位置：
<head>中 - 最佳实践：尽早引入，以避免闪烁（FOUC）
示例：
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>2.CSS 样式表
- 位置：
<head>中 - 最佳实践：在页面加载前引入，确保样式在内容渲染前应用
示例：
<head>
<link rel="stylesheet" href="styles.css">
</head>3.JavaScript脚本
- 位置：
</body>前 - 最佳实践：在文档底部引入，确保 DOM 完全加载后再执行脚本，避免错误并提高加载速度。
示例：
<body>
<!-- 页面内容 -->
<script src="script.js"></script>
</body>如果在
</body>后引入脚本，浏览器解析到script标签不会出现阻塞，可能会存在当用户操作DOM时，JavaScript没有响应，因为可能还未加载完成。另外，这不符合HTML规范。
4.图像
- 位置：通常在
<body>中 - 最佳实践：尽量优化图像大小和格式，以减少加载时间。可以使用 lazy loading 技术延迟加载不在视口中的图像。
示例：
<body>
<img src="image.jpg" alt="描述" loading="lazy">
</body>5.视频和音频
- 位置：通常在
<body>中 - 最佳实践：使用适当的格式和压缩，确保媒体文件在浏览器中高效加载。可以使用 标签为不同格式提供后备。
示例：
<body>
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
您的浏览器不支持视频标签。
</video>
</body>6.favicon（网站图标）
- 位置：
<head>中 - 最佳实践：将 favicon 提早引入，以确保在页面加载时图标能及时显示。
示例：
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>总结
- 字体、CSS 和 favicon 应在 中引入，以确保在内容渲染前可用。
- JavaScript 应在 标签之前引入，以确保 DOM 完全加载后再执行。
- 图像、视频 和 音频 通常在 中引入，优化文件大小和格式，必要时使用延迟加载。
- 新标准已经在script增加了defer和async属性来解决脚本加载速度的问题，可以在head中加载脚本。