JavaScript 同步加载脚本：示例和最佳实践

下面是一个使用 JavaScript 同步加载的示例：

function loadScript(url) {
  var script = document.createElement('script');
  script.src = url;
  document.head.appendChild(script);
}

function init() {
  console.log('初始化...');
  loadScript('https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js');
  console.log('加载完成！');
}

init();

在上面的示例中，loadScript 函数用于同步加载一个 JavaScript 脚本。它创建一个 <script> 元素，并将其 src 属性设置为传递的 URL。然后，它将该元素添加到文档头部，以触发脚本的下载和执行。

在 init 函数中，我们首先输出一个初始化消息，然后调用 loadScript 函数来加载 jQuery 库。在加载脚本期间，代码会阻塞，直到脚本加载完成并执行。一旦加载完成，我们会输出一个加载完成的消息。

请注意，这种同步加载方式会阻塞页面的渲染和其他 JavaScript 代码的执行，直到脚本加载完成。因此，如果加载的脚本非常大或者网络速度较慢，可能会导致页面加载速度变慢。

为了提高页面性能，建议使用异步加载或延迟加载来加载 JavaScript 脚本。异步加载允许脚本在页面渲染的同时下载，而延迟加载则在页面渲染完成后才加载脚本。

最佳实践：

• 尽可能使用异步加载或延迟加载来提高页面性能。
• 如果必须使用同步加载，请尽量减少脚本的大小和数量，并确保脚本能够快速加载。
• 考虑使用 CDN 来托管脚本，以提高加载速度。
• 使用代码分割将大型脚本拆分成更小的模块，以减少加载时间。