JavaScript（缩写JS）是一种解释型的编程语言，大部分的网页都含有JavaScript代码，本文将介绍5个JavaScript性能优化技巧，让网站更快、更高效。
1、避免加载太多的JS文件
在HTTP实现的瓶颈之一是其并发要依赖于多重连接，如果JS文件太分散，加载次数较多的话，会使网页性能下降。如果支持HTTP2的话，可以改善这个问题，因为HTTP2支持多路复用请求。
解决办法：减少浏览器下载的 JavaScript 文件数量可以提高网站性能。
优化方案
Google 推荐的一种办法是将较小的文件合并在一起，下载一个较大的文件，从而减少下载次数。WordPress网站推荐使用Autoptimize、WP Rocket等插件。
另一种办法是在站点上支持 HTTP2，这样无需合并文件。
2、避免过多的 DNS 查询
如果JS文件是通过外部引用的，那么每一个不同的域名将会产生一定的DNS解析时间。
解决办法：尽可能在本地服务器上加载JS，减少外部引用。
优化方案
为了减少 DNS 查找次数，尽量在自己的站点上缓存外部引用的 JavaScript 文件。
3、消除未使用的 JavaScript
不论是内联还是外部加载的JS文件，只要出现在HTML中，浏览器都会下载与解析，如果部分JavaScript是当前网页没调用的，一定要清除相应代码。
可以通过PageSpeed Insights检测，检查是否有减少未使用的 JavaScript的建议。
优化方案
可以使用Tree shaking技术来移除未引用的JavaScript代码。
WordPress网站推荐使用Perfmatters插件的脚本管理器功能：允许在每个帖子/页面的基础上禁用指定脚本或禁用指定插件额外加载的脚本。
4、消除低效的 JavaScript
什么是低效的JavaScript代码这是一个很大的话题，本文限于篇幅也不可能全面介绍。总之这牵涉到编码的质量。
但在网页的首屏浏览中无需引用的JavaScript代码应该使用延迟或推迟加载技术，这样是可以大幅提高网页性能的。这也就是Google说的消除渲染阻塞资源。
另外要注意Document.write：如果使用不当，可能会导致页面出现严重的性能问题，因为它会阻止其他操作的发生。
对于第三方JS库，以满足需求为前提，并不是版本越高越好，而是在满足功能需求和安全性的前提下，小巧精简的才最佳。
5、设置JS文件浏览器缓存
通过浏览器缓存JS，是JavaScript性能优化技巧最后一个步骤。
检查JS文件在浏览器加载中是否携带缓存相应头，如以下示例：
如果没有cache-control响应头或cache-control: no-cache, must-revalidate, max-age=0之类的，建议开启JS文件浏览器缓存。缓存时间推荐30天或以上。
优化方案
Nginx示例：
location ~ .*\.(js|css)?$
{
expires 356d;
error_log /dev/null;
access_log /dev/null;
}更多设置静态资源浏览器缓存的方法请阅读：Nginx与Apache设置静态资源缓存
