JS加载形式对loaded和domready的影响
日期：2014-05-16 浏览次数：20379 次
JS加载方式对loaded和domready的影响
Javascript 的加载方式大概有以下几种
加载方式一
加载方式二
加载方式三
加载方式四
经过测试发现:
onload时间不变，domready时间, 方案三、四比一、二短很多;
原因分析：
方式一，浏览器遇到script标签是，会去请求资源，请求完之后再执行，在此期间block了对此元素后面dom元素的渲染，所以domready时间拉长了。
方式二，原因同方式一，之所以会这样是因为document.write出来的元素也会被即刻渲染，即浏览器输出之后就当作dom元素去处理。
方式三，是常用的动态加载方式，这种做法彻底将加载JS移出文档加载流，实现异步加载。有些人可能会顾虑这样加载会不会影响浏览器对该文件的缓存，其实不会的，因为浏览器缓存是针对请求的，而不是针对请求是怎么来的，就跟ajax请求也会被缓存一个道理。
方法四，添加异步属性，也就是defer，好处在于加载的时候不会block后面的元素，但是目前只有 Internet Explorer 支持 defer 属性。
测试代码如下：
Javascript 的加载方式大概有以下几种
加载方式一
<script src='http://l.me/1.js'></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);加载方式四
<script src='http://l.me/1.js' defer='defer'></script>
经过测试发现:
onload时间不变，domready时间, 方案三、四比一、二短很多;
原因分析：
方式一，浏览器遇到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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
