本文总结了多种放置JS代码的方法,需要的朋友可以参考下

在哪里放置 JavaScript 代码？

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

放置于<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>

放置于<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 代码的方式。除了内部引用，还可以使用外部引用方式。

外部引用 JavaScript 代码

将 JavaScript 代码（不包括<script></script>标签）单独形成一个文档，并以 js 后缀命名，如 myscript.js ，并在 HTML 文档 <script></script> 标签中使用 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代码哪个位置比较好的更多相关文章

  1. JavaScript文件应该放在网页的什么位置

    JavaScript文件应该放在网页的什么位置 http://www.lihuai.net/qianduan/js/352.html 在<良好的JavaScript编程习惯>系列教程的第三 ...

  2. JavaScript代码放在HTML代码不同位置的差别

    通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一 ...

  3. JavaScript: JavaScript的简介和入门代码演示

    1.Javascript的发展历史介绍: javascript是指的实在网页上编写的编程语言,其主要是控制器html的动态显示效果.HTMl能带来的只是一些基本的页面的风格,而要展示的漂亮使用CSS, ...

  4. 可以放在html代码中的自动跳转代码

    可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh   2,onload事件中加入代码  3,js实现 1.<html><body> ...

  5. css和javascript代码写在页面中的位置说明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. linux-2.6.22.6内核启动分析之head.S引导段代码

    学习目标: 了解arch/arm/kernel/head.S作为内核启动的第一个文件所实现的功能! 前面通过对内核Makefile的分析,可以知道arch/arm/kernel/head.S是内核启动 ...

  7. JavaScript入门：002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...

  8. 单细胞分析实录(17): 非负矩阵分解(NMF)代码演示

    本次演示使用的数据来自2017年发表于Cell的头颈鳞癌单细胞文章:Single-Cell Transcriptomic Analysis of Primary and Metastatic Tumo ...

  9. 基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)

    基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...

随机推荐

  1. 如何调教Android Studio-Windows安装AS后的必备工作

    未完待续... 工欲善其事必先利其器,你已经抛弃被大众诟病的Eclipse投入Google亲儿子Android Studio的怀抱,可是不了解As的脾气,怎么让它服服帖帖的为提高开发效率做贡献呢. 关 ...

  2. oracle11g用户名密码不区分大小写

    oracle 11g 以前的版本的用户名和密码是不区分大小写的; oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_log ...

  3. <转>Java的一些历史

      Java是一种固执己见的语言,它具有很好的可读性,初级程序员很容易上手,具有长期稳定性和可支持性.但这些设计决定也付出了一定的代价:冗长的代码,类型系统与其它语言相比显得缺乏弹性. 然而,Java ...

  4. mysql中select distinct的用法

    在使用mysql时,有时需要查询出某个字段不重复的记录,虽然mysql提供有distinct这个关键字来过滤掉多余的重复记录只保留一条,但 往往只用它来返回不重复记录的条数,而不是用它来返回不重记录的 ...

  5. android 转帖留链接

    Android开发:用Drawable XML绘制带阴影效果的圆形按钮          http://evis.me/2013/05/android-dev-render-button-with-s ...

  6. setTimeout的若干坑

    第一坑:作用域 首先,有一个关于this的面试题,是这样的: var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: ...

  7. php 数组去除空值

    /** * 方法库-数组去除空值 * @param string $num 数值 * @return string */ public function array_remove_empty(& ...

  8. 树莓派设置成无线路由（AP）

    1.安装需要的包 sudo apt-get install hostpad uhdcpd 2.配置/etc/network/interfaces文件 配置wlan0为静态地址 格式如下: iface ...

  9. [转]数组引用:C++ 数组做参数 深入分析

    "数组引用"以避免"数组降阶"(本文曾贴于VCKBASE\C++论坛) 受[hpho]的一段模板函数的启发,特写此文,如有雷同,实在遗憾. 数组降阶是个讨厌的事 ...

  10. Delphi Jpg和Gif转Bmp

    begin     bmp:=TBitmap.Create;     jpeg:=TJPEGImage.Create;     jpeg.LoadFromFile(fname);     with b ...