探讨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 相关文章推荐
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
打造自己的jQuery插件入门教程
Sep 23 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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 fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
你不知道的文件上传漏洞php代码分析
2016/09/29 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
python实现连接mongodb的方法
2015/05/08 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
优秀交警事迹材料
2014/01/26 职场文书
草船借箭教学反思
2014/02/03 职场文书
个人安全承诺书
2014/05/22 职场文书
我为党旗添光彩演讲稿
2014/09/10 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
2015年暑假生活总结
2015/07/13 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby