<script>放在head内和body内有什么区别
加载的顺序不一样,你可以把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)。
- $(document).ready(function(){
- //执行代码
- })
3.从JavaScript对页面下载性能方向考虑:由于脚本会阻塞其他资源的下载(如图片等)和页面渲染,直到脚本全部下载并执行完成后,页面的渲染才会继续,因此推荐将所有的<script>标签尽可能放到<body>标签的底部,以尽量减少对整个页面下载的影响。
<script>放在head内和body内有什么区别相关推荐
- JS内置引用类型/内置对象
JS内置引用类型/内置对象 概述 对象在 JavaScript 中被称为引用类型的值/实例,在 ECMAScript 中,引用类型是一种数据结构, 用于将数据和功能组织在一起.它也常被称为类,但这种称 ...
- 内网渗透-内网代理穿透和内网横向移动
内网代理穿透和内网横向移动 文章目录 内网代理穿透和内网横向移动 前言 内网代理穿透 nc termite(ew) ssh正向代理(A,B,C) msf设置路由和sock4代理访问内网流量 内网横向移 ...
- java 内联_Java内联类初探
java 内联 重要要点 Valhalla项目正在开发内联类,以提高Java程序对现代硬件的亲和力 内联类使开发人员能够编写行为更像Java内置基元类型的类型 内联类的实例不具有对象标识,这带来了许多 ...
- 【C++】内联函数是什么?内联和宏有什么区别?
目录 什么是内联函数? 什么时候使用内联函数? 内联函数和常规函数的区别 如何使用内联函数? 注意: 代码示例 运行结果: 内联与宏有什么区别 什么是内联函数? 内联函数是C++为了提高程序运算速度所 ...
- css引入样式-行内样式、内嵌样式和外链样式
css初识及引入样式 概念:css通常称为css样式表或层叠样式表 作用: - 主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局和外观 ...
- 行内元素与块级元素区别1.0
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/AlanZhuHaiHua/articl ...
- 干货来袭!CSS的行内样式与内联样式,看完就会了
什么是行内样式 行内样式,其实从它的名字就可以看出来它的特点,就是直接在 HTML 标签中使用 style 属性设置 CSS 样式.例如像下面这样的: <p style="font-s ...
- 什么是网站内链,内链有什么作用,网站内链应该如何设置
我们都知道,在SEO的工作中,站内外的相互协调非常重要,二者缺一不可.很多人知道,外部链接是可以保持与网站和外部的链接,可以增加网站的流量和权重等,但不可无视内链的重要性.让我们一起分析构建内链的重要 ...
- 内网和外网的区别 连接不同设备上网
原来一直很疑惑,关于内网和外网的区别,看了好多博客,也没解决疑惑,但是看了书的定义,感觉豁然开朗.区别如下: 若计算机直接连接Modern并实现拨号上网时,利用百度查询到的ip地址是当前计算机在Int ...
- 端口转发与代理工具 内网代理 内网反弹代理
目录 一.LCX 二.nc 反弹 三.socks代理工具 四.frp 内网穿透利器 五.ngrok 内网穿透 理论上,任何接入互联网的计算机都是可访问的,但是如果目标主机处于内网,而我们又想和该目标主 ...
最新文章
- Calc3: Multiple Integrals
- Eclipse Neon 配置C/C++开发环境
- glide加载图片闪烁_html5 canvas绘制图片
- 100行代码搞定抖音短视频App,终于可以和美女合唱了。
- setsockopt()改善程序的健壮性
- memcache获取所有内存数据
- eclipse里面自动添加get和set方法
- 关于windows2008重新启动需要重新设置分辨率的问题
- 中国各个省市区(县)级联数据
- Mac下安装Adobe pr
- 蚁创互联说:品牌营销误区之“做品牌”就是“做广告”
- php里macd预测算法,股票MACD指标算法公式
- 调和级数相关极限合集
- Kafka入门篇学习笔记整理
- 对P5基本二维图像绘制库的交互性扩展
- cbtc仿真系统总结
- 设置Windows 7锁屏背景图片
- 房地产数据分析怎么做更符合实际?
- 人工智能成天桥区智能制造突破口
- C++实现 消消乐小游戏
热门文章
- c++堆栈溢出怎么解决_c语言进阶:堆栈原理揭秘
- pom 选用maven仓库
- MySQL(十)操纵表及全文本搜索
- C++学习笔记:(一)面向对象 类与对象
- 05.内存管理.md
- 【双100%提交】剑指 Offer 09. 用两个栈实现队列
- 1043 输出PATest (20分)_23行代码满分
- 满分简便解法:1002 写出这个数 (20分)
- 数据库mysql建立索引_为mysql数据库建立索引
- focal loss dice loss源码_Detection学习之七-FCOS论文源码解读