搜索：
非阻塞JavaScript
对于一个html页面，head中有三个js代码段，并引入了四个js外部文件,head与body间有一个js代码段；body中有两个js代码段，body外有一个代码段；html外有一个js代码段；
在ABCD四个外部js中的第一行都有一行代码：alert(X +" start!"+ "---" + document.getElementById("testJS"));//X代表A、B、C、D
在B外部js中，有代码window.onload = function(){ alert("window.onload!"+ "---" + document.getElementById("testJS")); }
见附件！html如下：
<html>
<head>
<title>html中js代码的加载顺序</title>
<script type="text/javascript">
var a = 0;
alert(a+"--head start!" + "---" + document.getElementById("testJS"))
a++;
function test(){
a++;
alert(a+"--"+document.getElementById("testJS").id);
}
</script>
<script type="text/javascript" src="A.js"></script>
<script type="text/javascript" src="B.js"></script>
<script type="text/javascript">
alert(a+"--head middle!" + "---" + document.getElementById("testJS"));
a++;
</script>
<script type="text/javascript" src="C.js"></script>
<script type="text/javascript" src="D.js"></script>
<script type="text/javascript">
alert(a+"--head end!" + "---" + document.getElementById("testJS"));
a++;
</script>
</head>
<script type="text/javascript">
alert(a+"--head-body!" + "---" + document.getElementById("testJS"));
a++;
</script>
<body>
<script type="text/javascript">
alert(a+"--body start!" + "---" + document.getElementById("testJS"));
a++;
</script>
<input type="button" id="testJS" value="此处上面的js代码都获取不到该元素，下面的可以读取到" onclick="test()"/>
<script type="text/javascript">
alert(a+"--body end!" + "---" + document.getElementById("testJS"));
a++;
</script>
</body>
<script type="text/javascript">
alert(a+"--BODY-HTML!" + "---" + document.getElementById("testJS"));
a++;
</script>
</html>
<script type="text/javascript">
alert(a+"--HTML外!" + "---" + document.getElementById("testJS"));
a++;
</script>
打开这个html页面，运行结果如下，依次alert打印：
0--head start!---null
1--A start!---null
2--B start!---null
3--B end!---null
4--head middle!---null
5--C start!---null
6--D start!---null
7--head end!---null
8--head-body!---null
9--body start!---null
10--body end!---[object]
11--BODY-HTML!---[object]
12--HTML外!---[object]
13--window.onload!---[object]
然后点击按钮，会alert打印出input的id为：14--testJS
以后每点击一次按钮，会加1；
总结：
html页面中html代码以及js加载的顺序是：
按照文档里的先后顺序，从上往下依次加载：先加载head标签中的js代码段以及引入的js，然后加载body标签中的html代码以及js代码，再加载body标签下面的js代码，直到将页面加载完全，最后才执行window.onload方法。
在html中写js代码要注意，一定要在某个页面元素加载后再去执行document.getElementById访问它，否则没有加载到它时会是null，报错！
remark：可以用
chrome调试javascript，可以像调试java代码一样简单，就不需要用alert了。
chrome调试javascript用法链接：http://blog.csdn.net/wqc02/article/details/8838276
分享到：
相关推荐
这是因为JavaScript代码在执行过程中可能会修改DOM结构，如果在解析HTML的同时执行JavaScript代码，可能会导致不一致的页面状态。因此，浏览器在遇到标签时，会优先下载并执行JavaScript文件，等待其完全执行完毕后...
1. **执行JS**：如果`<script>`标签包含JavaScript代码，浏览器会暂停HTML解析并执行脚本。 2. **DOM操作**：JavaScript可以修改DOM，这会导致浏览器重新构建受影响的部分，可能导致重排和重绘。 3. **异步加载**：...
### JSP页面中的代码执行加载顺序详解 #### 一、引言 JSP（Java Server Pages）是一种基于Java技术的动态网页技术标准，它通过将动态生成的内容嵌入到静态HTML页面中，使得Web应用程序能够生成动态变化的内容。在...
接下来，我们编写JavaScript代码。这里假设有一个名为`js/main.js`的文件，用于处理图片的分块加载。首先，获取图片元素，并读取其`data-src`属性： ```javascript var imgElement = document.getElementById('...
在ASP.NET开发中，JavaScript代码的执行顺序对于确保页面逻辑正确运行至关重要。本文将详细介绍ASP.NET环境中不同位置JavaScript代码的执行顺序，帮助开发者更好地理解和掌握这一机制。 #### 1. `<head>`标签中的JS...
在页面加载时，浏览器会按照HTML文档的顺序解析元素并执行遇到的JavaScript代码。如果JavaScript位于文档的头部，可能会阻塞页面的渲染，直到脚本执行完毕。因此，将脚本放在`<body>`标签底部或使用`async`或`defer`...
在"asyLoad.js"这个文件中，我们可以预期它包含了一段用于实现JavaScript异步加载的代码。下面将详细介绍异步加载的原理和常见实现方法。 1. **异步加载的原理**： - 使用`<script>`标签的`async`属性：当`async`...
了解JSP页面中的代码执行加载顺序对于Web开发人员来说至关重要，因为它影响页面的表现和功能的实现。 JSP页面中的代码主要分为三部分：Java代码、JSP标签和脚本以及客户端的JavaScript和HTML代码。这些部分的执行...
在HTML文档中嵌入JavaScript代码是网页开发中的常见实践，这允许我们动态地改变内容、响应用户交互或执行复杂的逻辑。了解JavaScript的执行顺序对于优化网页性能和避免潜在的错误至关重要。以下是对这一主题的详细...
通过优化网页的加载顺序，特别是将非关键的JavaScript广告放在最后加载，我们可以显著提高网页的首屏加载速度，从而提升用户体验。同时，对于网页性能的优化，还可以考虑使用CDN加速资源获取，压缩代码减少传输量，...
1. **加载顺序**：JavaScript代码在HTML文档中的加载与执行顺序遵循其在文档中的出现顺序。无论是内联在`<script>`标签内的代码还是通过`src`属性引用的外部文件，都会按照它们在HTML文档中的位置顺序进行加载和执行...
页面加载顺序对于用户体验至关重要，因为它直接影响到用户首次看到网页内容的速度和形式。在网页开发中，浏览器遵循一定的规则来解析HTML、CSS和JavaScript文件，从而构建出完整的页面。本篇文章将详细探讨页面加载...
动态加载则改变了这一模式，它使用JavaScript代码来异步请求并插入外部脚本，使得页面可以先呈现基本内容，而JavaScript文件则在后台加载，提高了用户体验。 二、动态加载的方法 1. 使用`<script>`标签的`async`和...
3. 外部脚本方式：这是推荐的做法，可以将JavaScript代码保存为单独的.js文件，然后在HTML中引用。这样可以实现代码复用，提高可维护性。例如： ```html <!DOCTYPE html> <html> <script src="hello.js"> 点击...
JavaScript代码加载优化是提高网页性能的关键技术之一，尤其是在处理大量脚本或第三方追踪代码时。在给定的例子中，我们看到一种将统计代码分离并异步加载的方法，以避免阻塞页面渲染，同时确保统计数据的准确收集。...
而“h5动态注入js代码”是指在H5页面运行时，通过JavaScript程序动态地向页面中添加或修改JavaScript代码，以实现更灵活的功能扩展和页面交互。这种方式常见于响应式设计、数据可视化、用户行为追踪等多种场景。 一...
2. 示例代码或HTML文件：演示如何在实际项目中使用LAB.js来控制脚本加载顺序。 3. 使用文档或README文件：解释如何配置和使用LAB.js，包括API参考、最佳实践等。 4. 测试用例：可能包含测试脚本，用于验证LAB.js的...
对于直接在事件处理程序或URL主体中嵌入的JavaScript代码，它们的执行顺序与其他方式不同，不参与常规的脚本执行流程。 以一个示例来解释脚本执行顺序，我们可以考虑两个JavaScript文件（1.js和2.js）的加载。当这...
在探讨JavaScript代码在网页加载过程中的执行顺序时，我们首先需要了解JavaScript在HTML文档中的几种嵌入方式，以及它们在页面加载过程中的执行行为。 一、HTML中嵌入JavaScript的方法 1. 直接将JavaScript代码...