JavaScript放置位置区别

JavaScript放置位置区别

页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本。

位于 head 部分的脚本:

当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

....

....

位于
body 部分的脚本:

在页面载入时脚本就会被执行。当你把脚本放置于 body
部分后,它就会生成页面的内容。

....


body head
部分的脚本:

你可以在文档中放置任何数量的脚本,因此你既可以把脚本放置到 body,又可以放置到 head
部分。

....

....

使用外部
JavaScript

有时,你也许希望在若干个页面中运行
JavaScript,同时不在每个页面中写相同的脚本。

为了达到这个目的,你可以将 JavaScript
写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意:外部文件不能包含

简言之:

  • 如果放在head里面,初始化页面的时候就会首先加载
  • 如果放在body里面,等页面初始化完成,才去加载。

参考:http://blog.sina.com.cn/s/blog_54c367d4010179ks.html

时间: 2024-11-09 22:53:59

JavaScript放置位置区别的相关文章

javascript放置位置推介

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 <!-- 需要引用到的外部javaScript文件 --> 6 <title>Javascript位置推介</title> 7 8 <!-- 在</head>前放置函数和闭包 --> 9 </head> 10 <!-- 放置全局变量及

javascript代码放置位置对程序的影响

在编写html文档时,javascript可以放置的位置有两个地方<head>或者<body>,但是放置的地方,会对 JavaScript 代码的正常执行会有一定影响.由于 HTML 文档是由浏览器从上到下依次载入的,javascript的放置位置主要影响获取网页元素.如果你的代码中包含获取网页元素的代码例如document.getElementById(),那么你需要确保你的javascript代码要在你想要获取的元素的位置之后.如过在你想要获取的元素的位置之前调用这个些代码,由

关于jQuery放置位置的问题01

由于javascript是按照顺序执行的.因为其放置位置应该在被获取元素的前面. 如此: <!doctype html><!--告知该文档是HTML5文档--><html><head><meta charset="utf-8"><title>无标题文档</title><link href="css/style.css" rel="stylesheet" /&

Spring环境搭建之:导入jar包、配置文件名称及放置位置

Spring环境搭建之:导入jar包.配置文件名称及放置位置 现在项目开发中spring框架应用的还是比较多的,自己用的还不太熟练,每次用的时候总配置半天,总有些配置弄错,就找个时间总结以下,方便以后再搭建环境的时候直接拿来用. 以Spring4为例,这里就不提供Spring的下载地址了,官网上很容易下的到. 1.导入相关jar包 建好web项目以后,导入Spring自己的jar包 spring-beans-4.0.0.M2.jar spring-context-4.0.0.M2.jar spr

【转】onclick事件与href=&#39;javascript:function()&#39;的区别

href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:function()' 这样的写法,因为 href 属性里面设置了js代码后,在某些浏览器下可能会引发其他不必要的事件.造成非预期效果. 而且 onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href,所以如果不想页面跳转,可以设置 onclick里面的js代码执行到最后

JavaScript最佳位置选择

高性能javascript 并行加载与顺序执行.Javascript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题. 首先,引用脚本必须用到<script>标签,我们需要了解<script>标签的特性,引述书中作者原话: 当浏览器遇到(内嵌)<script>标签时,当前浏览器无从获知Javascript是否会修改页面内容.因此,这时浏览

前端优化分析 之 javascript引用位置优化

在很多优化法则中都提到,尽量将javascript放到页面底部,这是为什么呢 我通过firebug进行了下简单的分析 看下图  本页面首尾都存在javascript代码 我们分析得出 1.整个页面文档家在结束才开始加载css和js以及其他的数据 2.当顶部的所有js都家在结束之后才可以加载页面中的图片 3.顶部的common.css和common.js几乎是同时开始加载 4.底部的loader-min.js和离他最近的footer.jpg也是同时开始加载 由此,我们可以分析出,至少在这个版本的f

7.springboot配置文件配置运行环境、放置位置

1.properties方式 dev test prod开发 测试 生产环境数据 多Profile文件 默认application.properties 可以切换环境: spring.profiles.active=dev 2.yml方式 yml支持多文档块环境 yaml用---可以把一个文档"拆分"成多个文档 #yaml文档块模式 server: port: 8081 spring: profiles: activemq: dev --- server: port: 8083 spr

&lt;script&gt;标签在html中书写位置区别

1. 将JavaScript标识放置<Head>... </Head>在头部之间,使之在主页和其余部分代码之前预先装载,从而可使代码的功能更强大: 比如对*.js文件的提前调用. 也就是说把代码放在<head>区在页面载入的时候,就同时载入了代码,你在<body>区调用时就不需要再载入代码了,速度就提高了,这种区别在小程序上是看不出的,当运行很大很复杂的程序时,就可以看出了.当然也可以将JavaScript标识放置在<Body>... </