`

JS在HTML代码中的执行顺序

    博客分类:
  • JS
阅读更多

上次在别人的博客看到一篇关于JS执行顺序的文章,觉得挺有道理,加上最近又碰上个关于这个的难题,就借着别人的例子研究了一下,写个博文记录下。

 

参考链接:http://747017186.iteye.com/blog/1977133

 

JS代码可以在html代码的<head>和<body>里面引用,所以按照解析html代码的先后顺序来决定JS的执行先后顺序,可以看下面的一段代码来验证:

不使用Jquery的情况下:

<html>
<head>
	<title>测试JS的执行顺序</title>
	<script type="text/javascript">
		alert("最先执行");
	</script>
	<script type="text/javascript" src="temp.js"  charset="UTF-8"></script>
</head>
<body onload="alert('最后执行');">
        <script type="text/javascript">
    	        alert("中间执行1");
        </script>
	 测试JS的执行顺序
       <script type="text/javascript">
    	   alert("中间执行2");
       </script>
</body>
</html>
 temp.js
alert("谁先引用?谁先执行!");
 通过上面的代码,可以得出以下结论:

1.在<head>里面的JS谁先被引用,谁就优先执行,在本例中外部引用的JS第一个执行。紧接着下面的一个<script>“最先实行”代码执行。

2.在<body>里面的JS要比<head>里面的JS后执行,因为html代码是先执行<head>再执 行<body>的,紧接着执行“中间执行1”,然后页面上执行html代码“测试JS的执行顺序 ”,再按照顺序执行“中间执行2”的JS代码。

3.最后页面全部加载完成之后,就是从<head>一直到<body>全部执行完,触发页面加载完成函数onload(),然后执行“最后执行”JS。

 

使用Jquery的情况下:

<html>
	<head>
		<title>测试JS的执行顺序</title>
	<script type="text/javascript" src="jquery.min.js"  charset="UTF-8"></script>
	<script type="text/javascript">
		alert("最先执行");
	</script>
	<script type="text/javascript" src="temp.js"  charset="UTF-8"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			alert("到底谁先执行");
		});
	</script>
	</head>
	<body onload="alert('最后执行');">
	<script type="text/javascript">
    	   alert("中间执行1");
       </script>
		测试JS的执行顺序
	<script type="text/javascript">
    	   alert("中间执行2");
     </script>
	</body>
</html>

 temp.js

$(function(){
	alert("谁先引用?谁先执行!");
});

 在引入Jquery之后,执行顺序的基本原则还是一样的,谁先被引用谁就优先执行,所不同的是:$.(function)方法要在onload()方法之前执行。

总结:JS的执行顺序,由HTML的加载顺序决定,谁先被引用谁就优先执行(无论是写在页面上的JS代码还是引入的JS文件),最后执行onload()方法。如果有Jquery的$(function)或者$(document).ready(function(){}),其原则跟上面的原则一致,有出入的是:她优先onload()方法执行。

 

这里有一个实际应用。

有时候在页面结构为:上表单+下列表时,需要给列表留一定的高度来显示数据,这时候就需要根据页面的高度、表单的高度来计算给列表预留的高度。Jquery的$(obj).offset().top很好用,但有一个缺点:兼容性问题。IE和火狐的解析差距很大。为了兼容,通常使用类似于下面的代码:

function pageX(elem){  //left
	return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft;
}      
function pageY(elem){  //top
	return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop;
}

 其中elem是需要进行计算的对象。

很明显,这个有判断,而且用了递归,能解决兼容性问题,不过也有个问题:时差问题。如果直接将这些代码放在$(function)方法里面(或者$(document).ready(function(){})),它的结果跟offset().top,offset().left是一样的,具体什么原因,不用我说了吧(因为东西还没加载完啊,真正加载完是在触发onload()方法之后)。怎么办呢?可能你会想到用延时,也就是setTimeout,让它过一段时间之后再计算,这也行,也能计算的对,如果你不急着用这个计算出来的数据的话并且你的这些计算代码后面没有代码要执行的话。很明显,这不可能,因为我们计算出来这个数据,就是作为基础数据用来计算后面的,延时不能用了。可以用alert,alert出来的时候,就加载完了,数据就计算对了,可是这个alert不友好啊。怎么办呢?是的,用onload(),将这段代码放在onload()里面,也就是等页面完全加载完了再计算,这个时候递归所需要的各种offsetParent都加载完了,也就没问题了。

分享到:
评论

相关推荐

    ASP.NET中不同部分的js代码的执行顺序

    ### ASP.NET中不同部分的js代码的执行顺序 ...综上所述,在ASP.NET应用中管理JavaScript代码执行顺序需要考虑多种因素。理解这些规则有助于开发者更高效地编写和维护代码,确保页面逻辑的正确性和一致性。

    html中嵌入js执行顺序_html中嵌入js执行顺序_

    总结来说,理解HTML中嵌入JavaScript的执行顺序是至关重要的,它可以帮助我们优化代码结构,提高网页性能,并避免因脚本执行时机不当导致的问题。在实际开发中,应合理利用`async`、`defer`等特性,以及模块化加载...

    JavaScript执行顺序

    综上所述,了解JavaScript的执行顺序对于编写高效、可维护的代码至关重要。通过掌握文档流中的执行顺序以及预编译阶段的行为,开发者能够更好地控制脚本的执行流程,避免常见的陷阱,并写出更加健壮的应用程序。

    html中js代码的加载顺序

    然而,异步脚本的执行顺序是不确定的,可能在HTML解析的任何时刻执行,而且它们之间没有依赖关系的话,这可以提高页面加载速度。 4. **延迟加载(defer)**:`&lt;script defer src="script.js"&gt;&lt;/script&gt;`这个特性...

    js在html中的加载执行顺序.docx

    1. **加载顺序**:JavaScript代码在HTML文档中的加载与执行顺序遵循其在文档中的出现顺序。无论是内联在`&lt;script&gt;`标签内的代码还是通过`src`属性引用的外部文件,都会按照它们在HTML文档中的位置顺序进行加载和执行...

    JS-HTML-Format(JS及HTML代码格式化工具集合)

    HTML Tidy是一款历史悠久的HTML格式化和清理工具,它可以修复不标准的HTML代码,使其符合W3C标准。HTML Tidy提供了丰富的选项,允许用户自定义标签排序、属性顺序、缩进方式等。 5. **Beautify HTML**: 这是VS ...

    关于JS和html代码的执行先后问题

    在JavaScript和HTML的交互中,理解它们的执行顺序是至关重要的。这涉及到浏览器解析网页时的渲染流程,以及JavaScript如何与HTML元素进行交互。本文将深入探讨这些知识点。 首先,我们要明白HTML文档的加载过程。当...

    Javascript在页面加载时的执行顺序.pdf

    1. **按序执行**:JavaScript代码的执行顺序遵循它们在HTML中的出现顺序。无论是内联还是外部引用的脚本,都会按照它们在HTML文档中的顺序依次执行。 2. **全局作用域**:每个脚本定义的全局变量和函数都可在后续...

    jsp页面中的代码执行加载顺序介绍.docx

    在开发过程中,理解JSP页面中的代码执行顺序对于确保程序逻辑正确执行至关重要。本文将详细介绍JSP页面中代码的执行加载顺序,帮助开发者更好地理解和优化其应用。 #### 二、JSP页面的基本结构 JSP页面通常包含...

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环,因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念:JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...

    Javascript在页面加载时的执行顺序.docx

    JavaScript在页面加载时的执行顺序是网页开发中的核心概念,对于理解JavaScript如何与HTML交互至关重要。以下是对这个主题的详细阐述: 一、JavaScript在HTML中的嵌入方法: 1. **内联方式**:直接在`&lt;script&gt;`和`...

    2010html执行顺序.pdf

    总的来说,理解JavaScript在HTML中的执行顺序对于优化网页性能和避免冲突至关重要。开发者需要注意脚本的放置位置,以确保它们在正确的时间执行,同时避免阻塞页面的加载。此外,合理组织和管理JavaScript代码,避免...

    JavaScript 全面解析各种浏览器网页中的JS 执行顺序

    JavaScript 是一种广泛应用于网页开发的脚本语言,它的代码执行顺序问题在不同的浏览器中可能呈现出细微的差异,尤其是在多种引入方式并存时。为了确保网页的正确性和一致性,理解 JavaScript 在各种浏览器中的执行...

    JAVASCRIPT在页面加载时的执行顺序[参考].pdf

    JavaScript 在页面加载时的执行顺序详解 在 HTML 中嵌入 JavaScript 的方法有多种,包括直接在 `&lt;script&gt;` 标记中编写代码、使用 `&lt;script&gt;` 标记的 `src` 属性引入外部 JavaScript 文件、在事件处理程序中编写代码...

    浅谈js在html中的加载执行顺序,多个jquery ready执行顺序

    简而言之,页面中JavaScript代码的加载和执行顺序主要取决于标签在HTML文档中的出现顺序。多个$(document).ready()函数将按照代码的顺序执行,而嵌套的$(document).ready()中内部的会先于外部的执行。函数定义和调用...

    详解关于html,css,js三者的加载顺序问题

    首先,我们要明确一点,浏览器在渲染网页时是按照DOM(文档对象模型)的结构从上到下顺序解析HTML代码。在HTML中,head部分是放置网页元数据的地方,其中包括字符集声明、网页标题、以及链接外部资源的标签和。 在...

    2010html执行顺序.docx

    在给定的示例中,JavaScript的执行顺序是:`alert(1)`、`alert(2)`(来自外部文件`a.js`)、`alert(3)`,以及对`&lt;input id="a"&gt;`的操作。如果在`&lt;input&gt;`元素之上放置一个`&lt;script&gt;`标签来获取`id="a"`的元素,由于...

    Javascript代码在页面加载时的执行顺序介绍

    如示例中在Firefox和Opera中执行结果与IE中的不同,这主要由于IE在解析`document.write()`时并不会等待外部JavaScript文件加载完成。因此,在使用`document.write()`写入外部资源时,可能会出现变量未定义的错误。...

    JavaScript的执行过程详细研究

    在深入探讨JavaScript的执行过程前,我们先来看一下HTML文档中JavaScript代码的执行顺序。 #### 二、按HTML文档流顺序执行JavaScript代码 在HTML文档中,JavaScript代码通常是通过`&lt;script&gt;`标签嵌入的。这些脚本...

Global site tag (gtag.js) - Google Analytics