[b]Javascript 的加载方式大概有以下几种[/b]
[b]加载方式一[/b]
[b]加载方式二[/b]
[b]加载方式三[/b]
[b]加载方式四[/b]
经过测试发现:
onload时间不变，domready时间, 方案三、四比一、二短很多;
[b]原因分析[/b]：
方式一，浏览器遇到script标签是，会去请求资源，请求完之后再执行，在此期间block了对此元素后面dom元素的渲染，所以domready时间拉长了。
方式二，原因同方式一，之所以会这样是因为document.write出来的元素也会被即刻渲染，即浏览器输出之后就当作dom元素去处理。
方式三，是常用的动态加载方式，这种做法彻底将加载JS移出文档加载流，实现异步加载。有些人可能会顾虑这样加载会不会影响浏览器对该文件的缓存，其实不会的，因为浏览器缓存是针对请求的，而不是针对请求是怎么来的，就跟ajax请求也会被缓存一个道理。
方法四，添加异步属性，也就是defer，好处在于加载的时候不会block后面的元素，但是目前只有 Internet Explorer 支持 defer 属性。
测试代码如下：
[b]加载方式一[/b]
<script src='http://l.me/1.js'></script>[b]加载方式二[/b]
document.write('<script src="http://l.me/1.js"><\/script>');[b]加载方式三[/b]
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);[b]加载方式四[/b]
<script src='http://l.me/1.js' defer='defer'></script>经过测试发现:
onload时间不变，domready时间, 方案三、四比一、二短很多;
[b]原因分析[/b]：
方式一，浏览器遇到script标签是，会去请求资源，请求完之后再执行，在此期间block了对此元素后面dom元素的渲染，所以domready时间拉长了。
方式二，原因同方式一，之所以会这样是因为document.write出来的元素也会被即刻渲染，即浏览器输出之后就当作dom元素去处理。
方式三，是常用的动态加载方式，这种做法彻底将加载JS移出文档加载流，实现异步加载。有些人可能会顾虑这样加载会不会影响浏览器对该文件的缓存，其实不会的，因为浏览器缓存是针对请求的，而不是针对请求是怎么来的，就跟ajax请求也会被缓存一个道理。
方法四，添加异步属性，也就是defer，好处在于加载的时候不会block后面的元素，但是目前只有 Internet Explorer 支持 defer 属性。
测试代码如下：
<html>
<head><title>test document.write</title>
<script>
var G_top = +new Date;
</script>
</head>
<body>
<script src='http://l.me/1.js'></script>
<script>
//document.write('<script src="http://l.me/1.js"><\/script>');
/*
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);
*/
window.addEventListener('DOMContentLoaded', function (){alert(+new Date - G_top)});
</script>
</body>
</html>
82
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
