网站性能提升----脚本的加载执行

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

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

脚本阻塞

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

由于大多数浏览器使用单一的进程来处理UI的刷新与JS执行，那么就是在一个时刻只能做一件事，只要出现了
然后服务器返回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、脚本的执行顺序与渲染影响很重要。