一、优化 JavaScript 代码位置
1. 将脚本标签放置在页面底部
- 在 HTML 文档中，默认情况下，浏览器是按照从上到下的顺序解析和执行代码的。如果将 `` 标签放置在 head 标签内或者页面的顶部，浏览器在加载和执行 JavaScript 代码时，会暂停后续页面元素的加载和渲染。而把 `` 标签移到页面底部，即 body 标签之前，页面的主体内容可以先行加载和显示，等到页面的大部分内容都加载完成后，再执行 JavaScript 代码，从而减少加载阻塞的时间。例如：
< lang="en">
欢迎来到我的网站
这是一个示例页面。
<script src="script.js">
2. 使用 `defer` 属性
- `defer` 属性用于指示浏览器在下载脚本的同时继续解析 HTML 文档，并在 HTML 文档解析完成后尽快执行脚本。这样可以避免脚本加载阻塞页面的渲染，同时保证脚本按照在页面中出现的顺序执行。使用方法如下：
<script src="script.js" defer>
- 需要注意的是，使用了 `defer` 属性的脚本会在文档解析完成后立即执行，而不考虑它们在页面中的相对位置。如果有多个带有 `defer` 属性的脚本，它们的执行顺序与它们在页面中出现的顺序相同。
3. 使用 `async` 属性
- `async` 属性表示异步加载脚本，浏览器在下载脚本时不会阻塞页面的解析和渲染，脚本下载完成后会立即执行，而不会等待其他脚本的加载和执行。这可以提高页面的加载速度，但无法保证脚本的执行顺序。例如：
<script src="script.js" async>
- 与 `defer` 不同，带有 `async` 属性的脚本可能会在任意时间点执行，即使它们是按照顺序出现在页面中的。因此，在使用 `async` 属性时，需要确保脚本之间不存在依赖关系，否则可能会导致意外的行为。
二、压缩和合并 JavaScript 文件
1. 压缩 JavaScript 代码
- 通过去除 JavaScript 文件中的空格、换行符、注释等不必要的字符，可以减小文件的大小，从而加快下载速度。有许多工具可以用来压缩 JavaScript 代码，如 UglifyJS、Terser 等。以 UglifyJS 为例，可以在命令行中使用以下命令进行压缩：
uglifyjs original.js -o compressed.js
- 其中，`original.js` 是要压缩的原始文件，`compressed.js` 是压缩后的文件。压缩后的代码虽然可读性较差，但对于浏览器来说，加载速度会得到显著提升。
2. 合并 JavaScript 文件
- 如果一个网站包含多个较小的 JavaScript 文件，每次加载页面时都需要发起多次请求来获取这些文件，这会增加网络延迟。可以将多个相关的 JavaScript 文件合并为一个文件，减少请求次数，提高加载效率。例如，如果有三个 JavaScript 文件 `file1.js`、`file2.js` 和 `file3.js`，可以使用工具将它们合并为一个文件 `combined.js`：
cat file1.js file2.js file3.js > combined.js
- 然后再在 HTML 文件中引用合并后的文件：
<script src="combined.js">
三、利用浏览器缓存
1. 设置缓存头
- 服务器可以通过设置适当的缓存头来控制浏览器对资源的缓存行为。对于 JavaScript 文件，可以设置 `Cache-Control` 头来指定缓存策略，如缓存时间、是否允许缓存等。例如：
http
Cache-Control: max-age=31536000, immutable
- 上述代码表示该 JavaScript 文件可以在浏览器缓存中保存一年，并且在这一年内不会发生变化（即不可变）。当浏览器再次访问该页面时，如果缓存有效，就直接从缓存中读取 JavaScript 文件，而不需要重新下载，从而大大提高了页面的加载速度。
2. 版本控制
- 当 JavaScript 文件发生更新时，为了避免浏览器使用旧的缓存文件，需要改变文件的缓存键。一种常见的方法是在文件名中添加一个版本号或哈希值。例如，将 `script.js` 重命名为 `script.v1.js` 或 `script.abc123.js`。这样，浏览器会认为这是一个新的文件，从而重新下载并缓存。
四、使用 Content Delivery Network（CDN）
1. 选择合适的 CDN 服务提供商
- CDN 是一种分布式网络，它将网站的静态资源（包括 JavaScript 文件）缓存到全球多个节点服务器上。当用户访问网站时，CDN 会根据用户的地理位置选择最近的节点服务器来提供资源，从而减少数据传输的距离和时间，提高加载速度。目前市面上有许多知名的 CDN 服务提供商，如阿里云 CDN、腾讯云 CDN、七牛云 CDN 等。在选择 CDN 服务提供商时，需要考虑其节点分布、性能、价格等因素。
2. 将 JavaScript 文件部署到 CDN
- 一旦选择了合适的 CDN 服务提供商，就可以将 JavaScript 文件上传到 CDN 平台，并将文件的链接地址更新到网站中。例如，原来本地服务器上的 JavaScript 文件路径为 `/js/script.js`，部署到 CDN 后，路径可能变为 `https://cdn.example.com/js/script.js`。在 HTML 文件中引用该文件时，需要使用新的 CDN 链接：
<script src="https://cdn.example.com/js/script.js">
通过以上几种方法的综合运用，可以有效地减少 Chrome 浏览器中 JavaScript 加载阻塞问题，提高页面的加载速度和用户体验。在实际开发中，开发者可以根据具体情况选择合适的优化策略，并不断测试和调整，以达到最佳的性能效果。希望本文能帮助大家在网页开发过程中更好地应对 JavaScript 加载阻塞问题，为用户提供更流畅的浏览体验。
