外部引入的js比页面中script慢显示
如果您的外部 JS 文件的加载速度较慢，那么在页面加载时，可能会导致 JavaScript 代码尚未完全加载和解析，就已经开始执行。如果此时您在页面中使用的某些 JavaScript 代码依赖于外部 JS 文件中的变量或函数，则会导致在浏览器控制台中看到“未定义”的错误或其他错误消息。
为了避免这种情况，一种可行的解决方案是将您的页面 JavaScript 代码放在一个自包含的函数中，并在页面加载完成后才执行此函数。这样，只要页面上的 HTML 和外部 JS 文件加载完成，您的代码就可以开始运行，从而避免了任何“未定义”的错误。下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="path/to/external.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<script>
window.addEventListener('load', function() {
// This code will execute when the page has finished loading
// and all external JavaScript files have been downloaded and parsed.
// Any variables or functions defined in external.js will be available here.
// Your JavaScript code here...
});
</script>
</body>
</html>
在这个例子中，我们将外部 JS 文件（external.js）放在 HTML 的 中，并将我们的页面 JavaScript 代码包裹在一个事件监听器中。load 事件会在整个页面及其所有相关资源都已加载完成后触发。这意味着在事件监听器中，您的代码可以安全地访问外部 JS 文件中定义的变量和函数。