Javascript 加载和执行-性能提高篇_javascript技巧

Js的阻塞性
Javascript 在浏览器中的性能问题，可能是最重要的可用性问题
Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行
不管是内嵌的还是外链的，下载并立即执行 因为它有可能会修改页面

页面生存周期的概念
瀑布图中看到了下载时间和executing time
在head中加入script 和link body加载到前不会输出任何东西，因此会看到空白页面

页面在到script时，不知道script里会做什么，所以必然阻塞，等它执行
Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响
结论， 将脚本放在底部加载

组织脚本
目标 最小化迟延时间
问题
引用多个script文件 内嵌多个script标签
每个http请求都会带来性能上的开销
紧跟在link 后的script 是个错误 它会等待css的加载，以求获得最精准的描绘
结论:减少script标签的数量
将多个js文件合并成一个，打包工具
yahoo的合并处理器

无阻塞的脚本
js倾向于阻止浏览器的某些处理过程，如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数
但是功能丰富与代码量之间的矛盾， 合并成单个文件却体积大会锁死浏览器一大段时间，于是我们需要逐步加载javascript文件
重点：在页面加载完成后加载javascript文件

1、延迟加载脚本
defer 属性
如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处，它能让文件并行下载，并不会立即执行，而会在onload事件后再执行,适用于任何script标签
2、动态加载脚本
一个function

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 {
script.onload = function(){
callback();
}
}
}

这里要注意浏览器的兼容性，删除事件，
如果有多个文件需要这样加载，那么可以

loadScript('file1.js', function(){
loadScript('file2.js',function(){
})
});

3、XHR脚本注入

var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
　　if(xhr.readyState == 4) {
　　　　if(xhr.status >= 200 && xhr.status var oScript = document.createElement('script');
　　　　 oScript.text = xhr.responseText;
　　　　 document.body.appendChild(oScript);
}
}
}

304表示从缓存取 text将ajax的内容放入text

它的优点
兼容性好，异步， 缺点：不能扩域 不能从cdn取内容