脚本应优先通过defer或async异步加载以避免阻塞渲染；将脚本放在body底部可防阻塞，但推荐使用defer确保DOM解析完成后再执行；async适用于独立脚本，defer用于依赖DOM或需顺序执行的脚本；优化方式包括代码分割、懒加载、CDN加速和浏览器缓存；加载失败时应重试、降级处理并监控错误，确保页面基本功能可用。
HTML文档脚本加载的方式直接影响网页的性能和用户体验。通常，我们会考虑将脚本放在文档的
<head>或
<body>中，但具体选择取决于脚本的功能和加载时机。
脚本加载的方式有很多种，包括同步加载、异步加载（
async和
defer）。理解它们的区别至关重要，因为错误的加载方式可能导致页面渲染阻塞或脚本执行顺序错乱。
脚本应该放在
<head>里还是
<body>里？
放在
<head>中，脚本会优先下载和执行，这可能导致页面渲染阻塞，用户会看到一个空白页面直到脚本执行完毕。如果脚本依赖于DOM元素，可能会出错，因为DOM还没完全加载。
立即学习“Java免费学习笔记（深入）”；
放在
<body>底部，可以避免阻塞页面渲染，用户可以更快地看到页面内容。但如果脚本执行时间较长，可能会延迟页面交互。
使用
async和
defer属性可以异步加载脚本，不会阻塞页面渲染。
async属性的脚本一旦下载完成就会立即执行，执行顺序不确定。
defer属性的脚本会等到整个HTML文档解析完成后再执行，执行顺序按照它们在文档中出现的顺序。
如何优化JavaScript加载以提升网页性能？
优化JavaScript加载的关键在于减少阻塞渲染、优化加载顺序和利用浏览器缓存。
减少阻塞渲染： 尽量使用
async
或defer
属性异步加载脚本。对于不依赖DOM且不影响页面初始渲染的脚本，可以使用async
。对于需要按照特定顺序执行或依赖DOM的脚本，可以使用defer
。优化加载顺序： 将不重要的脚本放在文档底部加载，优先加载关键脚本，确保页面核心功能尽快可用。
利用浏览器缓存： 合理设置HTTP缓存头，利用浏览器缓存静态资源，减少重复下载。可以使用CDN加速静态资源的访问速度。
代码分割： 将大型JavaScript文件分割成多个小文件，按需加载，减少首次加载时间。可以使用Webpack、Parcel等工具进行代码分割。
懒加载： 对于非首屏需要的脚本，可以使用懒加载技术，在用户需要时再加载。
如何处理JavaScript加载失败的情况？
JavaScript加载失败会导致网页功能异常，因此需要妥善处理。
错误处理： 使用
try...catch
语句捕获脚本执行过程中的错误，避免错误扩散到整个页面。加载失败重试： 如果脚本加载失败，可以尝试重新加载。可以使用定时器或事件监听器实现自动重试。
<script>
function loadScript(url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.onload = function() {
callback();
};
script.onerror = function() {
console.error("Script load failed:", url);
// 尝试重新加载
setTimeout(function() {
loadScript(url, callback);
}, 2000); // 延迟2秒后重试
};
document.head.appendChild(script);
}
// 使用示例
loadScript("my-script.js", function() {
console.log("Script loaded successfully!");
});
</script>降级处理： 如果脚本加载失败，提供备选方案或降级功能，确保用户仍然可以使用网页的基本功能。例如，如果JavaScript加载失败，可以使用CSS样式提供基本的页面布局和样式。
监控和告警： 使用监控工具监控JavaScript加载情况，及时发现并解决问题。可以使用Sentry、Bugsnag等工具进行错误监控。
CDN容灾： 使用多个CDN提供商，当一个CDN出现故障时，可以自动切换到其他CDN，确保脚本可以正常加载。
