加载的顺序不一样,你可以把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. 虚拟化笔记05 OpenFiler configuration

    5.OpenFiler configuration 登录Openfiler 步骤1:安装 FireFox 步骤2:通过FireFox以HTTPS://server-ip:446 远程访问OpenFil ...

  2. 【Mac安装,ATX基于uiautomator2】之安装步骤

    Mac系统下安装uiaotumator2: 参考网址:<uiautomator2>以及参考github官方文档 注意:下面有坑,如果你没有下面的问题请直接跳转到 1.安装uiaotumat ...

  3. 巧用批处理cmd快速切换IP地址

    如果你的笔记本经常在不同的地方使用,有些地方需要自动获取IP,而有些地方需要配置固定IP,每换一个地方都需要重新配置一遍,是不是感觉很麻烦呢? 下面介绍一种通过建立批处理文件来快速切换IP的方法: s ...

  4. python 爬虫3 异常处理

    1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的服务器 服务器不存在 在代码中,我们需要用try-except语句来包围并捕获相应的异常.下 ...

  5. PYTHON -转载,获取淘宝数据01

    import requests import sys import random api = { 'number':[ 'https://acs.m.taobao.com/h5/mtop.taobao ...

  6. 一套一般般的前端框架 layui

    http://www.layui.com/doc/

  7. Qt 静态编译后的exe太大, 能够这样压缩.

    1. 下载PECompact 下载地址:http://download.csdn.net/download/sniper_bing/7669247 ,  不行大家就去baidu搜索下载就能够了这个是绿 ...

  8. Yii 2 的安装 之 踩坑历程

    由于刚接触yii2 ,决定先装个试试:可是这一路安装差点整吐血,可能还是水平有限吧,  但还是想把这个过程分享出来,让遇到同样问题的同学有个小小的参考,好了言归正传!! <(~.~)> 下 ...

  9. PHP面向过程和面向对象

    php程序编写分为面向过程和面向对象.两者在功能实现上没有区别,但是在代码编写上区别很大,面向过程的代码很乱,不易管理,而面向对象把常用的功能封装为一个类,这样代码清楚多了. 下面举个小例子说明一下: ...

  10. Java的版本历史与特性

    一个比较流行的问题是,“Java下一个版本会有什么特性呢?” .这是否是个好问题却有待商榷.在下面的内容里,我总结了至今为止的Java主要发行版中各自引入的新特性,这样做的目的是为了突出各个新特性是在 ...