提升Web性能的脚本优化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/konglingnan999/article/details/55805696

脚本会对web应用的整体性能造成影响。为保证应用流畅的运行，在为文档编写和应用脚本时，需要注意一些问题。

1.尽量少访问DOM和尽量减少标记

    不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。

    例如：document.getElementsByTagName("a")，每执行一次就会遍历一遍DOM树，如果执行多次的话，就会遍历多遍DOM树。所以需要这样写：var links = document.getElementsByTagName("a")，后面的操作只需要使用links就可以了。


2.合并和放置脚本

    合并：推荐把所有的外部js文件合并到一个脚本中。这样就可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时首先要考虑的。

    放置：把脚本放在<head>内会导致浏览器无法并行加载其他文件（如图像或其他脚本）。根据HTTP规范。浏览器每次从同一个域名中最多只能同时下载2个文件。而在下载脚本期间，浏览器不会下载其他任何文件，即使来自不同域名的文件也不会下载，所有资源都要等脚本加载完毕后才能下载。
        所以，把<script>放在文档末尾</body>之前，就可以让页面变得更快。


    3.压缩脚本

        压缩脚本文件也可以加快加载速度。

        压缩脚本就是把脚本文件中不必要的字节，如空格和注释，统统删除。精简后的代码虽然不容易看到，但能大幅减少文件的大小。

        我们应该有两个版本，一个是工作副本（script.js），可以修改代码并添加注释；另一个是精简副本（script.min.js），用于放在站点上。为了区分，最好在精简副本的文件名中加上min字样。

js脚本性能优化