加载的顺序不一样,你可以把HTML看成从上往下加载的。
例如在网速慢的情况下把js代码放在body底部用户会先看到网页结构,等js加载完成后才出现特效
区别简述:
在HTML body部分中的JavaScripts会在页面加载的时候被执行。

在HTML head部分中的JavaScripts会在被调用的时候才执行,但是在主页和其余部分代码之前预先装载

——————————————————————————
1.JavaScript应放在哪里

head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时,可以保证脚本在任何调用之前被加载,

从而可使代码的功能更强大; 比如对*.js文件的提前调用。 也就是说把代码放在<head>区在页面载入的时候,就同时载入了代码,你在<body>区调用时就不需要再载入代码了,速度就提高了,这种区别在小程序上是看不出的,当运行很大很复杂的程序时,就可以看出了。

<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>

body 部分中的脚本: 当页面被加载时立即执行的脚本放在HTML的body部分。放在body部分的脚本通常被用来生成页面的内容。

<html>
<head>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>

body 和 head 部分可同时有脚本:你可在文件中放无数的脚本,因此你的文件中可以在body和head部分同时存在脚本。

<html>
<head>
<script type=”text/javascript”>
….
</script>
</head>
<body>
<script type=”text/javascript”>
….
</script>
</body>
 
 
2.如果把javascript放在head里的话,则先被解析,但这时候body还没有解析。
(常规html结构都是head在前,body在后)如果head的js代码是需要传入一个参数(在body中调用该方法时,才会传入参数),并需调用该参数进行一系列的操作,那么这时候肯定就会报错,因为函数该参数未定义(undefined)。
  1. $(document).ready(function(){
  2. //执行代码
  3. })
3.从JavaScript对页面下载性能方向考虑:由于脚本会阻塞其他资源的下载(如图片等)和页面渲染,直到脚本全部下载并执行完成后,页面的渲染才会继续,因此推荐将所有的<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
 
 

<script>放在head内和body内有什么区别的更多相关文章

  1. __inline定义的内联函数和宏的区别

    转自:http://blog.csdn.net/lw370481/article/details/7311668 函数与宏 #define TABLE_COMP(x) ((x)>0?(x):0) ...

  2. js-DOM ~ 04. BOM:浏览器对象模型window. 、定时器、在线用户、祝愿墙、BOM的内置方法内置对象

    multiple. select列表多选 触发事件后调用有参数的函数要先创建一个函数,然后在函数内调用执行函数 Array.from(伪数组):伪数组变为真数组 indexOf():查询字符的索引 a ...

  3. web兼容学习分析笔记--块级、内联、内联块级元素

    一.块级.内联.内联块级元素 (1)块级元素:block **独占一行 **可设置width,height,margin,padding **内部可包含块级或内联元素 (3)内联(行内)元素:inli ...

  4. 【CSS3】---块状元素、内联元素(又叫行内元素)和内联块状元素

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  5. SQL Server中内连接和外连接的区别

    SQL Server中内连接和外连接的区别 假设一个数据库中有两张表,一张是学生表StudentInfo,一张是班级表ClassInfo,两张表之间用ClassId字段进行关联. 如果用内连接,正常的 ...

  6. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  7. 解决外网与内网或内网之间的通信,NAT穿透

    在网络编码中会发现程序在局域网中是可以适用的,但是在外网与内网之间和内网与内网之间就不可行.问题就在于NAT.首先介绍下NAT. NAT的作用NAT(Network Address Translato ...

  8. js script放在head和body里面的区别

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp66       java script放在head和body的区别   ...

  9. 转:jsp内置对象中page与pageContext与el内置对象pageScope与pageContext区别

    原文地址:jsp内置对象中page与pageContext与el内置对象pageScope与pageContext区别 首先说明一下jsp9大内置对象 (1)HttpSession类的session对 ...

  10. 我是如何通过一个 XSS 探测搜狐内网扫描内网并且蠕动前台到最后被发现的

    我是如何通过一个 XSS 探测搜狐内网扫描内网并且蠕动前台到最后被发现的!(附带各种 POC) | WooYun-2014-76685 | WooYun.orghttp://wooyun.org/bu ...

随机推荐

  1. IOS设计模式的六大设计原则之里氏替换原则(LSP,Liskov Substitution Principle)

    定义 里氏替换原则的定义有两种,据说是由麻省理工的一位姓里的女士所提出,因此以其名进行命名. 定义1:如果对一个类型为T1的对象o1,都有类型为T2的对象o2,使得以T1所定义的程序P中在o1全都替换 ...

  2. Snowflake Snow Snowflakes - poj 3349 (hash函数)

    判断n朵雪花中,是否有完全一样的雪花.简单的hash,将雪花的六个边的权值加起来,记为sum,将sum相等的雪花归为一类,再在这里面根据题意找完全相同的,判断顺时针或者逆时针的所有角是否一模一样. # ...

  3. 【转】如何彻底删除SVN中的文件和文件夹(附恢复方法)

    这里假设SVN项目的目录为 /data/svn/project,我们想排除trunk/test.exe文件和trunk/notallowed/目录,操作步骤如下及执行的svn命令(在svn安装目录的b ...

  4. WCF服务寄宿IIS与Windows服务

      WCF是Windows平台下程序间通讯的应用程序框架.整合和 .net Remoting,WebService,Socket的机制,是用来开发windows平台上分布式开发的最佳选择.wcf程序的 ...

  5. Android开发:《Gradle Recipes for Android》阅读笔记(翻译)4.1——编写自己的任务

    问题: 你想用自己的任务定制gradle的构建过程. 解决方案: 在gradle的build文件里面增加task元素.用Android插件支持的extra属性使得开发更容易. 讨论: Gradle的D ...

  6. 46、PopWindow工具类

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  7. 七、Dockerfile案例一(jdk1.8安装)

    七.Dockerfile案例一(jdk1.8安装) 1 获取一个简单的Docker系统镜像,并建立一个容器. 这里我选择下载CentOS镜像 docker pull centos 通过docker t ...

  8. 前端发起resultUrl请求,服务端收到后做逆向处理,校验sign后,执行originUrl逻辑

    originUrl=http://test.com:8080/user/alipay_phone?uid=123&amount=21.3第0步:前后端约定32位密钥KEY第一步:对参数按照ke ...

  9. mesos cluster

    http://spark.apache.org/docs/latest/running-on-mesos.html http://stackoverflow.com/questions/1993985 ...

  10. 如何使用模板生成 sqlite3 sql 创建语句?

    template<typename T,typename... Args> std::string createTable(T tableName,Args&&... ar ...