探讨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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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用户指南-cookies部分
2006/10/09 PHP
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python实现网站的模拟登录
2016/01/04 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
老生常谈Python基础之字符编码
2017/06/14 Python
Python统计单词出现的次数
2018/04/04 Python
python图像和办公文档处理总结
2019/05/28 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python3的数据类型及数据类型转换实例详解
2019/08/20 Python
python实现文件的分割与合并
2019/08/29 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
C/C++程序员常见面试题二
2015/11/19 面试题
北京SQL新华信咨询
2016/09/30 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
销售职业生涯规划范文
2014/03/14 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
2015年高三年级组工作总结
2015/07/21 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP
Redis全局ID生成器的实现
2022/06/05 Redis