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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
jQuery获得指定元素坐标的方法
Apr 14 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 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 过滤器实现代码
2010/08/09 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
详解Python pygame安装过程笔记
2017/06/05 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
工地安全检查制度
2014/02/04 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
感恩寄语大全
2014/04/11 职场文书
公司建议书怎么写
2014/05/15 职场文书
甘南现象心得体会
2014/09/11 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python