JavaScript加载速度优化方法
投稿：yin
通过使用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加载速度优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！