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 之 ...
随机推荐
- 关于 Delphi 中流的使用(7) 压缩与解压缩(TCompressionStream、TDecompressionStream)
unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...
- HDU 1853 Cyclic Tour[有向环最小权值覆盖]
Cyclic Tour Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/65535 K (Java/Others)Total ...
- c++中的基本知识点
1 class和struct的区别和联系 在c++中,class和struct只有一点不同,它们是可以完全替代使用的.唯一的不同在于,class中的成员默认是private的,而struct中默认是p ...
- spring 配置bean－自己主动装配
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qilixiang012/article/details/28260477 概要:(蓝色为本节所讲) ...
- 学习使用ExpressJS 4.0中的新Router
概述 ExpressJS 4.0中提出了新的路由Router.Router好比是一个"迷你版"的express应用,它没有引入views或者settings,但是提供了路由应有的A ...
- 在高通平台Android环境下编译内核模块【转】
本文转载自:http://blog.xeonxu.info/blog/2012/12/04/zai-gao-tong-ping-tai-androidhuan-jing-xia-bian-yi-nei ...
- SpringBoot2.0之整合ActiveMQ（点对点模式）
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 51nod 1040
题目 题解:我们要求的是这个式子: $ \sum\limits_{i = 1}^n {\gcd (n,i)} $ (下面式子中的d都是n的因子) 变形下 $ \sum\limits_{d = 1} ...
- Ubuntu 17.4下如何安装VMwareTools
解压vmware-tools-distrib 运行vmware-install.pl安装过程中间出现错误,要求选择"ifconfig"工具.由于ifconfig工具过时逐渐被各大厂 ...
- 使用谷歌浏览器进行Web开发技巧
1.为了避免缓存影响开发,使用使用那个“Ctrl+Shift+N”进入浏览器的隐身模式