外部js的defer怎么添加

外部JS的defer怎么添加

使用defer属性、提升页面加载速度、避免阻塞HTML解析。在将外部JavaScript文件添加到HTML中时，defer属性是一种非常有效的方法，可以提升页面加载速度并避免阻塞HTML解析。通过在HTML的script标签中添加defer属性，可以确保JavaScript文件在HTML文档完全解析之后才会执行，从而提升页面性能。

一、DEFER属性的作用

提升页面加载速度

defer属性的主要作用是提升页面加载速度。当浏览器解析HTML文档时，如果遇到不带defer属性的script标签，会立即停止解析并开始下载和执行JavaScript文件。这会导致页面加载速度减慢，特别是在文件较大的情况下。而使用defer属性，浏览器会继续解析HTML文档，并在文档完全解析之后再下载和执行JavaScript文件，从而提升页面加载速度。

二、DEFER与ASYNC的区别

DEFER

defer属性会使JavaScript文件在HTML文档完全解析之后才执行，并且多个带defer属性的文件会按照它们在文档中出现的顺序执行。这确保了脚本的执行顺序，适用于依赖于某些顺序执行的脚本。

ASYNC

async属性也用于提升页面加载速度，但它的行为与defer不同。带async属性的JavaScript文件会在下载完成后立即执行，而不等待HTML文档的解析完成。这可能导致脚本的执行顺序不确定，适用于独立执行的脚本。

三、如何在HTML中添加DEFER属性

在HTML中添加defer属性非常简单。只需在script标签中添加defer属性即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="example.js" defer></script>
</body>
</html>

四、DEFER属性的使用案例

改善页面加载性能

假设你有一个大型的JavaScript文件，它会在页面加载时执行一些初始化操作。为了避免阻塞HTML文档的解析，你可以使用defer属性来提升页面加载性能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Improved Performance</title>
</head>
<body>
    <h1>Improved Performance with Defer</h1>
    <script src="large-file.js" defer></script>
</body>
</html>

五、DEFER属性的最佳实践

将脚本放在HTML文档的底部

尽管defer属性可以提升页面加载性能，但将脚本标签放在HTML文档的底部仍然是一个最佳实践。这是因为即使使用defer属性，浏览器仍然需要下载JavaScript文件，而将脚本标签放在文档底部可以确保页面的其他部分尽快呈现给用户。

使用多个DEFER脚本

如果你有多个JavaScript文件需要加载，并且它们依赖于特定的执行顺序，可以使用多个带defer属性的script标签。这样可以确保脚本按照它们在文档中出现的顺序执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Defer Scripts</title>
</head>
<body>
    <h1>Multiple Defer Scripts</h1>
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
    <script src="script3.js" defer></script>
</body>
</html>

六、DEFER属性的兼容性

浏览器支持

大多数现代浏览器都支持defer属性，包括Chrome、Firefox、Safari、Edge和Opera等。然而，为了确保向后兼容性，建议在使用defer属性时进行浏览器兼容性测试。

老旧浏览器的处理

对于不支持defer属性的老旧浏览器，可以使用其他方法来提升页面加载性能。例如，将脚本标签放在文档底部，或者使用其他异步加载技术。

七、DEFER属性与模块化JavaScript

模块化JavaScript

随着JavaScript应用程序变得越来越复杂，模块化JavaScript成为了一种常见的开发模式。使用模块化JavaScript可以将代码分解为独立的模块，从而提高代码的可维护性和可重用性。

结合DEFER属性使用模块化JavaScript

在使用模块化JavaScript时，defer属性仍然可以发挥作用。通过将模块化JavaScript文件添加到HTML文档中，并使用defer属性，可以确保模块在HTML文档完全解析之后执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modular JavaScript with Defer</title>
</head>
<body>
    <h1>Modular JavaScript with Defer</h1>
    <script src="module1.js" type="module" defer></script>
    <script src="module2.js" type="module" defer></script>
</body>
</html>

八、DEFER属性与项目管理系统

在开发复杂的Web应用程序时，使用项目管理系统可以帮助团队更高效地协作和管理代码。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理项目。

研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了丰富的功能和工具，帮助团队更高效地管理项目和代码。通过使用PingCode，开发团队可以更好地协作和跟踪项目进度。

通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了任务管理、时间跟踪、文档共享等多种功能，帮助团队更高效地协作和管理项目。

九、DEFER属性的性能优化技巧

使用内容分发网络（CDN）

为了进一步提升页面加载性能，可以将JavaScript文件托管在内容分发网络（CDN）上。CDN可以将文件分发到全球各地的服务器，从而缩短文件的下载时间。

压缩和最小化JavaScript文件

通过压缩和最小化JavaScript文件，可以减少文件的大小，从而提升下载速度和页面加载性能。可以使用工具如UglifyJS、Terser等来压缩和最小化JavaScript文件。

十、总结

通过在HTML中使用defer属性，可以有效提升页面加载性能并避免阻塞HTML文档的解析。defer属性的主要优点包括提升页面加载速度、确保脚本的执行顺序、并与模块化JavaScript和项目管理系统结合使用。为了进一步优化页面性能，可以结合使用内容分发网络（CDN）和压缩最小化JavaScript文件。在开发复杂的Web应用程序时，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile来管理项目和团队协作。通过这些最佳实践和工具，可以确保Web应用程序的高性能和高效开发。