JavaScript代码放在HTML代码不同位置的差别
通常情况下，JavaScript 代码是和 HTML 代码一起使用的，可以将 JavaScript 代码放置在 HTML 文档的任何地方。但放置的地方，会对 JavaScript 代码的正常执行会有一定影响，具体如下所述。
1、放置于<head></head>之间
将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法。由于 HTML 文档是由浏览器从上到下依次载入的，将 JavaScript 代码放置于<head></head> 标签之间，可以确保在需要使用脚本之前，它已经被载入了：
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
……
*
* Javascript 代码
*
* ……
* */
</script>
</head>
<body>
</body>
</html>
2、放置于<body></body>之间
也有部分情况将 JavaScript 代码放置于 <body></body> 之间的。设想如下一种情况：我们有一段 JavaScript 代码需要操作 HTML 元素。但由于 HTML 文档是由浏览器从上到下依次载入的，为避免 JavaScript 代码操作 HTML 元素时，HTML 元素还未载入而报错（对象不存在），因此需要将这段代码写到 HTML 元素后面，例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</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 应该像如下示例一样声明：
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
< ![CDATA[
JavaScript 代码
]] >
</script>
</head>
以上两种将 JavaScript 代码写到 HTML 文档中的方式，都是 HTML 文档内部引用 JavaScript 代码的方式。除了内部引用，还可以使用外部引用方式。
3、外部引用 JavaScript 代码
将 JavaScript 代码（不包括标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ,并在 HTML 文档 标签中使用 src 属性来引用该文件：
<head>
<meta charset="utf-8" />
<title></title>
<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代码放在HTML代码不同位置的差别的更多相关文章
- JavaScript问题01 js代码放在header和body的区别
1 body和header中JavaScript执行的时机 1.1 header中 放在header中的javascript代码会进行预加载(即:在页面加载之前就会进行),所以需调用才执行的脚本或事件 ...
- echarts制作html和JavaScript的时钟和代码分析与注释
1.效果图 2.说明: 2.1 代码是大神制作的,我进行修改,感谢大神,原创属于他. 2.2 我对代码进行分析.注释.整理,增加代码的可读性. 2.3 通过上述自己的工作,自己也能熟悉相关的JavaS ...
- 如何实现 javascript “同步”调用 app 代码
在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...
- 可以放在html代码中的自动跳转代码
可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh 2,onload事件中加入代码 3,js实现 1.<html><body> ...
- javascript 转盘抽奖代码和计数器代码
要介绍了javascript圆盘抽奖程序实现原理和完整代码例子,需要的朋友可以参考下 看到网页上有不少大转盘抽奖的应用,心血来潮也想弄个.于是找了点资料自己研究... 效果预览: 一.模拟抽奖的实 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- JavaScript文件应该放在网页的什么位置
JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...
- 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码
最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...
随机推荐
- android菜鸟学习笔记1----环境搭建
Step1 JDK安装及配置: 1.下载并安装JDK: 根据自己系统情况,选择安装相应的JDK版本 当前系统:64位WIN8,内存8G 选择了Java SE 8u45 即JDK 1.8.0_45,可以 ...
- 九度OJ 1173：查找 （排序、查找）
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5808 解决:3163 题目描述: 输入数组长度 n 输入数组 a[1...n] 输入查找个数m 输入查找数字b[1...m ...
- iOS视频直播用到的协议
一 .流媒体 1 - 伪流媒体 1.1 扫盲:边下载边播放1.2 伪流媒体:视频不是实时播放的,先把视频放在数据库,再供客户端访问,比如:优酷,爱奇艺等 1.3 特点: 边下边存,文件会保存.遵守了 ...
- 使用服务端的临时密钥，不依赖阿里js的putFIle--》阿里oss
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title> ...
- 使用cocos2d-js-3.0RC1中的物理引擎chipmunk模拟的“别碰钉子”源码分享（含碰撞检测）
分别用box2d和chipmunk实现了一下,不过box2d没整理,也懒得整理了.chipmunk整理了一下,分享给大家吧. 刚开始研究,抛砖引玉 简要说明:1.初始化物理环境,增加边界 initPh ...
- 题解 CF576C 【Points on Plane】
题解 CF576C [Points on Plane] 一道很好的思维题. 传送门 我们看这个曼哈顿距离,显然如果有一边是按顺序排列的,显然是最优的,那另一边怎么办呢? 假如你正在\(ioi\)赛场上 ...
- 洛谷 4568 [JLOI2011] 飞行路线
题目戳这里 一句话题意: 有n个点,m条边的有向图,最多可以把k条边变为0,求从起点到终点最短距离. Solution 首先看到这题目,感觉贼难,看起来像DP,貌似也有大佬这么做,但鉴于本蒟蒻思维能力 ...
- get_linux_ip_info.sh 获取ip地址
linux 获取ip地址 get_linux_ip_info.sh #!/bin/bash #/告诉使用者,这程序的用户是从ipconfig 命令中获取IP地址 echo "该程序是从命令中 ...
- [容易] A + B 问题
题目来源:http://www.lintcode.com/zh-cn/problem/a-b-problem/
- Ruby 文件 FILE
FileUtils.makedirs(LOCAL_DIR) unless File.exists?LOCAL_DIR require 'fileutils' Dir.mkdir(DATA_DIR) u ...