探讨JavaScript标签位置的存放与功能有无关系

在网页中，我们可以将JavaScript代码放在html文件中任何位置，但一般放在head或body标签里面。

一般来说，<script>元素放在哪里与其的功能作用是紧密相关的，在这里讨论2种情况：

1、放在<head>里

将<script>元素放在head中是为了让浏览器在一开始就读取，<script>元素会在整个网页最开始解析时就加载执行，其优先次序仅次于<title>元素。

然后依次向下解析渲染。

应用：比如进行页面显示初始化的js必须放在head里面。

2、放在<body>部分

浏览器按照页面标签顺序依次解析，在读取到JavaScript代码时就会执行语句。

但有的JS函数是通过事件调用的，所以具体放在页面的哪个位置并不影响其发挥作用的时间，所以，在考虑到前端性能方面的问题后，可以把不是最先执行的和事件调用的JS代码放在body的最下面。

写一写看咯：

<!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标签位置的存放与功能紧密相关，希望本文所述对大家有所帮助。

赞 (0)

相关推荐

  • 使用JS或jQuery模拟鼠标点击a标签事件代码

    复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &

  • 纯css+js写的一个简单的tab标签页带样式

    纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

  • js监听滚动条滚动事件使得某个标签内容始终位于同一位置

    小知识点,废话不多说,直接上代码 css: 复制代码 代码如下: <pre name="code" class="css"><style> #anchor:{ position:absulate; top:40%; left:40%; width:100px; height:100px; background-color:red; } </style></pre><br> js: 复制代码 代码如下: &l

  • Js实现当前点击a标签变色突出显示其他a标签回复原色

    当一个页面有多个a标签,且点击后会跳转至当前页面,如何实现被点击标签变色突出显示,其他标签回复原色呢? 利用JS可实现: 假设当前页面是"1.aspx" 1. 给a标签ID设值: 复制代码 代码如下: <a href="1.aspx?id=1" id="1" target="_parent">""</a> <a href="1.aspx?id=2" id=&

  • js实现a标签超链接提交form表单的方法

    本文实例讲述了js实现a标签超链接提交form表单的方法.分享给大家供大家参考.具体实现方法如下: <form action="/home/search" method="get" id="search_form"> <div class="searchBox png" id="searchBox"> <input type="text" id="

  • JS实现切换标签页效果实例代码

    在网页<head>区添加以下代码 复制代码 代码如下: <style type="text/css">  <!--  BODY {  PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR

  • javascript标签在页面中的位置探讨

    在制作网页的过程中,我们经常写类似下面的代码: [html] 复制代码 代码如下: <html> <head> <title>Example HTML Page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src=&qu

  • 探讨JavaScript标签位置的存放与功能有无关系

    探讨JavaScript标签位置的存放与功能有无关系

    在网页中,我们可以将JavaScript代码放在html文件中任何位置,但一般放在head或body标签里面. 一般来说,<script>元素放在哪里与其的功能作用是紧密相关的,在这里讨论2种情况: 1.放在<head>里 将<script>元素放在head中是为了让浏览器在一开始就读取,<script>元素会在整个网页最开始解析时就加载执行,其优先次序仅次于<title>元素. 然后依次向下解析渲染. 应用:比如进行页面显示初始化的js必须放在

  • 使用纯JavaScript封装一个消息提示条功能示例详解

    目录 介绍 思路&布局 操作逻辑 完整代码 介绍 一个类似Element UI.Ant-Design UI等 UI 框架的消息提示功能,方便在任何网页环境中直接调用函数使用:区别在不依赖 js 及 css 引用,而是使用纯 js 进行封装实现,代码更精简,同时保持和 UI 框架一样的视觉效果(可自行修改成自己喜欢的样式) 代码仓库 在线预览效果(点击[登录].[点击复制]按钮时触发提示效果) 思路&布局 先来写单个提示条,并实现想要的过渡效果,最后再用逻辑操作输出节点即可:这里不需要父节点

  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

  • JavaScript实现图片本地预览功能【不用上传至服务器】

    JavaScript实现图片本地预览功能【不用上传至服务器】

    本文实例讲述了JavaScript实现图片本地预览功能.分享给大家供大家参考,具体如下: 实现一个在file文件域中选定图片文件之后,马上进行预览.不用预上传到服务器,整缩略图再打回前端用Ajax去预览的.直接利用JavaScript即可以完成,而且还可以兼容IE6.具体效果,如下图所示: 具体实现是在非IE浏览器利用HTML5去显示,在IE浏览器则直接调用IE的滤镜功能去实现.具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • JavaScript无操作后屏保功能的实现方法

    今天组里的同事要写一个屏保的效果,要求鼠标无操作N秒后进入屏幕保护,滑动鼠标的时候取消屏幕保护.因为是坐在网页上,所以用JavaScript简单实现了一下,记录在此,代码如下: <html> <head> <title>屏幕保护测试</title> <script type="text/javascript"> var message ;//获取p标签 var t=setTimeout("delayTask()&qu

  • 深入探讨JavaScript的最基本部分之执行上下文

    深入探讨JavaScript的最基本部分之执行上下文

    在这篇文章中,我将深入探讨JavaScript的最基本部分之一,即Execution Context(执行上下文). 在本文结束时,你应该对解释器了解得更清楚:为什么在声明它们之前可以使用某些函数或变量?以及它们的值是如何确定的? 什么是执行上下文? JavaScript的执行环境非常重要,当JavaScript代码在行时,会被预处理为以下情况之一: Global code - 首次执行代码的默认环境. Function code - 每当执行流程进入函数体时. Eval code - 要在ev

  • Javascript 实现 Excel 导入生成图表功能

    前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的: 怎么样?如果看了心动的话,就接着往下看吧. 本次的这个设计需要用到几个插件:jquery.js.xlsx.js.echarts.js,大家需要提前进行下载,之后新建demo.html,demo.js,style.css文件,然后新建一个你想要操作的EXCEL文件,我这里的例子是这样的: 好了,先看HTML代码,引入js,然后使用div布局,代码如下: <head> <meta chars

  • JavaScript 实现拖拽效果组件功能(兼容移动端)

    页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验.日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧. 预期目标 实现一个 Class 类,通过该 Class,可以将任意 DOM 元素(比如 div)一键变为可拖拽状态,也可以恢复成原来的状态,例如这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  • JavaScript实现拼图式滑块验证功能

    JavaScript实现拼图式滑块验证功能

    目录 演示 前戏 源码介绍 主页样式设计 滑块验证部分 img_ver内部 演示 前戏 滑块验证码是在网站.APP等应用中常见的一种验证方式,通过按照一定规则滑动滑块到指定位置完成验证,才可以进行下一步操作.滑块验证码有两种设计,一种是在滑动框内“一滑到底”即完成验证的,还有一种是滑动滑块拼合拼图完成验证的.由于拼图式的滑块验证码安全性更高,趣味性更强,所以多数网站或APP都选择了拼图式的滑块验证码. 拼图式的滑块验证码在业务应用中有三种展现形式,触发式.嵌入式和弹出式.触发式即鼠标光标移入验证

  • 原生javascript实现的全屏滚动功能示例

    本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

随机推荐