探讨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 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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中的string类型使用说明
2010/07/27 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
2018/04/21 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python subprocess模块学习总结
2014/03/13 Python
从Python程序中访问Java类的简单示例
2015/04/20 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
django做form表单的数据验证过程详解
2019/07/26 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python爬虫工具例举说明
2020/11/30 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
机电职业生涯规划书范文
2014/03/08 职场文书
信息总监管理职责范本
2014/03/08 职场文书
管理提升方案
2014/06/04 职场文书
服务理念标语
2014/06/18 职场文书
学生安全责任协议书
2016/03/22 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Python Django ORM连表正反操作技巧
2021/06/13 Python