加载的顺序不一样,你可以把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. JS内置引用类型/内置对象

    JS内置引用类型/内置对象 概述 对象在 JavaScript 中被称为引用类型的值/实例,在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起.它也常被称为类,但这种称 ...

  2. 内网渗透-内网代理穿透和内网横向移动

    内网代理穿透和内网横向移动 文章目录 内网代理穿透和内网横向移动 前言 内网代理穿透 nc termite(ew) ssh正向代理(A,B,C) msf设置路由和sock4代理访问内网流量 内网横向移 ...

  3. java 内联_Java内联类初探

    java 内联 重要要点 Valhalla项目正在开发内联类,以提高Java程序对现代硬件的亲和力 内联类使开发人员能够编写行为更像Java内置基元类型的类型 内联类的实例不具有对象标识,这带来了许多 ...

  4. 【C++】内联函数是什么?内联和宏有什么区别?

    目录 什么是内联函数? 什么时候使用内联函数? 内联函数和常规函数的区别 如何使用内联函数? 注意: 代码示例 运行结果: 内联与宏有什么区别 什么是内联函数? 内联函数是C++为了提高程序运算速度所 ...

  5. css引入样式-行内样式、内嵌样式和外链样式

    css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...

  6. 行内元素与块级元素区别1.0

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/AlanZhuHaiHua/articl ...

  7. 干货来袭!CSS的行内样式与内联样式,看完就会了

    什么是行内样式 行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...

  8. 什么是网站内链,内链有什么作用,网站内链应该如何设置

    我们都知道,在SEO的工作中,站内外的相互协调非常重要,二者缺一不可.很多人知道,外部链接是可以保持与网站和外部的链接,可以增加网站的流量和权重等,但不可无视内链的重要性.让我们一起分析构建内链的重要 ...

  9. 内网和外网的区别 连接不同设备上网

    原来一直很疑惑,关于内网和外网的区别,看了好多博客,也没解决疑惑,但是看了书的定义,感觉豁然开朗.区别如下: 若计算机直接连接Modern并实现拨号上网时,利用百度查询到的ip地址是当前计算机在Int ...

  10. 端口转发与代理工具 内网代理 内网反弹代理

    目录 一.LCX 二.nc 反弹 三.socks代理工具 四.frp 内网穿透利器 五.ngrok 内网穿透 理论上,任何接入互联网的计算机都是可访问的,但是如果目标主机处于内网,而我们又想和该目标主 ...

最新文章

  1. Calc3: Multiple Integrals
  2. Eclipse Neon 配置C/C++开发环境
  3. glide加载图片闪烁_html5 canvas绘制图片
  4. 100行代码搞定抖音短视频App,终于可以和美女合唱了。
  5. setsockopt()改善程序的健壮性
  6. memcache获取所有内存数据
  7. eclipse里面自动添加get和set方法
  8. 关于windows2008重新启动需要重新设置分辨率的问题
  9. 中国各个省市区(县)级联数据
  10. Mac下安装Adobe pr
  11. 蚁创互联说:品牌营销误区之“做品牌”就是“做广告”
  12. php里macd预测算法,股票MACD指标算法公式
  13. 调和级数相关极限合集
  14. Kafka入门篇学习笔记整理
  15. 对P5基本二维图像绘制库的交互性扩展
  16. cbtc仿真系统总结
  17. 设置Windows 7锁屏背景图片
  18. 房地产数据分析怎么做更符合实际?
  19. 人工智能成天桥区智能制造突破口
  20. C++实现 消消乐小游戏

热门文章

  1. c++堆栈溢出怎么解决_c语言进阶:堆栈原理揭秘
  2. pom 选用maven仓库
  3. MySQL(十)操纵表及全文本搜索
  4. C++学习笔记:(一)面向对象 类与对象
  5. 05.内存管理.md
  6. 【双100%提交】剑指 Offer 09. 用两个栈实现队列
  7. 1043 输出PATest (20分)_23行代码满分
  8. 满分简便解法:1002 写出这个数 (20分)
  9. 数据库mysql建立索引_为mysql数据库建立索引
  10. focal loss dice loss源码_Detection学习之七-FCOS论文源码解读