1、在我们编写代码的时候，会在页面内使用<script>标签来写JS，虽然理论上script标签的位置放在哪里可以，但是还是有一点区别的。

2、为什么很多人把script标签放在底部：

　　初学者在学习JS的时候看见很多DEMO里面的script标签写在底部，但是却不是很清楚为什么，下面来解释一下：

　　虽然理论上放在哪里都是可以的，但是对于前端页面优化来讲，还是放在底部是最佳的，因为如果JS执行出现错误了，最起码页面中的元素还能加载出来，因为DOM文档是从上往下的顺序执行的。

3、script标签在body标签内还是外：

　　许多人认为只要放在底部了，无论是“body标签闭合之前”还是在“body标签闭合之后”都是一样的，其实还是有差别的，因为从HTML 2.0起放在“body标签闭合之后”就是不合标准的。之所以但是浏览器却不会报错，是因为如果在“body标签闭合之后”后再出现script或任何元素的开始标签， 都是parse error，浏览器会忽略之前的</body>，即视作仍旧在body内。所以实际效果和写在“body标签闭合之前”之前是没有区别的。

　　所以，只要是让浏览器做了多余的事都是不好的，虽然差别细微，但是还是应该按照标准来，放在“body标签闭合之前”。

下面我们举个例子：

<!DOCTYPE HTML>

<html>

<head>

    <title> </title>

</head>

<body>

<script type="text/javascript"></script>

</body>

</html>

script标签的位置的更多相关文章

  1. JavaScript <script>标签的位置、延迟脚本（defer属性）与 异步脚本（async属性）

    一.<script>标签的位置 传统的做法是将<script>元素放在<head>元素中,例如: <!DOCTYPE html><html > ...

  2. JS之script标签

    1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...

  3. 关于在HTML中使用的script标签

    本文是<JavaScript高级程序设计>(第三版)中的第二章的个人学习的总结. 在HTML中使用JavaScript <script>标签 在HTML5中script主要有以 ...

  4. JavaScript高程--<script>标签

    <script>标签 在HTML5中script主要有以下几个属性:async,defer,charset,src,type, async(可选): 关键词:异步脚本,外部文件,立即下载: ...

  5. script标签加载顺序(defer & async)

    script 拥有的属性 async:可选,表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效. charset:可选.表示通过 src 属性指 ...

  6. script标签引入脚本的引入位置与效果

    用script标签引入脚本的引入位置大致有两种情况: 1,在head中引入: 2,在body末尾引入: 浏览器由上到下解析代码,正常情况下,先解析head中的代码,在解析body中的代码:放在head ...

  7. <script>元素的位置

    脚本元素会组织下载网页内容,浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文本后,浏览器会停止进一步下载,知道这个脚本文件下载,解析并执行完毕.这会严重影响网页载入的总时间,特别是在网页在入时会发 ...

  8. js中的script标签

    在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址">&l ...

  9. 在html代码中js的script标签建议放在那里？

    今天编写了一个简单的js代码,F12有错误,然后发现是<script>放的位置有问题.之前在我的印象当中,说的是这个标签放在哪里都可以,然而...并不是这样的,例如我现在练习的这个代码,写 ...

随机推荐

  1. 逆拓扑排序 HDU2647Reward

    这个题如果用邻接矩阵的话,由于n比较大,会超内存,所以选用邻接表的形式.还有就是这个题有那个等级的问题,一级比一级的福利高,所以不能直接拓扑排序,而是反过来,计算出度,找出度为0的顶点,然后更新出度数 ...

  2. Linux UDP严重丢包问题的解决

    测试系统在Linux上的性能发现丢包率极为严重,发210000条数据,丢包达110000之巨,丢包率超过50%.同等情形下Windows上测试,仅丢几条数据.形势严峻,必须解决.考虑可能是因为协议栈B ...

  3. 在公网(internet)上建立website时不能用http访问

    我们在internet的IDC提供的虚拟机上建了新的web site, 域名也从阿里巴巴那里得到二级域名,也经过映射到了虚机的IP, 在本机都可以用域名以Http方式访问,但在internet上的其它 ...

  4. css布局之负margin妙用及其他实现

    相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同. 大概就是上面这个样子,下面介绍几种实现的方式. 1.负margin大法 设置好元素的宽度和留白占满父级的 ...

  5. HP SimpleXML

    PHP SimpleXML PHP SimpleXML 处理最普通的 XML 任务,其余的任务则交由其它扩展处理. 什么是 PHP SimpleXML? SimpleXML 是 PHP 5 中的新特性 ...

  6. WPF自定义Main函数

    第一步:在app.xaml.cs里加入以下代码: [STAThread] public static void Main(string[] args) { App app = new App(); a ...

  7. redux-simple 简化版的redux

    作为react的粉丝,当然要吐槽一下react组件通信问题.react的单向数据流是组件通信的一大阻碍,只允许父组件向子组件传值,子组件向父组件传值只能通过父组件向子组件传递回调函数实现.如果在深层次 ...

  8. oracle 使用 ALTER 操作列

    使用 ALTER TABLE 语句追加, 修改, 或删除列的语法

  9. 武汉科技大学ACM：1004: 零起点学算法36——3n+1问题

    Problem Description 任给一个正整数n,如果n为偶数,就将它变为n/2,如果为奇数,则将它乘3加1(即3n+1).不断重复这样的运算,经过有限步后,一定可以得到1 . Input 输 ...

  10. 武汉科技大学ACM ：1010: 零起点学算法12——求2个日期之间的天数

    Problem Description 水题 Input 输入2个日期,日期按照年月日,年月日之间用符号-隔开(题目包含多组数据) Output 求出这2个日期之间的天数(不包括自身),每组测试数据一 ...