引入外部js脚本加载慢与页面白屏问题的解决

在网页中引入外部的 JS 脚本可以加快页面开发、优化内容并实现各种功能。但是，如果代码存在错误或者脚本过大，会导致用户访问页面速度变慢，甚至出现页面白屏的情况。以下是解决外部 JS 加载慢与页面白屏问题的方法：

1. 在页面底部引入 JS 文件

将 JavaScript 代码放在 HTML 页面底部，这种方法可以减少阻止渲染的代码数量，从而改善页面加载速度。当我们在页面头部引入 JS 文件时，浏览器会在执行 JavaScript 之前，先将所有文件下载完毕，在解析文档之后再执行 JavaScript，因此会增加用户等待页面加载完成的时间。而当我们在页面底部引入 JS 文件时，页面先加载 HTML 和 CSS，所以用户会首先看到页面的结构和样式。当 DOM 结构加载完成后，JavaScript 文件将被加载和执行，这样就可以最大化地减少页面加载时间。

以下是代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <!-- 引入 CSS -->
    <link href="./style.css" rel="stylesheet" />
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是段落文本。</p>

    <!-- 引入 JS -->
    <script src="./main.js"></script>
</body>
</html>

2. 设置 defer 和 async 属性

在引入外部 JS 文件时，可以使用 defer 和 async 属性。这两个属性指定脚本在何时加载和执行。

defer 属性：脚本文件下载过程中不会阻塞页面渲染和DOM树构建，只有在 HTML 解析完成后才会执行这个脚本文件。如果有多个设置了defer属性的脚本文件，则它们的执行顺序是按照它们被加载的顺序执行的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script defer src="./main.js"></script>
</head>
<body>
    <h1>这是一个标题</h1>
    <!-- 这里省略部分内容 -->
</body>
</html>

async 属性：下载过程中和页面的其他操作进行并行处理，不会阻塞页面渲染，但是不能保证多个 async 脚本之间的执行顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script async src="./main.js"></script>
</head>
<body>
    <h1>这是一个标题</h1>
    <!-- 这里省略部分内容 -->
</body>
</html>

这两个属性都可以帮助我们优化页面性能，但是它们所适用的场景是不同的。如果我们需要保证脚本的执行顺序，我们应该使用 defer 属性；如果我们不需要保证执行顺序，我们应该使用 async 属性。

以上是“引入外部js脚本加载慢与页面白屏问题的解决”的攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：引入外部js脚本加载慢与页面白屏问题的解决 - Python技术站

引入外部js脚本加载慢与页面白屏问题的解决

1. 在页面底部引入 JS 文件

2. 设置 defer 和 async 属性

相关文章