探讨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 文件夹选择框的两种解决方案
Jul 01 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
May 19 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JavaScript 七大技巧(一)
Dec 13 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
收藏AngularJS中最重要的核心功能
Jul 09 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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仿discuz分页效果代码
2008/10/02 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
javascript中字符串的定义示例代码
2013/12/19 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
javascript实现评分功能
2020/06/24 Javascript
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
2013/01/25 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
公司道歉信范文
2014/01/09 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
公司活动总结怎么写
2014/06/25 职场文书
课外科技活动总结
2014/08/27 职场文书
机动车登记业务委托书
2014/10/08 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2016元旦晚会主持词
2015/07/01 职场文书