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. 退出应用 关闭多个Activity

    Activity3 public class Activity3 extends ListActivity {     protected void onCreate(Bundle savedInst ...

  2. 使用socket实现聊天功能

    public class Service { //服务器 public static void main(String[] args) { ServerSocket serverSocket=null ...

  3. ZOJ3161

    朴素动态规划 ZOJ3161 题意:(严重标题党)老板不想让客人走,客人不想留,客人按顺序排好,老板抽8g(书上翻译成八卦,神翻译),抽到的 如果相邻,其中一个人由客人决定离开,求最后黑心的老板最多能 ...

  4. eclipse-android-activity_main/fragment_main文件处理

    android新建工程后,在res/layout/下有两个文件,之前用studio的时候貌似没有,只有一个文件,然后再测试Activity切换的时候,一直在纠结这个问题,下面是解决方法: 1)将fra ...

  5. 用POP动画引擎实现弹簧动画(POPSpringAnimation)

    效果图: #import "ViewController.h" #import <POP.h> @interface ViewController () @proper ...

  6. PHP E-mail

    PHP E-mail 注入 首先,请看上一章中的 PHP 代码: <html><body> <?phpif (isset($_REQUEST['email']))//if ...

  7. Yandex 2013Q(Atoms: There and Back Again-贪心+模拟+List)

    Atoms: There and Back Again Time limit 2 seconds Memory limit 256Mb Input stdin Output stdout Legend ...

  8. Css3从IE6-IE9的支持查看

    http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx http://caniuse.com/

  9. discuz 和 wordpress 整合注意问题

    要先在应用列表里添加自己本身的应用即要保证同步操作,本身也是一个应用,并保证通信成功: 应用和ucenter不在一个机器上,IP都要设定: discuz/uc_client/ 下要有一个接收数据的da ...

  10. 使用telnet操作memcache，一般不常用

    使用telnet操作memcache,一般不常用   1.使用方法 1. 连接到memcached telnet 192.168.1.100 11211 add name 0 60 5     [说明 ...