探讨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 相关文章推荐
菜单效果
Oct 14 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
老生常谈js动态添加事件--- 事件委托
Jul 19 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
微信用户访问小程序的登录过程详解
Sep 20 Javascript
记录一次websocket封装的过程
Nov 23 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 变量未定义等错误的解决方法
2011/01/12 PHP
php excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
COSETTE官网:奢华,每天
2020/03/22 全球购物
英语专业个人求职信范文
2014/02/01 职场文书
2014国庆节标语口号
2014/09/19 职场文书
药房管理制度范本
2015/08/06 职场文书
2016寒假假期总结
2015/10/10 职场文书
用Python生成会跳舞的美女
2022/01/18 Python