脚本位置
由于脚本会阻塞页面其他资源的下载, 因此推荐将所有的< script >标签尽可能放到< body >标签的底部, 以尽量减少对整个页面下载的影响.
组织脚本
- Steve Souders发现, 把一段内嵌脚本放在引用外链样式表的< link >标签之后会导致页面阻塞去等待样式表的下载. 这样做是为了确保内嵌脚本在执行时能获得最精确的样式信息. 因此, Souders建议永远不要把内嵌脚本紧跟在< link >标签的后面.
- 考虑到HTTP请求会带来额外的性能开销, 因此下载单个100KB的文件要比下载4个25KB的文件更快. 也就是说, 减少页面中外链脚本文件数量将会改善性能.
延迟的脚本
HTML4为< script >标签定义了一个扩展属性: defer.
<script type="text/javascript" src="1.js" defer></script>
HTML5规范还引入了async属性, 用于异步加载脚本. async与defer的相同点是采用并行下载. 在下载过程中不会产生阻塞. 区别在于执行时机, async是加载完成后自动执行, 而defer需要等待页面完成后执行.
带有defer属性的< script >标签可以摆放在文档的任何位置. 对应的javascript文件将在页面解析到< script >标签时开始下载, 但并不会执行, 知道DOM加载完成(onload事件被触发前). 当一个带有defer属性的javascript文件下载时, 它不会阻塞浏览器的其他进程, 因此这类文件可以与页面中的其他资源并行下载.
动态脚本元素(即使用js插入的外部js文件)
使用动态脚本节点下载文件时, 返回的代码通常会立刻执行(除了Firefox和Opera, 它们会等待此前所有动态脚本节点加载完成), 但是当代码只包含供页面其他脚本调用的接口时, 就会有问题. 在这种情况下, 你必须跟踪并确保脚本下载完成且准备就绪.
封装的函数:
function loadScript(url, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() { //ie
if (script.readyState == 'complete' || script.readyState == 'loaded') {
callback(); //某个函数
}
}
} else {
script.onload = function() {
callback();
}
}
script.src = url;
document.head.appendChild(script);
}
推荐的无阻塞模式
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
loadScript("1.js", function(){
Application.init();
})
</script>
第一部分(例 : loader.js)代码尽量精简, 甚至可能只包含loadScript( )函数
或者也可以把loadScript( )函数直接嵌入在页面, 然后调用loadScript()函数插入其它文件.
