书写高效javaScript代码---载入JavaScript文件
2010-11-20 10:47
489 查看
一般情况下我们是在页面的<head>区域使用语句
<script type="text/javascript" src=\'#\'" /script>
来载入JavaScript文件，使用这种方式载入JavaScript会导致页面加载速度过慢。什么原因呢？浏览器在显示HTML文件之前，会等待完全加载整个HTML文件与<head>区域中额外加载的JavaScript文件与CSS样式文件，所以把JavaScript放入<head>区域会影响页面的加载速度。解方法主要有如下几种：
1.把加载JavaScript的代码放入<body>区域的底部,放入body区域的可加载文件是异步进行加载的，页面不必等待加载完成才显示，比如图片总是在显示出页面后才渐渐载入了完整的图片，JavaScript加载也是一样的道理，放入底部最后加载，不会影响页面载入速度。
2.使用JavaScript程序动态加载JavaScript文件。
<script type="text/javascript">
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("the-rest.js", function(){
Application.init();
});
</script>
以上代码放在<body>低部，使用动态方式加载JavaScript文件，你可以在加载文件完备时，执行回调函数，可以处理JavaScript依赖关系。当然你也可以使用ajax方式加态加载JavaScript文件，或者在window.onload事件中loadScript。
另外当加载多个Javascript文件时，文件与文件之间会有间隔延迟，为避免这种情况，我们可以把该页面要加载的JavaScript文件合并成一个JavaScript文件。
只需要按照以上方式加载JavaScript文件，你的页面载入速度会提高很多，当然载入CSS样式文件是一样的道理。
flydream.2010.11.20
本文出自 “妄天WEB” 博客，请务必保留此出处http://wysky.blog.51cto.com/2446569/427972
<script type="text/javascript" src=\'#\'" /script>
来载入JavaScript文件，使用这种方式载入JavaScript会导致页面加载速度过慢。什么原因呢？浏览器在显示HTML文件之前，会等待完全加载整个HTML文件与<head>区域中额外加载的JavaScript文件与CSS样式文件，所以把JavaScript放入<head>区域会影响页面的加载速度。解方法主要有如下几种：
1.把加载JavaScript的代码放入<body>区域的底部,放入body区域的可加载文件是异步进行加载的，页面不必等待加载完成才显示，比如图片总是在显示出页面后才渐渐载入了完整的图片，JavaScript加载也是一样的道理，放入底部最后加载，不会影响页面载入速度。
2.使用JavaScript程序动态加载JavaScript文件。
<script type="text/javascript">
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("the-rest.js", function(){
Application.init();
});
</script>
以上代码放在<body>低部，使用动态方式加载JavaScript文件，你可以在加载文件完备时，执行回调函数，可以处理JavaScript依赖关系。当然你也可以使用ajax方式加态加载JavaScript文件，或者在window.onload事件中loadScript。
另外当加载多个Javascript文件时，文件与文件之间会有间隔延迟，为避免这种情况，我们可以把该页面要加载的JavaScript文件合并成一个JavaScript文件。
只需要按照以上方式加载JavaScript文件，你的页面载入速度会提高很多，当然载入CSS样式文件是一样的道理。
flydream.2010.11.20
本文出自 “妄天WEB” 博客，请务必保留此出处http://wysky.blog.51cto.com/2446569/427972
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 动态载入/删除/更新外部 JavaScript/Css 文件的代码
- smarty模板文件书写javascript代码
- JavaScript的eval函数，用法，用来执行JavaScript代码，即将JavaScript代码加载入内存（但是并没有执行和触发，跟加载js文件是一个道理，即将js文件加载入内存，但是js）
- 动态载入/删除/更新外部 JavaScript/Css 文件的代码
- 阿里云oss post上传文件 JavaScript代码示例 $.ajax()
- 辛星笔记之高质量JavaScript代码书写要点
- 简化 Ajax 和 Java 开发，第 1 部分: 用 JSP 标记文件动态生成 JavaScript 代码
- javascript/js 原生动态引入外部css文件及动态插入css代码片段
- 利用函数的惰性载入提高javascript代码性能 转
- 5个书写JavaScript代码的坏习惯，看看你中枪了没？
- 在CS类文件里向调用页面输出Javascript代码的3种方法
- 动态载入/删除/更新外部 JavaScript/Css 文件
- 自动根据视频文件类型选择不同播放器的JAVASCRIPT代码
- JavaScript代码实现txt文件的上传预览功能
- javascript判断文件是否存在实例代码
- 深入理解javascript系列（1）：高质量JavaScript代码书写基本要点
- JavaScript 高效运行代码分析
- javascript 书写规范代码
- Notepad++配合QuickText打造快速高效的文本编辑器&&Zen Coding 让 Notepad++ 代码书写健步如飞
- Javascript新加入动态载入js文件功能