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>
分享到：
相关推荐
标题所指的知识点是主流JavaScript框架对DOMReady事件的处理方式。DOMReady事件指的是在DOM树构建完成之后立即触发，而不需要等待图片、脚本、样式表等其他资源加载完毕。这一点对于提高用户体验尤为重要，因为在...
JavaScript DOMReady事件是网页开发中一个非常重要的概念，它的主要作用是在HTML文档的DOM结构完全加载完毕后，但在所有外部资源如图片、脚本、样式表等加载之前执行指定的函数。这样可以确保开发者能够在不等待全部...
准备好 跨浏览器 DOM 就绪事件检测功能，能够在 DOM 加载和交互后对任意数量的回调进行排队。 用法 domReady ( function ( ) { // dom is loaded! } ) ;
<script type="text/javascript" src="/js/themes/gray.js"> ``` 以上就是使用Highcharts创建简单柱状图的基本步骤。通过调整配置选项和数据，你可以根据需求创建各种复杂的图表，如折线图、饼图、散点图等，同时还...
使用$(document).ready()可以确保JavaScript代码的执行不会影响到页面内容的加载。特别是对于复杂的页面，如果将大量的JavaScript代码放在`<body>`的末尾，可能会导致用户看到一个空白页面，直到所有脚本下载并执行...