高性能JavaScript之脚本加载与执行

管理浏览器中的JavaScript 代码是个非常棘手的问题，因为代码的加载和执行过程会阻塞浏览器的其他过程，比如用户界面绘制、首屏显示和用户交互等。

• 推荐将所有的 script 标签放到 body 标签的底部，以尽量减少对整个页面下载的影响。
• 考虑到 HTTP 请求会带来额外的性能和时间上的消耗，下载单个 100kb 的文件比下载 4 个 25kb 的文件要快，所以尽量减少（合并脚本）页面中外连接脚本文件的数量将会改善性能。
• HTML 4 为 script 标签定义了一个扩展属性：defer。defer 属性指明本元素所含的脚本不会修改 DOM，虽然会立即下载，但是并不会下载完立即执行，知道 DOM 加载完成（onload 事件被触发前执行）。HMTL 5 新添加了一个 async 属性，也是用于异步加载脚本。async 和 defer 的异同：相同点是都采用并行下载，在下载过程中不会产生阻塞；不同点在于执行时机，async 加载完立即执行，而 defer 需要等到 DOM 加载完后执行。
• 动态添加脚本元素

var script = document.createElement('script');
script.src = 'mian.js';
document.getElementsByTagName('body')[0].appendChild(script);

• XMLHttpRequest 脚本注入：优点在于可以下载 JavaScript 而不会立即执行

var xhr = new XMLHttpRequest();
xhr.open('get', 'main.js', true);
xhr.onreadystatechange = function() {
	if (xhr.readyState === 4) {
		if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.text = xhr.responseText;
			document.body.appendChild(script);
		}
	}
}
xhr.send():