JavaScript加载速度优化方法

更新时间：2023年08月26日 09:01:06 投稿：yin

通过使用CDN、压缩、异步加载、尽可能的减少JavaScript文件大小、利用缓存机制、使用Vanilla JS、使用ES6特性、将JavaScript文件放到底部、减少对DOM的访问以及避免重复代码等方法,可以优化JavaScript文件的加载和执行速度,提供更好的用户体验和更高的性能

通过使用CDN、压缩、异步加载、尽可能的减少JavaScript文件大小、利用缓存机制、使用Vanilla JS、使用ES6特性、将JavaScript文件放到底部、减少对DOM的访问以及避免重复代码等方法，可以优化JavaScript文件的加载和执行速度，提供更好的用户体验和更高的性能。

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

从上到下依次边加载边解释执行。如果设计到了引入外部的js代码，那么该代码必须加载完成并解释执行完毕之后才能继续解析后面的HTML 和 js代码。

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

如果加载的外部的js代码比较大，而且是网络js代码，可能会引起页面的假死状态。

一般的解决方案：

（1）将这些js代码放到 body 的末尾。
（2）给script标签添加async属性。让该引入的外部的js代码，实现异步加载。
（3）给script标签添加 defer 属性。让该引入的外部的js代码，实现延迟加载。

js的 async 异步加载介绍：

1：必须针对使用引入外部的js代码，该属性才能生效。
2：如果给引用外部js代码的script添加了 async，那么该引入的js的执行特点如下：
（1）js代码的加载和后续的HTML内容是并行加载的。
（2）如果js代码先加载完了，HTML还没有加载完毕，会暂停HTML的解析。执行js代码，然后再解析。

注意：使用 async 属性的 script代码，各个script代码之间不应该存在上下的依赖关系，因为这些 async 的script代码加载完毕的顺序是不可控的。

<!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：必须针对使用引入外部的js代码，该属性才能生效。

2：所有使用了defer 属性的 script 的加载顺序是固定的。

3：延迟加载。所有的 defer 的script 和后续的HTML 内容可以实现并行加载。

4：如果defer属性的script 代码加载完毕，需要等待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(Content Delivery Network，内容分发网络)来托管JavaScript文件，可以将文件存放在全球各地的服务器上，距离用户更近，从而更快地加载文件。常见的CDN服务提供商包括来自Google的Google Libraries API、来自Microsoft的CDNJS等。

2. 压缩JavaScript文件

JavaScript文件压缩工具能够将文件大小缩小50%以上。这个过程可以使JavaScript文件更快地下载和执行。

例如，Google Closure Compiler可以压缩JavaScript，他具有许多使用选项，包括完全压缩文件，删除注释，删除空格，提取常量等。

3.使用异步加载

在使用JavaScript时，可以在不影响用户体验的前提下，利用异步加载的机制来提升加载速度。可以使用HTML5的async属性或defer属性来实现。

4. 让JavaScript文件尽可能小

减小文件的大小可以减少下载时间，因此可以通过优化JavaScript文件长度来实现优化加载速度的目的。可以在JavaScript文件中压缩代码、删除不需要的注释、换行符，以及删除冗余的代码等。

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

如果在第一次加载完页面后，用户再次访问相同的页面，这些JavaScript文件将使用浏览器的缓存来重新加载，以加快下载速度。

6.使用Vanilla JS

Vanilla JS是一种没有使用任何类库或框架的JavaScript代码。它不依赖于其他库或框架，因此运行更快，加载和执行的速度更快。

7. 使用ES6特性

ES6是ECMAScript的第六个版本，有很多特性都可以用来提升JavaScript的运行速度。例如，使用箭头函数（=>）来代替传统函数，使用let和const来替代var，使用解构赋值等。

8. 将JavaScript文件放到底部

由于HTML解析器会逐行解析文档，因此将JavaScript文件放置在底部，可以确保页面中的所有其他文档元素都已经加载完毕。在这种情况下，JavaScript文件可以在下载完成时立即执行，而不需要等待其他组件加载完成。

9. 减少对DOM的访问

DOM是JavaScript和HTML之间的桥梁,通过它可以访问网页所有的元素。DOM读写和操作操作都会严重影响JavaScript代码的性能。接口可以通过缓存DOM操作结果，减少DOM访问次数来优化性能。

例如，通过缓存某个元素的引用，而不是在每次访问时重新查找该元素的引用，可以大大减少对DOM的访问，并提高JavaScript的性能。

10. 避免重复代码

对JavaScript文件进行分析和评估，找出其中的冗余代码并删除。如果使用JSHint工具，可以检查如何改进代码，并避免重复代码的生成。

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

您可能感兴趣的文章:

php+js实现倒计时功能
由PHP传入JS处理的时间戳我说怎么老是对不上号呢，原来JS时间戳为13位，包含3位毫秒的，而PHP只有10位不包含毫秒的。恩，基础还是要补补的
2014-06-06
微信小程序之批量上传并压缩图片的实例代码
这篇文章主要介绍了微信小程序之批量上传并压缩图片的实例代码,需要的朋友可以参考下
2018-07-07
JavaScript学习笔记之取数组中最大值和最小值
在实际业务中有的时候要取出数组中的最大值或最小值。但在数组中并没有提供arr.max()和arr.min()这样的方法。那么是不是可以通过别的方式实现类似这样的方法呢？那么今天我们就来整理取出数组中最大值和最小值的一些方法，需要的朋友一起学习吧
2016-03-03
web 页面分页打印的实现
网上找的，经我整理添加demo如下
2009-06-06
JavaScript修改注册表实例代码
这篇文章主要介绍了JavaScript修改注册表实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
JavaScript实现图片轮播的方法
这篇文章主要介绍了JavaScript实现图片轮播的方法,使用纯javascript实现图片轮播切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07
JS下拉框内容左右移动效果的具体实现
这篇文章介绍了JS下拉框内容左右移动效果的具体实现方法，有需要的朋友可以参考一下
2013-07-07
微信小程序骨架屏的应用与实现步骤详细记录
所谓骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构,直到请求数据返回后再渲染页面,补充进需要显示的数据内容,这篇文章主要给大家介绍了关于微信小程序骨架屏的应用与实现的相关资料,需要的朋友可以参考下
2022-05-05
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
得益于API,我们可以用JavaScript编写Chrome扩展实现与浏览器的交互及时间通知。值得一提的是现在Chrome拥有后台进程可以使通知在前台浏览器关闭的情况下依然能够生效.
2016-05-05
详解webpack进阶之插件篇
这篇文章主要介绍了详解webpack进阶之插件篇，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07