分析JavaScript代码应该放在HTML代码哪个位置比较好

本文总结了多种放置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 文件时,需注意文件的正确路径。

时间: 2024-08-02 12:34:27

分析JavaScript代码应该放在HTML代码哪个位置比较好的相关文章

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

通常情况下,JavaScript 代码是和 HTML 代码一起使用的,可以将 JavaScript 代码放置在 HTML 文档的任何地方.但放置的地方,会对 JavaScript 代码的正常执行会有一定影响,具体如下所述. 1.放置于<head></head>之间 将 JavaScript 代码放置于 HTML 文档的 <head></head> 标签之间是一个通常的做法.由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于

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

可以放在html代码中的自动跳转代码 有3种方法可以实现html的页面跳转,1,refresh   2,onload事件中加入代码  3,js实现 1.<html><body><meta http-equiv="refresh" content="0;url=http://www.baidu.cn"></body></html> 2.<html><head><meta http

javascript实现的秒表效果代码

javascript实现的秒表效果代码:关于秒表效果,自然不会陌生,下面将分析一个实例来介绍一下如何通过原生javascript实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <titl

Javascript浮点数运算及比较代码收集整理

以下代码转自:http://segmentfault.com/a/1190000000324193 浮点数加法: /**  ** 加法函数,用来得到精确的加法结果  ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果.  ** 调用:accAdd(arg1,arg2)  ** 返回值:arg1加上arg2的精确结果  **/ function accAdd(arg1, arg2) {         var r1, r2, m, 

开源项目成熟度分析工具-利用github api获取代码库的信息

1.github api github api是http形式的api,功能还是比较丰富的,博主因为项目的原因主要用到的是提取project信息这项功能,返回的数据是JSON格式. api页:https://developer.github.com/v3/ Options: (H) means HTTP/HTTPS only, (F) means FTP only --anyauth Pick "any" authentication method (H) -a, --append Ap

从阅读Discuz的核心代码并给出注释的经历分析程序员该如何阅读代码?

本文标签:   程序员 php Discuz的核心代码 框架 深度学习框架 阅读优秀的代码,是技术水平成长的最佳途径.记得每个进来的新人,我都做过阅读优秀代码的要求,但几乎都只能坚持很少一段时间而已. 前晚大家还在开玩笑的讨论,都是因为看了前人的一些写法,才学会了一些乱七八糟的花招. 晚上我又开始重新阅读Discuz的核心代码,花了1h多的时间,才完成一个core文件的注释. 注释后的代码: <?php /** * [Discuz!] (C)2001-2099 Comsenz Inc. * Th

Javascript 实现简单计算器实例代码

Javascript 实现简单计算器实例代码 这篇文章主要介绍了Javascript 实现简单计算器实例代码的相关资料,需要的朋友可以参考下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63

javascript的for in实例代码

javascript的for in实例代码:for in语句一般用来穷举也就是遍历对象的属性,代码实例如下: var obj={ webName:"蚂蚁部落", address:"青岛市南区", age:2 } for(var attr in obj){ console.log(attr); } 以上代码可以遍历对象的每一个属性.更多for in相关内容可以参阅javascript的for in循环语句详细介绍一章节. 原文地址是:http://www.softwh

javascript如何获取链接参数代码实例

javascript如何获取链接参数代码实例:使用url传递参数,大家应该不陌生,例如: http://www.softwhy.com/home.php?mod=space&do=home&view=all 既然传递参数,那么自然就要获得传递的参数,当然获取参数的方式有多种多样,下面就介绍其中的一种,和大家一起分享,希望能够给大家带来一定的帮助,代码如下: var url="http://www.softwhy.com/home.php?mod=space&do=home