JavaScript的加载和运行

JavaScript阻塞是指当JavaScript运行是你其他的事情不能被浏览器处理。这是由于大多数浏览器使用单进程处理UI更新和JavaScript运行等多个任务，而同一时间只能有一个任务被执行，所以JavaScript运行了多上时间，那么浏览器空闲下来响应用户输入之前的等待时间就有多长。也就是说<script>标签的出现使整个页面因脚本解析和运行而出现等待。

有几种方法可以减少JavaScript对性能的影响：

（1）将脚本放在底部。（将所有<script>标签放置在页面的底部，紧靠body关闭标签</body>的上方。此法可以保证页面在脚本运行之前完成解析）

（2）将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更加迅速。不论外部脚本文件还是内联代码都是如此。（每个 HTTP请求都会产生额外的性能负担，下载一个100KB的文件比下载四个
25KB的文件要快。）

（3）延期脚本（使用deffer属性，任何带有defer属性的<script>元素在 DOM加载完成之前不会被执行，不论是内联脚本还是外部脚本文件）

（4）动态脚本元素（script元素通过标准DOM函数创建，新的<script>元素加载一个file.js源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。）——可以跨浏览器，而且简单易用，最常用的模式

（5）XHR脚本注入（技术首先创建一个XMLHttpRequest(XHR)对象，然后下载 JavaScript文件，接着用一个动态<script>元素将 JavaScript代码注入页面；优点：可以下载不立即执行的JavaScript代码，同样的代码在所有现代浏览器中都不会引发异常；缺点：JavaScript文件必须与页面放置在同一个域内，不能从
CDNs下载，所以大型网页通常不采用XHR脚本注入技术）