探讨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 学习书 推荐
Jun 13 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
jQuery使用元素属性attr赋值详解
Feb 27 Javascript
原生JS实现美图瀑布流布局赏析
Sep 07 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
详解JavaScript执行模型
Nov 16 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
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
初识ThinkPHP控制器
2016/04/07 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JS中递归函数
2016/06/17 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
使用python进行拆分大文件的方法
2018/12/10 Python
对python:print打印时加u的含义详解
2018/12/15 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
园林设计师自荐信
2013/11/18 职场文书
感恩的演讲稿
2014/05/06 职场文书
保险专业求职信
2014/07/07 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
保证书格式
2015/01/16 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript