JavaScript代码应该放在HTML代码哪个位置比较好?


Posted in Javascript onOctober 16, 2014

在哪里放置 JavaScript 代码?

通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述。

放置于<head></head>之间

将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于<head></head> 标签之间,可以确保在需要使用脚本之前,它已经被载入了:

<html>

<head>

<script type="text/javascript">

……

JavaScript 代码

……

</script>

</head>

....

放置于<body></body>之间

也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况:我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的,为避免 JavaScript 代码操作 HTML 元素时,HTML 元素还未载入而报错(对象不存在),因此需要将这段代码写到 HTML 元素后面,例子如下:

<html>

<head>

</head>

<body>

</body>

<div id="div1"></div>

<script type="text/javascript">

document.getElementById("div1").innerHTML="测试文字";

</script>

</html>

但通常情况下,我们操作页面元素一般都是通过事件来驱动的,所以上面这种情况并不多见。另外我们不建议将 JavaScript 代码写到 <html></html> 之外。

提示

如果 HTML 文档声明为 XHTML ,<script></script> 标签必须在 CDATA 部分内声明,否则 XHTML 将把 <script></script> 标签解析为另一个 XML 标签,里面的 JavaScript 代码可能不会正常执行。因此,在严格的 XHTML 中使用 JavaScript 应该像如下示例一样声明:

<html>

<head>

<script type="text/javascript">

<![CDATA[

JavaScript 代码

]]>

</script>

</head>

....

以上两种将 JavaScript 代码写到 HTML 文档中的方式,都是 HTML 文档内部引用 JavaScript 代码的方式。除了内部引用,还可以使用外部引用方式。

外部引用 JavaScript 代码

将 JavaScript 代码(不包括<script></script>标签)单独形成一个文档,并以 js 后缀命名,如 myscript.js ,并在 HTML 文档 <script></script> 标签中使用 src 属性来引用该文件:

<html>

<head>

<script type="text/javascript" src="myscript.js"></script>

</head>

....

在使用了外部引用 JavaScript 代码之后,其好处显而易见:
1.避免在 JavaScript 代码里使用 <!-- ... //-->
2.避免使用难看的 CDATA
3.公共的 JavaScript 代码可以被复用于其他 HTML 文档,也利于 JavaScript 代码的统一维护
4.HTML 文档更小,利于搜索引擎收录
5.可以压缩、加密单个 JavaScript 文件
6.浏览器可以缓存 JavaScript 文件,减少宽带使用(当多个页面同时使用一个 JavaScript 文件的时候,通常只需下载一次)
7.避免使用复杂的 HTML 实体,如可以直接使用 document.write(2>1) 而无需写作 document.write(2<1)

将 JavaScript 代码形成为外部文件,也会增加服务器的 HTTP 请求负担,在超高并发请求的环境下,这并不是一个好的策略。另外 在引用外部 js 文件时,需注意文件的正确路径。

Javascript 相关文章推荐
基于jquery实现图片上传本地预览功能
Jan 08 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
使用javaScript实现鼠标拖拽事件
Apr 03 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
使用ECharts实现状态区间图
Oct 25 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
JavaScript基础教程之alert弹出提示框实例
Oct 16 #Javascript
编程语言JavaScript简介
Oct 16 #Javascript
js父页面与子页面不同时显示的方法
Oct 16 #Javascript
Javascript Memoizer浅析
Oct 16 #Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 #Javascript
JavaScript实现继承的4种方法总结
Oct 16 #Javascript
JavaScript实现网页截图功能
Oct 16 #Javascript
You might like
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
jQuery超赞的评分插件(8款)
2015/08/20 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Django与JS交互的示例代码
2017/08/23 Python
python修改txt文件中的某一项方法
2018/12/29 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
python 实现波浪滤镜特效
2020/12/02 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
大学生求职简历的自我评价
2013/10/14 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
感谢信范文大全
2015/01/23 职场文书
党员承诺书范文2015
2015/04/27 职场文书
养成教育主题班会
2015/08/13 职场文书
详解Java实现数据结构之并查集
2021/06/23 Java/Android
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
Python学习之异常中的finally使用详解
2022/03/16 Python