探讨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 圆角div的实现代码
Oct 15 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
js canvas实现星空连线背景特效
Nov 01 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php 高效率写法 推荐
2010/02/21 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JQuery UI的拖拽功能实现方法小结
2012/03/14 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
javascript倒计时效果实现
2015/11/12 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Python标准库之Sys模块使用详解
2015/05/23 Python
Python iter()函数用法实例分析
2018/03/17 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
解决TensorFlow训练内存不断增长,进程被杀死问题
2020/02/05 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
linux比较文件内容的命令是什么
2013/03/04 面试题
元旦促销方案
2014/03/15 职场文书
先进员工获奖感言
2014/08/14 职场文书
离职信范本
2015/06/23 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书