HTML4规范指出<script>标签可以放在HTML文档的<head>或<body>中，并允许出现多次。
浏览器的阻塞特性：当浏览器在执行javscript代码时，不能同时做其他任何事情，javascript执行过程耗时越久，浏览器等待响应的时间就会越长。
注：浏览器在解析到<body>标签之前，不会渲染页面的任何部分。
IE8及以上，其它新版浏览器允许并行下载javascript文件。
性能问题：把脚步放在页面顶部将会导致明显的延迟，通常表现为显示页面空白，用户无法浏览内容。
解决方法：
1.将所有的<script>标签尽可能放在<body>标签的底部，以减少对整个页面下载的影响。
注：雅虎特别性能小组提出的优化javascript的首要规则：将脚本放在底部。
2.减少页面包含的<script>标签数量（无论外链脚本还是内嵌脚本），合并脚本文件（使用压缩工具）。
即：减少javascript文件大小及限制http请求数。
3.defer属性：
HTML4 中的属性,带有defer属性的<script>标签可以放置在文档的任何位置，对应的javascript文件将在解析到<script>标签时开始下载，但并不会执行，直到DOM加载完成。
<script defer>
alert(‘defer');
</script>
<script>
alert(’script');
</script>
<script>
window.οnlοad= function() {
alert(‘load');
}
</script>
弹出顺序：script,defer,load
注：带有defer属性的<script>元素是在onload事件处理器执行之前被调用。
4.
async 属性:是 HTML5 中的新属性,
async 属性规定一旦脚本可用，则会异步执行。
如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）
<script type="text/javascript" src="demo_async.js"
async="async"></script>
注释：async 属性仅适用于外部脚本（只有在使用 src 属性时）。
5.动态加载脚本：无论在何时启动下载，文件的下载和执行过程不会阻塞页面其他进程。
function loadScript(url,callback) {
var script = document.createElement(“script");
script.type = “text/javascript”;
if (script.readyState) { //IE
script.onreadystatechange = function() {
if (script.readyState == “load” || script.readyState == “complete”) {
script.onreadystatechange = null;
callback();
}
};
}else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementByTagName(“head”)[0].appendChild(script);
}
6.使用XMLHttpRequest(XHR)对象获取脚本并注入到页面中。
var xhr = new XMLHttpRequest();
xhr,open(“get”,”file.js”,true);//启动一个请求，以备发送，是否异步发送请求
xhr.onreadystatechange = function() {
if (xhr.status == 4) {
if (hr.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);
}
}
};
缺点：javascript文件必须与所请求的页面处于相同的域，不能从CDN下载。
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
