JavaScript加载速度优化：Async、Defer与性能提升实战

通过采用CDN分发、代码压缩、异步或延迟加载、精简文件体积、启用浏览器缓存、使用原生JavaScript（Vanilla JS）、应用ES6新特性、将脚本置于文档底部、优化DOM交互以及消除冗余代码等综合手段，可显著改善JavaScript文件的加载与执行效率，从而提升页面性能与用户体验。

script 代码块的默认加载和执行顺序：

浏览器解析HTML时，会自上而下依次加载并立即执行遇到的脚本。若脚本涉及外部资源，必须等待该外部JS完全加载并执行结束后，HTML与后续JS代码的解析才会继续。

默认加载执行的顺序的问题：

当引入的外部JS文件体积较大且依赖网络传输时，这种阻塞式加载可能导致页面出现“假死”状态，严重影响用户交互体验。

一般的解决方案：

（1）将JS代码移至 body 标签末尾； （2）为 script 标签添加 async 属性，实现外部JS的异步加载； （3）为 script 标签添加 defer 属性，实现外部JS的延迟加载。

js的 async 异步加载介绍：

1. async 属性仅对引入外部JS文件的 script 标签生效。 2. 添加 async 后，JS执行特点如下： （1）JS文件的加载过程与后续HTML内容的解析并行进行； （2）若JS文件先于HTML加载完毕，浏览器会暂停HTML解析，优先执行该JS代码，随后再恢复HTML解析。

注意：使用 async 属性的 script 代码之间不应存在上下依赖关系，因为各 async 脚本加载完成的顺序是不确定的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" async></script>
</head>
<body>
<script src="js/test2.js" async></script>
<script>
    console.log ("test");//先执行
</script>
</body>
</html>

js的 defer 延迟加载介绍：

1. defer 属性同样仅对引入外部JS文件的 script 标签生效。

2. 所有标记为 defer 的 script 标签，其加载顺序是固定的，保持文档中的出现顺序。

3. 延迟加载机制：所有 defer 脚本与后续HTML内容可并行加载。

4. 若 defer 脚本加载完毕，需等待HTML文档解析完成后，JS代码才会执行。

5. 若同时使用 defer 和 async 属性，async 的优先级高于 defer。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/test1.js" defer>第二个执行</script>
</head>
<body>
<script src="js/test2.js" defer>最后执行</script>
<script>
    console.log ("test");//先执行
</script>
</body>
</html>

JavaScript加载速度优化方法

1. 使用CDN

利用CDN（内容分发网络）托管JavaScript文件，可将文件部署至全球各地的服务器节点，使用户从物理距离更近的节点获取资源，从而加速文件加载。常见的CDN服务提供商包括Google Libraries API、Microsoft CDNJS等。

2. 压缩JavaScript文件

JavaScript压缩工具可将文件大小缩减50%以上。文件体积减小意味着下载时间缩短，进而提升执行速度。

例如，Google Closure Compiler 可用于压缩JavaScript，它提供多种选项，包括完全压缩、移除注释、去除空格以及提取常量等。

3.使用异步加载

在JavaScript开发中，可利用异步加载机制在不影响用户体验的前提下提升加载速度。可通过HTML5的 async 属性或 defer 属性来实现这一目标。

4. 让JavaScript文件尽可能小

减小文件体积可直接缩短下载时间。通过优化代码长度，如压缩代码、移除无用注释和换行符、删除冗余逻辑等，可有效优化加载速度。

5. 利用缓存机制来再次加载

若用户首次加载页面后再次访问相同页面，浏览器将利用本地缓存重新加载JavaScript文件，从而加快后续访问的下载速度。

6.使用Vanilla JS

Vanilla JS指不使用任何第三方库或框架的纯JavaScript代码。由于不依赖其他库，其运行效率更高，加载和执行速度更快。

7. 使用ES6特性

ES6（ECMAScript 第六版）包含多项提升JavaScript运行速度的特性。例如，使用箭头函数（=>）替代传统函数定义，使用 let 和 const 替代 var，以及应用解构赋值等语法。

8. 将JavaScript文件放到底部

由于HTML解析器逐行处理文档，将JavaScript文件放置在文档底部，可确保页面其他元素已加载完毕。此时，JS文件下载完成后可立即执行，无需等待其他组件加载。

9. 减少对DOM的访问

DOM是JavaScript与HTML交互的桥梁，频繁读写和操作DOM会严重拖累JavaScript性能。通过缓存DOM操作结果，减少重复访问次数，可优化性能。

例如，缓存特定元素的引用，而非每次访问时重新查找，可大幅减少DOM访问次数，提升JavaScript执行效率。

10. 避免重复代码

对JavaScript文件进行审查，识别并删除冗余代码。使用JSHint等工具检查代码质量，有助于改进代码结构并避免生成重复代码。

到此这篇关于JavaScript加载速度优化方法的文章就介绍到这了,更多相关js加载速度优化内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！