编程开发子分类HTML 中 body 标签内的 JavaScript 代码将在什么时候执行？
按投票排序
读到即执行，写在事件触发里除外。
看到下面的回答，补充一下：
还有两种情况，一种是加了 defer 属性的在文档加载后执行，可以理解为放在html最底部;
另外，html5 增加了 async 属性，相当于异步执行，与文档加载同时进行;
另外，defer 属性除 IE 支持外，Firefox 以及后来的 Chrome 都支持的。
下载完一个完整的script标签就执行，所以说script标签是阻塞式加载
下面说的差不多了,不过 defer属性在不同浏览器里面表现不一,暂时最好还是别用.
另外说下执行是顺序执行的,跟你的script标签的顺序有关.所以有依赖的js需要放在后面,不然会报错的.
问的太粗了,关于这个,详细说起来有很多文章的.
已有帐号？
无法登录？
社交帐号登录Javascript的匿名函数与自执行
时间: 23:48
作者:admin
摘要 函数 是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数：就是没有函数名的函数。 函数的定义，大致可分为三种方式： 第一种：这也是最常规的一种 function double(x){ return 2 * } 第二种：这种方法使用了Function构造函数，把
函数是JavaScript中最灵活的一种对象，这里只是讲解其匿名函数的用途。匿名函数：就是没有函数名的函数。&函数的定义，大致可分为三种方式：第一种：这也是最常规的一种function double(x){
return 2 *
}第二种：这种方法使用了Function构造函数，把参数列表和函数体都作为字符串，很不方便，不建议使用。var double = new Function('x', 'return 2 *');第三种：var double = function(x) { return 2* }注意“=”右边的函数就是一个匿名函数，创造完毕函数后，又将该函数赋给了变量square。&&匿名函数的创建&第一种方式：就是上面所讲的定义square函数，这也是最常用的方式之一。第二种方式：(function(x, y){
alert(x + y);
})(2, 3);这里创建了一个匿名函数(在第一个括号内)，第二个括号用于调用该匿名函数，并传入参数。括号是表达式，是表达式就有返回值，所以可以在后面加一对括号让它们执行.&&自执行的匿名函数&&&&&1. 什么是自执行的匿名函数?&&&&它是指形如这样的函数: (function {// code})();&&&&2. 疑问&&&&为什么(function {// code})();可以被执行, 而function {// code}();却会报错?&&&&3. 分析&&&&(1). 首先, 要清楚两者的区别:&&&&(function {// code})是表达式, function {// code}是函数声明.&&&&(2). 其次, js&预编译&的特点:&&&&js在&预编译&阶段, 会解释函数声明, 但却会忽略表式.&&&&(3). 当js执行到function() {//code}();时, 由于function() {//code}在&预编译&阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;&&&&当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.&&&另外，&函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……如：!function(){
alert("另类的匿名函数自执行");
}();&&匿名函数与闭包&闭包的英文单词是closure，这是JavaScript中非常重要的一部分知识，因为使用闭包可以大大减少我们的代码量，使我们的代码看上去更加清晰等等，总之功能十分强大。闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）。function checkClosure(){
var str = 'rain-man';
setTimeout(
function(){ alert(str); } //这是一个匿名函数
checkClosure();这个例子看上去十分的简单，仔细分析下它的执行过程还是有许多知识点的：checkClosure函数的执行是瞬间的（也许用时只是0.00001毫秒），在checkClosure的函数体内创建了一个变量str，在checkClosure执行完毕之后str并没有被释放，这是因为setTimeout内的匿名函数存在这对str的引用。待到2秒后函数体内的匿名函数被执行完毕,str才被释放。&用闭包来优化代码：function forTimeout(x, y){
alert(x + y);
function delay(x , y
setTimeout('forTimeout(' +
y + ')' , time);
* 上面的delay函数十分难以阅读，也不容易编写，但如果使用闭包就可以让代码更加清晰
* function delay(x , y , time){
setTimeout(
function(){
forTimeout(x , y)
*/匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。&var oEvent = {};
(function(){
var addEvent = function(){ /*代码的实现省略了*/ };
function removeEvent(){}
oEvent.addEvent = addE
oEvent.removeEvent = removeE
})();在这段代码中函数addEvent和removeEvent都是局部变量，但我们可以通过全局变量oEvent使用它，这就大大减少了全局变量的使用，增强了网页的安全性。 我们要想使用此段代码：oEvent.addEvent(document.getElementById('box') , 'click' , function(){});&var rainman = (function(x , y){
return x +
})(2 , 3);
* 也可以写成下面的形式，因为第一个括号只是帮助我们阅读，但是不推荐使用下面这种书写格式。
* var rainman = function(x , y){
return x +
* }(2 , 3);在这里我们创建了一个变量rainman，并通过直接调用匿名函数初始化为5，这种小技巧有时十分实用。var outer =
(function(){
var one = 1;
function inner (){
alert(one);
//4这段代码中的变量one是一个局部变量（因为它被定义在一个函数之内），因此外部是不可以访问的。但是这里我们创建了inner函数，inner函数是可以访问变量one的；又将全局变量outer引用了inner，所以三次调用outer会弹出递增的结果。&&注意&1 闭包允许内层函数引用父函数中的变量，但是该变量是最终值/**
&li&one&/li&
&li&two&/li&
&li&three&/li&
&li&one&/li&
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists. i & i++){
lists[ i ].onmouseover = function(){
}你会发现当鼠标移过每一个&li&元素时，总是弹出4，而不是我们期待的元素下标。这是为什么呢？注意事项里已经讲了（最终值）。显然这种解释过于简单，当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。解决方法一：var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists. i & i++){
(function(index){
lists[ index ].onmouseover = function(){
alert(index);
}解决方法二：var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists. i & i++){
lists[ i ].$$index =
//通过在Dom元素上绑定$$index属性记录下标
lists[ i ].onmouseover = function(){
alert(this.$$index);
}解决方法三：function eventListener(list, index){
list.onmouseover = function(){
alert(index);
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists. i & i++){
eventListener(lists[ i ] , i);
}2 内存泄露 使用闭包十分容易造成浏览器的内存泄露，严重情况下会是浏览器挂死&
上一篇： 有时候，我们不需要太牛逼太强大的JavaScript模板引擎（比如jQuery tmpl或者handlebarsjs），我们只是需要在简单的模板里绑定一些非常简单的字段，本文将使用非常简单的技巧来帮你实现这个小功能。 首先我们先来定义我们需要的模板，在id为template的script
下一篇： Javascript中this关键字通常指向当前函数的拥有者。在javascript中通常把这个拥有者叫做执行上下文。函数的执行上下文由当前的运行环境而定： 全局变量和全局函数附属于全局对象(window)，因此使用”var”或”this”两种方法定义全局变量是等效的。 执行上下javascript语句的执行过程分析
javascript的运行原理总结如下：
1、按照html文档流顺序执行javascript代码
浏览器是按照文档流从上到下逐步解析页面结构和信息的，javascript代码作为嵌入的脚本作为html文档的组成部分，所以javascript代码在加载时的执行顺序也是根据脚本标签&script&的出现顺序来确定的。
如果通过脚本标签&script&的src属性来引入外部.js文件，那么它也将按照其语句出现的顺序来执行，而且执行过程是文档加载的一部分。不会因为是外部js文件而延期执行。
2、预编译和执行顺序的关系
首先看如下这段代码：
&script type=&text/javascript&&
function hello() {
alert(&hello&);
function hello() {
alert(&hello world&);
上面这段js代码的输出结果是hello world 、hello world，而不是先输出hello，再输出hello world。这是因为javascript并非完全按照顺序来解释执行，而是在解释之前会对javascript进行一次预编译，在预编译的过程中，会把定义式的函数优先执行，也会把所有var变量创建，默认值为undefined，以提高程序的执行效率。也就是说上面的这段代码其实被JS引擎预编译成下面这样：
&script type=&text/javascript&&
var hello = function() {
alert(&hello&);
hello = function() {
alert(&hello world&);
通过上面的代码可以清晰的看到，函数其实也是变量，可以对函数进行赋值。为了防止前面那种情况的出现，可以如下定义成两个js文件：
&script type=&text/javascript&&
function hello() {
alert(&hello&);
// hello();
&script type=&text/javascript&&
function hello() {
alert(&hello world&);
上面第一个文件，我把hello()放在了function的前面，也是可以输出正确结果的。
&script type=&text/javascript&&
var hello = function() {
alert(&hello&);
// hello();
如果用上面的这种方法对function函数进行定义，那么就会报错，报错信息如下图1所示：
图1：报错信息
这里报错hello is not a funtion，这是由于在预编译的时候，对于用var声明的变量，虽然最先就处理了，但是变量值是undefined。然后运行hello()的时候，由于前面的hello是undefined，类型没有确定，所以这里是hello is not a function。虽然，程序中有定义这个函数，但是定义的位置放在了调用的后面，那么调用的时候，程序并没有运行到这里，所以没用。
再来看下面的这一段代码：
&script type=&text/javascript&&
function hello() {
alert(&hello&);
// hello();
上面的这段代码虽然调用也是在函数定义的前面，但是这里是以function关键字来定义的，用function来定义的时候，跟var不一样，function定义的时候就已经把函数的值赋了过去，所以这里可以运行。
当javascript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理。处理如下：
（1）在执行前会进行类似“预编译”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var声明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。
（2）在解释执行阶段，遇到变量需要解析时，会首先从当前执行环境的活动对象中查找，如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找，否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值（注意：变量的赋值是在解释执行阶段完成的，如果在这之前使用变量，它的值会是undefined）。
（3）综上，一句话总结就是：变量的声明在预编译期，变量的初始化在运行期。
&script type=&text/javascript&&
alert(a); // 在预编译期间a变量已经加载，但是用var定义，所以赋值为undefined先，故这里输出undefined。
var a = 1; // 这里给前面的没有赋值的a进行赋值为1
alert(a); // 这里输出的a已经是前面赋值过的，所以输出1。
对于上面的这段代码，输出结果是：先输出undefined，后输出1，分析见代码备注。
虽然变量和函数声明可以在文档任意位置，但是良好的习惯应该是在所有JavaScript代码之前声明全局变量和函数，并对变量进行初始化赋值。在函数内部也是先声明变量，然后再引用。
3、按块执行javascript代码
所谓代码块就是使用&script&标签分隔的代码段。JavaScript解释器在执行脚本时，是按块来执行的。通俗地说，就是浏览器在解析HTML文档流时，如果遇到一个&script&标签，则JavaScript解释器会等到这个代码块都加载完后，先对代码块进行预编译，然后再执行。执行完毕后，浏览器会继续解析下面的HTML文档流，同时JavaScript解释器也准备好处理下一个代码块。由于JavaScript是按块执行的，所以如果在一个JavaScript块中调用后面块中声明的变量或函数就会提示语法错误。
var a = 1;
上面的这段代码，由于是两个代码块，先执行完第一个代码块，再执行第二个代码块。执行第一个代码块的时候，变量a没有声明，所以报错，报错信息是：a is not defined。
var a = 1;
虽然说，JavaScript是按块执行的，但是不同块都属于同一个全局作用域，也就是说，块之间的变量和函数是可以共享的。所以，上面的这两个代码块运行的时候，虽然是两个代码块，但是第一段运行以后，a变量就存在了全局作用域中，此时运行到第二个代码块，输出的a变量就可以调用全局作用域中的a，所以没有问题。
4、借助事件机制改变javascript执行顺序
由于JavaScript是按块处理代码，同时又遵循HTML文档流的解析顺序，所以在上面示例中会看到这样的语法错误。但是当文档流加载完毕，如果再次访问就不会出现这样的错误。为了安全起见，我们一般在页面初始化完毕之后才允许JavaScript代码执行，这样可以避免网速对JavaScript执行的影响，同时也避开了HTML文档流对于JavaScript执行的限制。
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&javascript&/title&
window.onload = function() {
var a = 1;
alert(&bb&);
alert(&cc&);
windows.onload = function()表示先在触发事件上加一个函数，并不立即执行，而是在整个页面都加载完成以后再开始执行该事件，及function。所以，在windows.onload执行之前，就已经把一些变量加载到了全局区中，所以没有问题。上面的输出结果是：先输出bb，再输出cc，最后输出a。
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&javascript&/title&
window.onload = function() {
// 上面的onload不会执行，只会执行下面的onload
window.onload = function() {
alert(&onload2&);
var a = 1;
alert(&bb&);
alert(&cc&);
如果在一个页面中存在多个windows.onload事件处理函数，则只有最后一个才是有效的（如上面的代码所示），为了解决这个问题，可以把所有脚本或调用函数都放在同一个onload事件处理函数中，如下面的代码所示：
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&javascript&/title&
window.onload = function() {
// 放到一起
alert(&onload2&);
var a = 1;
alert(&bb&);
alert(&cc&);
5、javascript输出脚本的执行顺序
在JavaScript开发中，经常会使用document对象的write()方法输出JavaScript脚本。document.write()方法先把输出的脚本字符串写入到脚本所在的文档位置，浏览器在解析完document.write()所在文档内容后，继续解析document.write()输出的内容，然后才按顺序解析后面的HTML文档。也就是说，JavaScript脚本输出的代码字符串会在输出后马上被执行。请注意，使用document.write()方法输出的JavaScript脚本字符串必须放在同时被输出的&script&标签中，否则JavaScript解释器因为不能够识别这些合法的JavaScript代码，而作为普通的字符串显示在页面文档中。但是，通过document.write()方法输出脚本并执行也存在一定的风险，因为不同JavaScript引擎对其执行顺序不同，同时不同浏览器在解析时也会出现Bug。
PS：本文在“&&&思考中前行～～”的《》的基础上修改并完善了下，部分没有摘录过来的内容可以参见原文。