加载脚本延迟 - Javascript

在 Web 应用程序中，延迟加载脚本是一种流行的最佳实践，因为它可以显著提高应用程序的性能。本文将介绍什么是脚本延迟加载，为什么要使用脚本延迟加载，以及如何实现它。

什么是脚本延迟加载？

脚本延迟加载是一种优化技术，它推迟了脚本的加载和执行，直到浏览器完成页面的初步渲染。这种方法可以改善用户体验和页面加载性能，因为它可以减少页面加载时间，同时让渲染引擎有更多的时间来显示内容。

为什么要使用脚本延迟加载？

当浏览器加载页面时，它需要下载所有脚本文件，即使它们不是每个页面都必须使用的。这会增加页面加载时间，并阻塞页面的渲染。如果您有许多脚本文件，或者其中一些脚本文件很大，这个问题就更加严重了。

使用脚本延迟加载，您可以推迟加载不必要的脚本文件，以缩短页面加载时间。这可以改善用户体验，减少页面加载时间，并提高页面速度。

如何实现脚本延迟加载？

1. HTML 标记 defer

使用 HTML 延迟属性，浏览器会推迟加载和执行 JavaScript 文件。这个过程不会阻止其他资源的加载和渲染。在 HTML 中将脚本标记的“defer”属性设置为“true”即可实现。

<script src="example1.js" defer></script>

2. 动态创建脚本标记

使用 JavaScript 动态创建脚本标记，这将推迟加载脚本文件。以下是示例代码：

var script = document.createElement('script');
script.src = 'example2.js';
document.body.appendChild(script);

3. 异步加载脚本标记

在 HTML 中设置 asynchronous 属性为“true”，可以异步加载脚本文件。异步加载脚本文件将不会阻塞其他资源的加载和渲染。

<script src="example3.js" async></script>

小结

使用脚本延迟加载是一种最佳实践，可以提高 Web 应用程序的性能并改善用户体验。通过推迟加载脚本文件，可以减轻页面加载时间，提高速度，并为浏览器留出更多的渲染时间。可以通过 HTML 标记、动态创建脚本标记和异步加载脚本标记来实现脚本延迟加载。

参考文献

• Gracefully Degrading Responsively
• Difference between Async and Defer Attributes in Script Tag
• Optimize CSS and JS delivery with the script-async tag