谈到网站优化这块，不管是前端后端都有许多各自的优化技巧，这个系列针对的是前端部分的优化；

标题是JavaScript性能提升，为什么说是JavaScript的性能优化呢，事实上如果一个网页完全不使用JavaScript的话可以使用的前端优化技巧微乎其微，正因为有JavaScript的存在我们才需要使用一些技巧让网页加载速度更快，给用户更好的使用体验。

脚本阻塞

相信不管新手老手学习web制作的时候，都会被灌输最简单的优化技巧，把脚本放到body底部，理由也很简单，JavaScript会造成阻塞。

由于大多数浏览器使用单一的进程来处理UI的刷新与JS执行，那么就是在一个时刻只能做一件事，只要出现了<script>标签，在页面执行到这里的时候就会停止标签后面的文件下载与页面渲染动作，直到该<script>标签内的代码执行完成。

加载外部JS文件也是如此，浏览器会等待该文件加载完成并执行完毕后才会接着往下执行。

现代浏览器以及IE8+基本都允许并行下载JS文件了，但是仍然会阻塞其他如图片等资源的下载。
意思就是可以同时下载多个JS文件，脚本的下载过程不会再互相影响，但是图片之类的仍然会受到阻塞的影响。

推荐的脚本放置位置

既然知道了脚本会阻塞UI渲染以及图片等资源的下载，那么最简单的自然是让脚本放到最后执行不就好了，尽可能的将<script>标签放到body标签的底部。

减少脚本数量与限制HTTP请求数

脚本数量越多自然越慢，那么自然可以采取减少脚本数量的方式，外链的脚本与内嵌脚本数量尽量较少，HTML解析过程中遇到script标签都会进入执行，数量多的话自然就会产生额外的时间消耗。
内嵌脚本尽量合并到一个script标签内；
外链脚本与内嵌有一个网络请求的区别，我们知道每个网络请求都会有性能开销的，外链脚本数量多的话自然会产生更多的性能开销，那么鉴于上述原因，减少外链文件数量亦是自然，这里有两个方法：

1.本地文件合并，打包的时候将两个或者多个文件合并成一个，现代JS开发时可以使用webpack和babel来实现，es6本身带有模块化的方法，根据自身需求拆分合并文件即可。(当然要根据情况，不要一昧的合并大量文件，单文件过大当然也会变成问题)

2.服务器合并文件，这个方法属于很少使用的最佳实践，因为它是引入多个外链脚本的最佳实践，却又是被使用的最少的，就我现在看到的，多数网站没有使用这种技术，这个方法由后端实现，我们在发送脚本资源请求的时候不是用的URL吗，既然后端是通过URL来相应的，那我们当然可以直接在URL中告诉服务器我需要这几个文件，麻烦你帮我把他们合并成一个给我。当初的雅虎combo就是这么一个服务，在我们前端使用的时候只要把请求变成类似
<pre><script src="http://abc.com/combo?path/a.js&path/b.js&path/c.js"></script></pre>
然后服务器返回a,b,c三个文件合并后的文件，其实也就是把几个需要文件名当成url params而已，具体操作由服务器来做，这样我们就变成了只使用了一次http请求而拿到了我需要的3个文件(css也同样适用哦)。

延迟加载执行脚本

大型web应用毫无疑问都包含着大量的脚本文件，文件精简与合并也有着它的局限性，单文件过大的时候我们就会选择拆分成多个文件，毕竟单文件过大的时候下载与执行都会占用大量的时间并且会造成阻塞，这个时候我们一般就会采取延迟加载脚本的方式，一般有以下几种方式：

• 使用script标签的defer属性，主流浏览器中script标签都支持该属性，添加了这个属性之后该脚本会在页面完成后执行，页面完成的定义与Jquery中的$(document).ready类似，当script带有defer的时候这个标签放置的位置就不会影响到整体页面渲染了，可以与图片等其他资源并行下载，当DOM加载完成后，带有defer的script才会被执行。

• 使用动态创建script标签的方式下载脚本，这个很好理解，与使用js创建元素一样，我们使用js创建script元素标签并设置其src等属性再将其添加到文档中即可。

• 使用XHR对象下载注入，实际上就是使用AJAX来加载外部文件，然后再动态创建script添加到文档上，这个方法与上一个动态创建script标签的区别在于前者直接将script标签放到文档中后加载文件并在完成后执行，而后者则是先请求外部脚本，然后再将其内容设置给你新建的script对象再添加到文档上，让你有选择其什么时候执行的机会。

结语

这第一部分的内容属于最直观的部分，属于最基本也是最快见效的部分，常规的web应用前端部分只要组织规划好页面请求、脚本加载优化就可以大幅度提升页面加载速度，理清网页的渲染与加载顺序，DOM、CSS、脚本的执行顺序与渲染影响很重要。