JavaScript 如何定义脚本在页面解析完成后执行

在本文中，我们将了解如何在页面解析完成后执行脚本。

当您使用<script>标签包含任何外部脚本时，您有一个选项，可以在HTML页面加载完成后加载并执行脚本，为了实现这一点，您可以在脚本标签中使用defer关键字作为属性。当您包含任何可能阻塞页面UI渲染的庞大外部脚本时，使用脚本标签中的defer属性可以先加载HTML，当UI渲染完成后再执行庞大的脚本。

defer是一个布尔属性。它以异步方式加载脚本，并在HTML加载完成后执行。defer关键字只应与外部脚本一起使用，意味着应该存在src属性。它在DOM内容准备就绪后加载脚本，但在DOMContentLoaded触发之前。

使用defer关键字包含的脚本称为延迟脚本。

语法：

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

示例：

在这个示例中，我们包含了一个重的脚本（jQuery脚本），并展示了两个输出的区别。在第一个输出中，我们没有使用defer关键字；而在第二个输出中，我们使用了defer关键字。

<!DOCTYPE html> 
<html> 
<body> 
    <p>Content before script</p> 
    <script defer  
            src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
  <p>Content after script</p> 
    <button onclick="window.location.reload()"> 
        Refresh 
    </button> 
</body> 
  
</html>

输出：