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常见表单应用技巧
Jan 09 Javascript
My Desktop :) 桌面式代码
Dec 29 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
实例讲解javascript注册事件处理函数
Jan 09 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
Aug 01 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
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 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
PHP中16个高危函数整理
2019/09/19 PHP
select组合框option的捕捉实例代码
2008/09/30 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
2016/04/26 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
Python 多线程抓取图片效率对比
2016/02/27 Python
Django自定义过滤器定义与用法示例
2018/03/22 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python 监测文件是否更新的方法
2019/06/10 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
Python类成员继承重写的实现
2020/09/16 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
企业统计员岗位职责
2013/12/13 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
体育教学随笔感言
2014/02/24 职场文书
聚美优品广告词改编
2014/03/14 职场文书
大学学生个人总结
2015/02/15 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
导游词之青岛太清宫
2019/12/13 职场文书
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers