提高js加载速度，实现js无阻塞加载方式,高性能的加载执行JavaScript
由于js的堵塞特性，当浏览器在加载javascript代码时，不能同时做其他任何事情，如果javascript执行时间越久，浏览器等待响应的时间就越久。所以为了解决防止先执行js代码，然后再继续页面的解析和渲染，我们一般采用调整js脚本的位置，通过采用将所有的<script>标签尽可能的放在<body>标签的底部，来减少对整个页面加载的影响。
如果js文件比较多，会产生大量的Http请求，我们都知道http请求是比较耗费性能的事情，例如你加载1个100kb的文件比加载10个10Kb的文件速度要快，因此我们会采用合并压缩js脚本来达到优化速度的效果，当然有许多出色的工具可以加快JavaScript装入的速度。比如Lab.js，使用它你就可以并行装入JavaScript文件，加快总的装入过程。你还可以为需要装入的脚本设置某个顺序，那样就能确保依赖关系的完整性。而且开发者声称其网站上的速度提升了2倍。
除了上述内容以外，这篇文章主要讲解如果延时加载js和动态加载js，达到页面无堵塞的效果。
js的延时加载
defer的使用
defer是一个常用的优化方案，它表示脚本会被延迟到文档完全被解析和显示之后再执行，加载后续文档元素的过程将和js脚本的加载并行进行（异步），这样页面加载会更快。
<script src="main.js" defer></script>async的使用
async是html5的属性，async 属性规定一旦脚本可用，则会异步执行。async不保证按照脚本出现的先后顺序执行，因此，确保两者之前互不依赖非常重要，指定async属性的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面其他内容，异步脚本一定会在页面的load事件前执行，但可能会在domContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5 和Chrome。
<script async src="main.js"></script>注意点
1、建议异步脚本不要在加载期间修改DOM，当js不需要改变DOM结构时推荐使用异步加载（比如一些统计代码，它与页面执行逻辑无关，也不会改变DOM结构）。
2、延迟脚本并不一定会按照顺序执行，因此，确保两者之前互不依赖非常重要。
js的动态加载
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
}else{ //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}说明：此方法让元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。使用上述方法：
loadScript("main.js", function(){
console.log("File is loaded!");
});如何需要在页面中动态加载很多 JavaScript 文件，我们可以在回调方法中多次调用即可。
js动态注入
创建一个XMLHttpRequest对象，然后下载 JavaScript 文件，接着用一个动态 <script> 元素将 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(null);向服务器发送一个GET 请求 ,去获取main.js文件，当状态成功，我们把获取的js文件动态加载到页面。采取了它的好处是：它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。需要注意的是，加载的js文件不能跨域获取，所以一般网站通常不采用 XHR 脚本注入技术。
总结：
1.
尽可能的将<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
2.尽可能的合并js文件。减少http请求，加载速度也就越快。
3.尽可能的压缩js文件。减少文件体积，加快加载的速度。
4.<script>标签使用defer或async属性。异步加载js。
5.使用动态创建的<script>元素来下载并执行代码。
6.使用 XHR 对象下载 JavaScript 代码并注入页面中。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
