Javascript性能优化学习笔记1

1. Js的加载最好是放在页面的底部，不会影响到页面的加载

2. Js文件尽量的合并，因为每次碰到<script>的标签浏览器都要执行行一段脚本

3. 无阻塞的脚本

1. 延迟脚本：<script>标签的defer属性的使用，代码能安全地延迟执行，但是只用 IE 和Firefox3.5支持

2.动态脚本元素:

IE:

var script = document.createElement('script');

script.type = 'text/javascript';

script.src="file1.js";

script.onreadystatechange = function(){

if(script.readyState == 'loaded' || script.readyState == 'complete'){

alert('ok');

}

};

document.getElementsByTagName('head')[0].appendChild(script);

除了IE:

var script = document.createElement('script');

script.type = 'text/javascript';

script.src="file1.js";

script.onload = function(){

alert('ok');

};

document.getElementsByTagName('head')[0].appendChild(script);

兼容

function loadScript(url,callback){

var script = document.createElement('script');

script.type = 'text/javascript';

if(script.readyState){

script.onreadystatechange = function(){

if(script.readyState == 'loaded' || script.readyState == 'complete'){

callback();

}

};

}else{

script.onload = function(){

callback():

};

}

}

加载多个Js,保证Js的加载顺序

loadScript('file.js',function(){

loadScript('file1.js',function(){

loadScript('file2.js',function(){

..

})

})

});

3. XMLHttpRequest的脚本注入

优点：下载后不会自动执行，可以推迟到你准备好，所有浏览器兼容

缺点：Js文件必须与所请求的页面处于相同的域