JavaScript 性能优化：理解脚本加载与执行阻塞

JavaScript 阻塞机制对性能的影响

在浏览器环境中，JavaScript 的执行效率被视为开发者必须解决的核心可用性问题。这一挑战源于 JavaScript 的阻塞式运行特征：当脚本正在运行时，浏览器无法处理其他任务。事实上，大多数浏览器采用单进程模型来同时处理用户界面（UI）更新和 JavaScript 执行等多个任务，而在同一时刻，系统只能执行其中一个任务。

JavaScript 脚本执行的时间越长，浏览器在恢复空闲状态以响应用户输入之前，用户需要等待的时间也就越久。

从基本原理来看，<script> 标签的出现会导致整个页面因脚本的解析和执行而产生等待。无论 JavaScript 代码是内联编写还是包含在独立的外部文件中，页面的下载和解析过程都必须暂停，直到脚本处理完成，之后才能继续。这是页面生命周期中不可或缺的一部分，因为脚本可能在运行过程中修改页面内容。

一个典型的例子是 document.write() 函数，具体代码如下：

<html>

<head>

<title>Script Example</title>

</head>

<body>

<p>

<script type=”text/javascript”>

document.write(“The date is ” + (new Date()).toDateString());

</script>

</p>

</body>

</html>

当浏览器遇到上述 HTML 页面中的 <script> 标签时，由于无法预知 JavaScript 是否会在 <p> 标签中添加内容，浏览器会暂停操作，先运行这段 JavaScript 代码，然后再继续解析和渲染页面。使用 src 属性加载外部 JavaScript 文件时也会发生类似情况：浏览器必须先下载外部文件的代码，这需要消耗一定时间，随后解析并运行该代码。在此过程中，页面解析和用户交互会被完全阻塞。

脚本位置与页面渲染延迟

HTML 4 规范指出，<script> 标签可以放置在 HTML 文档的 <head> 或 <body> 标签中，且可以多次出现。传统上，<script> 标签主要用于加载外部 JavaScript 文件。<head> 部分除了包含此类代码外，还包含 <link> 标签用于加载外部 CSS 文件和其他页面中间件。也就是说，最好将样式和行为所依赖的部分放在一起，优先加载它们，以确保页面具有正确的外观和行为。例如：

<html>

<head>

<title>Script Example</title>
<– Example of inefficient script positioning –>
<script type=”text/javascript” src=”file1.js”></script>
<script type=”text/javascript” src=”file2.js”></script>
<script type=”text/javascript” src=”file3.js”></script>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

</body>

</html>

虽然这些代码看起来无害，但它们确实存在性能问题：在 <head> 部分加载了三个 JavaScript 文件。由于每个 <script> 标签都会阻塞页面解析过程，直到其完整下载并运行外部 JavaScript 代码后，页面处理才能继续。用户必须忍受这种可察觉的延迟。

需要注意的是，浏览器在遇到 <body> 标签之前，不会渲染页面的任何部分。将脚本放置在页面顶端会导致明显的延迟，通常表现为：页面打开时首先显示为空白页面，此时用户既无法阅读内容，也无法与页面进行交互。

并行下载与推荐的最佳实践

Internet Explorer 8、Firefox 3.5、Safari 4 和 Chrome 2 允许并行下载 JavaScript 文件。这一进展表明，当一个 <script> 标签正在下载外部资源时，不必阻塞其他 <script> 标签的下载。然而，不幸的是，JavaScript 文件的下载仍然会阻塞其他类型资源的下载过程。即使脚本之间的下载互不阻塞，页面仍需等待所有 JavaScript 代码下载并执行完成后才能继续。因此，尽管浏览器通过允许并行下载提高了性能，但脚本阻塞问题并未完全解决。

由于脚本会阻塞其他页面资源的下载，推荐的解决方案是：将所有 <script> 标签放置在尽可能接近 <body> 标签底部的位置，以尽量减少对整个页面下载的负面影响。例如：

<html>

<head>

<title>Script Example</title>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
<body>
<p>Hello world!</p>
<– Example of recommended script positioning –>
<script type=”text/javascript” src=”file1.js”></script>
<script type=”text/javascript” src=”file2.js”></script>
<script type=”text/javascript” src=”file3.js”></script>
</body>

</html>

此代码展示了推荐的 <script> 标签在 HTML 文件中的位置。尽管脚本下载之间互相阻塞，但页面主体内容已经下载完成并显示在用户面前，因此进入页面的速度不会显得过于缓慢。

以上就是关于 JavaScript 优化内容中 Loading and Execution（加载和运行）的相关介绍，希望对大家的学习有所帮助。