探讨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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
解析javascript系统错误:-1072896658的解决办法
Jul 08 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
javascript实现微信分享
Dec 23 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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/10/09 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php修改数组键名的方法示例
2017/04/15 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
js 动态选中下拉框
2009/11/26 Javascript
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
js获取内联样式的方法
2015/01/27 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Angular2学习笔记——详解NgModule模块
2016/12/02 Javascript
在Vue.js中使用Mixins的方法
2017/09/12 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
js限制input只能输入有效的数字(第一个不能是小数点)
2018/09/28 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python科学计算环境推荐——Anaconda
2014/06/30 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
查看django版本的方法分享
2018/05/14 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
python 数据类型强制转换的总结
2021/01/25 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
什么是抽象
2015/12/13 面试题
中职生求职信
2014/07/01 职场文书
电子工程求职信
2014/07/17 职场文书
校外活动方案
2014/08/28 职场文书
教师个人成长总结
2015/02/11 职场文书
联谊会开场白
2015/06/01 职场文书
初中物理教学反思
2016/02/19 职场文书