探讨JavaScript标签位置的存放与功能有无关系


Posted in Javascript onJanuary 15, 2016

在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面。

一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况:

1、放在<head>里

将<script>元素放在head中是为了让浏览器在一开始就读取,<script>元素会在整个网页最开始解析时就加载执行,其优先次序仅次于<title>元素。

然后依次向下解析渲染。

应用:比如进行页面显示初始化的js必须放在head里面。

2、放在<body>部分

浏览器按照页面标签顺序依次解析,在读取到JavaScript代码时就会执行语句。

但有的JS函数是通过事件调用的,所以具体放在页面的哪个位置并不影响其发挥作用的时间,所以,在考虑到前端性能方面的问题后,可以把不是最先执行的和事件调用的JS代码放在body的最下面。

探讨JavaScript标签位置的存放与功能有无关系

写一写看咯:

<!DOCTYPE HTML>
<html>
<head>
<title>JS代码的位置</title>
<script type="text/javascript">
document.write("I'M HEAD javascript");
</script>
</head>
<body>
<script type="text/javascript">
document.write("I'M body javascript");
</script>
</body>
</html>

由以上所述看出,javascript标签位置的存放与功能紧密相关,希望本文所述对大家有所帮助。

Javascript 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JS实现很酷的水波文字特效实例
Feb 26 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
Aug 05 Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 #Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 #Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 #Javascript
JavaScript提高性能知识点汇总
Jan 15 #Javascript
学习JavaScript设计模式之中介者模式
Jan 14 #Javascript
轻松实现jquery手风琴效果
Jan 14 #Javascript
jQuery取得iframe中元素的常用方法详解
Jan 14 #Javascript
You might like
PHP产生随机字符串函数
2006/12/06 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
对PHP语言认识上需要避免的10大误区
2014/06/12 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
jQuery实现的form转json经典示例
2017/10/10 jQuery
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python打开文件的方式有哪些
2020/06/29 Python
python如何随机生成高强度密码
2020/08/19 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
《匆匆》教学反思
2014/02/22 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
三方合作意向书范本
2015/05/09 职场文书
实践论读书笔记
2015/06/29 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书