可以缓存外部 Javascript 文件 - Javascript

当我们使用外部 Javascript 文件时，每次打开网页都需要重新请求和下载该文件，这可能会导致网页加载速度变慢。但幸运的是，浏览器提供了一种机制来缓存这些外部 Javascript 文件，以便更快地加载网页。

缓存机制

当浏览器请求外部 Javascript 文件时，它会先检查本地缓存中是否已经存在该文件。如果存在且未过期，则直接使用缓存中的文件，否则重新从服务器请求该文件。

如何判断文件是否过期呢？浏览器通常使用文件的 HTTP 标头（例如 ETag 或 Last-Modified）来确定文件是否已更改。如果文件尚未更改，则认为缓存仍然有效。

在 HTML 页面中启用缓存

要启用 Javascript 文件的缓存，我们需要设置合适的 HTTP 标头。具体来说，我们需要在服务器端为每个 Javascript 文件提供一个 Last-Modified 或 ETag 标头，用于表示该文件的修改时间或唯一标识符。例如，可以使用以下 PHP 代码生成 Last-Modified 标头：

<?php
$last_modified_time = filemtime($path_to_javascript_file);
$etag = md5_file($path_to_javascript_file);
header('Last-Modified: '.gmdate('D, d M Y H:i:s', $last_modified_time).' GMT');
header('Etag: '.$etag);
?>

接下来，在 HTML 页面中将 Javascript 文件链接到这些标头。例如：

<script type="text/javascript" src="path/to/script.js"></script>

在 Javascript 中检查缓存

我们还可以使用 Javascript 代码来检查外部文件的缓存情况。 这可以通过 XMLHttpRequest 对象或 fetch API 实现。以下是一个使用 XMLHttpRequest 的例子：

function loadCachedScript(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        callback(xhr.responseText);
      } else {
        console.error('Failed to load script: ' + url);
      }
    }
  };
  xhr.open('GET', url, true);
  xhr.setRequestHeader('Cache-Control', 'max-age=3600');
  xhr.send();
}

loadCachedScript('path/to/script.js', function(scriptContent) {
  eval(scriptContent);
});

在上面的代码中，我们使用 XMLHttpRequest 对象来加载 Javascript 文件，并设置了 max-age 标头来缓存该文件。在文件已经被缓存后，我们可以直接执行文件内容。

总结

使用缓存外部 Javascript 文件可以显著减少网页加载时间，因此推荐在项目中使用。我们需要注意正确地设置 HTTP 标头以及在 Javascript 中检查缓存。