探讨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 相关文章推荐
jquery获取复选框被选中的值
Apr 10 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 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文件上传之多文件上传的实现思路
2016/01/27 PHP
smarty模板数学运算示例
2016/12/11 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
ajax与302响应代码测试
2013/10/23 Javascript
innerText 使用示例
2014/01/23 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
sails框架的学习指南
2014/12/22 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
Material(包括Material Icon)在Angular2中的使用详解
2018/02/11 Javascript
React中的refs的使用教程
2018/02/13 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
jQuery实现B2B网站后台管理系统侧导航
2020/07/08 jQuery
python解析json实例方法
2013/11/19 Python
Python中replace方法实例分析
2014/08/20 Python
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
numpy库reshape用法详解
2020/04/19 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
卫生安全检查制度
2014/02/04 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
技术负责人任命书
2014/06/05 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
被告答辩状范文
2015/05/22 职场文书
《叶问2》观后感
2015/06/15 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers