探讨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 相关文章推荐
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JS跨域解决方案之使用CORS实现跨域
Apr 14 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
es6数值的扩展方法
Mar 11 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 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可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
javaScript同意等待代码实现心得
2011/01/01 Javascript
js AppendChild与insertBefore用法详细对比
2013/12/16 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python基础篇之初识Python必看攻略
2016/06/23 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python tornado微信开发入门代码
2018/08/24 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
pytorch中图像的数据格式实例
2020/02/11 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
2016/12/15 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
企业宣传方案
2014/03/04 职场文书
岗位工作说明书
2014/07/29 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
Node.js实现断点续传
2021/06/23 Javascript
nginx之内存池的实现
2022/06/28 Servers