前端性能优化：细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨Javascript在加载与执行过程中的优化思路与实践方法，既是细说，文中在涉及原理性的地方，不免会多说几句，还望各位读者保持耐心，仔细理解，请相信，您的耐心付出一定会让您得到与之匹配的回报。

随着用户体验的日益重视，前端性能对用户体验的影响备受关注，但由于引起性能问题的原因相对复杂，我们很难但从某一方面或某几个方面来全面解决它，这也是我行此文的原因，想以此文为起点，用一系列文章来深层次探讨与梳理有关Javascript性能的方方面面，以填补并夯实自己的知识结构。

本文大致的行文思路，包含但不局限：

• 不得不说的Javascript阻塞特性

• 合理放置脚本位置，以优化加载体验，js脚本放在 标签闭合之前。

• 减少HTTP请求次数，压缩精简脚本代码。

• 无阻塞加载Javascript脚本：

  • 使用

    以上代码是一个简单的html界面，其中加载了两个js脚本文件和一个css样式文件，由于js的阻塞问题，当加载到index-1.js的时候，其后面的内容将会被挂起等待，直到index-1.js加载、执行完毕，才会执行第二个脚本文件index-2.js，这个时候页面又将被挂起等待脚本的加载和执行完成，一次类推，这样用户打开该界面的时候，界面内容会明显被延迟，我们就会看到一个空白的页面闪过，这种体验是明显不好的，因此我们应该尽量的让内容和样式先展示出来，将js文件放在最后，以此来优化用户体验。

    从请求次数上优化： 减少请求次数

    有一点我们需要知道：页面加载的过程中，最耗时间的不是js本身的加载和执行，相比之下，每一次去后端获取资源，客户端与后台建立链接才是最耗时的，也就是大名鼎鼎的Http三次握手，当然，http请求不是我们这一次讨论的主题，想深入了解的自行搜索，网络上相关文章很多。

    因此，减少HTTP请求，是我们着重优化的一项，事实上，在页面中js脚本文件加载很很多情况下，它的优化效果是很显著的。要减少HTTP的请求，就不得不提起文件的精简压缩了。

    文件的精简与压缩

    要减少访问请求，则必然会用到js的精简(minifucation)和压缩(compression)了，需要注意的是，精简文件实际并不复杂，但不适当的使用也会导致错误或者代码无效的问题，因此在实际的使用中，最好在压缩之前对js进行语法解析，帮我们避免不必要的问题（例如文件中包含中文等unicode转码问题）。

    解析型的压缩工具常用有三：YUI Compressor、Closure Complier、UglifyJs

    YUI Compressor: YUI Compressor的出现曾被认为是最受欢迎的基于解析器的压缩工具，它将去去除代码中的注释和额外的空格并且会用单个或者两个字符去代替局部变量以节省更多的字节。但默认会关闭对可能导致错误的替换，例如with或者eval();

    Closure Complier: Closure Complier同样是一个基于解析器的压缩工具，他会试图去让你的代码变得尽可能小。它会去除注释和额外的空格并进行变量替换，而且会分析你的代码进行相应的优化，比如他会删除你定义了但未使用的变量，也会把只使用了一次的变量变成内联函数。

    UglifyJs：UglifyJs被认为第一个基于node.js的压缩工具，它会去除注释和额外的空格，替换变量名，合并var表达式，也会进行一些其他方式的优化

    每种工具都有自己的优势，比如说YUI压缩后的代码准确无误，Closure压缩的代码会更小，而UglifyJs不依靠于Java而是基于Javascript，相比Closure错误更少，具体用哪个更好我觉得没有个确切的答案，开发者应该根据自己项目实际情况酌情选择。

    从加载方式上优化：无阻塞脚本加载

    在Javascript性能优化上，减少脚本文件大小并限制HTTP请求的次数仅仅是让界面响应迅速的第一步，现在的web应用功能丰富，js脚本越来越多，光靠精简源码大小和减少次数不总是可行的，即使是一次HTTP请求，但文件过于庞大，界面也会被锁死很长一段时间，这明显不好的，因此，无阻塞加载技术应运而生。

    简单来说，就是页面在加载完成后才加载js代码，也就是在window对象的load事件触发后才去下载脚本。 要实现这种方式，常用以下几种方式：

    延迟脚本加载（defer）

    HTML4以后为

    带defer属性的