javascript的加载
1.在</body>前放置<script type="text/javascript"></script>标签；
2.非阻塞脚本；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript">
alert('common');
</script>
<script type="text/javascript" defer>
alert('defer');
</script>
<script type="text/javascript">
window.onload = function(){
alert('onload');
}
</script>
</body>
</html>
执行顺序:common--->defer--->onload
3.动态脚本一；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function(){
alert('script loaded!');
};
script.src = 'loaded.js';
document.getElementsByTagName('head')[0].appendChild(script);
</script>
</body>
</html>
loaded.js文件如下：
alert('loaded.js')
执行顺序:loaded.js--->script loaded!
4.动态脚本二；
html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript" src="loadScript.js"></script>
<script type="text/javascript">
loadScript('script.js', function(){
alert('script.js loaded');
});
</script>
</body>
</html>
loadScript.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);
}
script.js如下：
alert('script.js');
执行书序：script.js--->script is loaded
5.xhr脚本注入；
html如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('get', './script.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);
</script>
</body>
</html>
script.js如下：
alert('script.js is loaded');
6.推荐非阻塞模式一；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript('the-rest.js', function(){
Application.init();
});
</script>
</body>
</html>
7.推荐非阻塞模式二；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xxx</title>
</head>
<body>
<script type="text/javascript">
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);
}
loadScript('the-rest.js', function(){
Application.init();
});
</script>
</body>
</html>
8.使用第三方插件；
一：使用YUI3进行压缩合并；
二：使用LazyLoad.js加载；
三：使用LABjs加载。