探讨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 相关文章推荐
phpwind放自动注册方法
Dec 02 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
Sep 17 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
基于Proxy的小程序状态管理实现
Jun 14 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
判断输入是否为空,获得输入类型的JS代码
2013/10/30 Javascript
JS的数组迭代方法
2015/02/05 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
2015/03/04 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
基于jquery实现多选下拉列表
2017/08/02 jQuery
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
JS如何生成动态列表
2020/09/22 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python常见数据结构详解
2014/07/24 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python正则表达式之对号入座篇
2018/07/24 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
英语自我介绍演讲稿
2014/09/01 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
新人入职感言
2015/07/31 职场文书
运动会跳远广播稿
2015/08/19 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
vue3获取当前路由地址
2022/02/18 Vue.js
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS