JavaScript的加载和执行总结
总结:
在</body>闭合之前,将所有的<script>标签放到页面底部.这样能确保在脚本执行之前页面已经完成渲染.
合并脚本, 页面中的<script>标签越少, 加载速度越快,响应也迅速.
无阻塞下载javaScript的方法,见下面
1. 脚本位置,组织脚本&
由于脚本会阻塞页面其他资源的下载,推荐所有的<script>标签尽可能放在<body>标签的底部,以尽量减小对整个页面下载的影响
例如:<body><script type="" src="1.js&2.js&3.js"></script></body>
2. 无阻塞脚本
window对象的load事件触发后再下载脚本
1) 延迟的脚本defer
<script type="" src="1.js" defer></script>因带defer可以放在文件的任何位置,解析到script标签的时候开始下载,但不会执行,直到DOM加载完成之后, 或者在onload之前被调用
Defer:指明本元素所含的脚本不会修改DOM,因此代码能安全地延迟执行.(仅支持IE4+, Firefox 3.5+)
2) 脚本动态元素
(1) var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'file.js';
document.getElementsByTagName('head')[0].appendChild(script);
文件在该元素被添加到页面时开始下载. 无论何时下载,下载和执行都不会被阻塞页面其他进程(Firefox和Opera会等待此前所有动态脚本执行完)
(2) readyState(uninitiated初始状态, loading开始下载, loaded下载完成, interactive数据完成下载但尚不可用, complete所有数据已准备就绪)
3) XMLHttpRequest脚本注入, 获取脚本并注入到页面中.
4) LazyLoad类库
<script type="text/javascript" src="lazyload_min.js"></script>
<script type="text/javascript" src="file.js">
LazyLoad.js(['first.js', 'last.js'], function(){
Appliction.init();
});
</script>
