当界面加载完才加载JS的方法有：使用defer属性、async属性、将JS代码放在HTML底部。其中，使用defer属性是最常见且推荐的方法，因为它能确保所有的DOM元素都已加载完成，从而避免潜在的错误。
使用defer属性详细描述：
在HTML中，可以通过在<script>标签中添加defer属性来确保JS脚本在HTML文档完全解析后才执行。这样可以避免脚本加载过程中阻塞页面的渲染，提升页面加载性能。示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js" defer></script>
</body>
</html>
在这个示例中，script.js文件会在HTML文档完全解析后才执行，从而确保所有DOM元素都已加载完成。
一、DEFER属性
使用defer属性是最常见且推荐的方法之一，因为它确保脚本在HTML文档完全解析后才执行，且不会阻塞页面的渲染。
1、优势
提升页面加载速度
defer属性使得浏览器能够继续解析HTML文档，而不必等待脚本文件的下载和执行，从而加快页面的加载速度。
确保DOM加载完成
通过使用defer，可以确保所有DOM元素都已加载完成，从而避免在脚本中访问未加载的DOM元素导致的错误。
2、使用示例
在HTML中通过在<script>标签中添加defer属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js" defer></script>
</body>
</html>
在这个示例中，script.js文件会在HTML文档完全解析后才执行，从而确保所有DOM元素都已加载完成。
二、ASYNC属性
使用async属性是另一种常见的方法，它允许脚本在后台下载，并在下载完成后立即执行。尽管这种方法也能提升页面加载速度，但它并不保证脚本的执行顺序。
1、优势
提升页面加载速度
async属性使得浏览器能够继续解析HTML文档，而不必等待脚本文件的下载和执行，从而加快页面的加载速度。
非阻塞下载
async属性允许脚本在后台下载，并在下载完成后立即执行，从而避免阻塞页面的渲染。
2、使用示例
在HTML中通过在<script>标签中添加async属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js" async></script>
</body>
</html>
在这个示例中，script.js文件会在后台下载，并在下载完成后立即执行。
三、将JS代码放在HTML底部
将JS代码放在HTML文档的底部是另一种常见的方法，因为这样可以确保所有的DOM元素都已加载完成，从而避免潜在的错误。
1、优势
确保DOM加载完成
通过将JS代码放在HTML文档的底部，可以确保所有DOM元素都已加载完成，从而避免在脚本中访问未加载的DOM元素导致的错误。
提升页面加载速度
将JS代码放在HTML文档的底部可以避免在脚本加载过程中阻塞页面的渲染，从而提升页面加载速度。
2、使用示例
在HTML中将JS代码放在</body>标签之前：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bottom Script Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="script.js"></script>
</body>
</html>
在这个示例中，script.js文件会在HTML文档的底部加载，从而确保所有DOM元素都已加载完成。
四、使用DOMContentLoaded事件
使用DOMContentLoaded事件是另一种确保JS在页面加载完成后才执行的方法。这种方法允许开发者在JS代码中监听文档的加载事件，从而在文档完全加载完成后执行相应的代码。
1、优势
精确控制脚本执行时机
使用DOMContentLoaded事件可以精确控制脚本的执行时机，从而确保在文档完全加载完成后执行相应的代码。
避免潜在的错误
通过使用DOMContentLoaded事件，可以确保所有DOM元素都已加载完成，从而避免在脚本中访问未加载的DOM元素导致的错误。
2、使用示例
在JS代码中监听DOMContentLoaded事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOMContentLoaded Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('Document fully loaded and parsed');
// 在此处编写需要在文档加载完成后执行的代码
});
</script>
</body>
</html>
在这个示例中，DOMContentLoaded事件会在文档完全加载完成后触发，从而确保在文档完全加载完成后执行相应的代码。
五、使用window.onload事件
使用window.onload事件是另一种确保JS在页面加载完成后才执行的方法。这种方法允许开发者在JS代码中监听窗口的加载事件，从而在窗口完全加载完成后执行相应的代码。
1、优势
确保所有资源加载完成
使用window.onload事件可以确保所有资源（包括图片、样式表等）都已加载完成，从而避免在脚本中访问未加载的资源导致的错误。
提供更高的可靠性
通过使用window.onload事件，可以确保所有资源都已加载完成，从而提供更高的可靠性。
2、使用示例
在JS代码中监听window.onload事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Onload Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
window.onload = function() {
console.log('All resources finished loading');
// 在此处编写需要在所有资源加载完成后执行的代码
};
</script>
</body>
</html>
在这个示例中，window.onload事件会在所有资源完全加载完成后触发，从而确保在所有资源完全加载完成后执行相应的代码。
六、使用模块化JS
模块化JS是一种现代的JS开发方式，它允许开发者将JS代码分割成小的模块，从而提高代码的可维护性和可读性。使用模块化JS可以确保在页面加载完成后才执行相应的代码。
1、优势
提高代码可维护性
模块化JS允许开发者将JS代码分割成小的模块，从而提高代码的可维护性和可读性。
提供更高的灵活性
通过使用模块化JS，可以根据需要加载和执行相应的模块，从而提供更高的灵活性。
2、使用示例
在HTML中通过使用type="module"属性来加载模块化JS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Module Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script type="module">
import { myFunction } from './module.js';
myFunction();
</script>
</body>
</html>
在这个示例中，module.js文件会在HTML文档完全解析后加载和执行，从而确保所有DOM元素都已加载完成。
综上所述，当界面加载完才加载JS的方法有多种，包括使用defer属性、async属性、将JS代码放在HTML底部、使用DOMContentLoaded事件、使用window.onload事件以及使用模块化JS。每种方法都有其独特的优势和使用场景，开发者可以根据具体需求选择合适的方法。
相关问答FAQs：
1. 为什么要将JavaScript延迟加载？
JavaScript延迟加载可以提高页面加载速度和性能，因为它允许页面在加载完毕后再加载JavaScript文件，而不会阻塞其他页面元素的加载。
2. 如何实现在页面加载完后再加载JavaScript？
可以使用JavaScript的defer属性来实现延迟加载。在script标签中添加defer属性，如下所示：
<script src="your-script.js" defer></script>
这样，JavaScript文件将会在页面加载完毕后才开始加载和执行。
3. 延迟加载JavaScript会对SEO产生影响吗？
延迟加载JavaScript通常不会对SEO产生负面影响。搜索引擎可以正确地解析和索引延迟加载的JavaScript内容。但是，为了确保搜索引擎能够正确解析和执行JavaScript代码，建议使用无阻塞的方式来加载JavaScript文件，如使用defer属性或异步加载方法。这样可以确保搜索引擎能够正确解析并索引JavaScript内容，同时提高页面加载速度和用户体验。
文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3898781
