搜索：
非阻塞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
分享到：
相关推荐
主要介绍了关于html，css，js三者的加载顺序问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
本文主要基于向HTML页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的...
jQuery $(document).ready()执行顺序： 当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。...1.加载顺序：引入标记[removed]的出现顺序
1．本书1~21章所附代码的运行环境 操作系统：Windows 2003、Windows XP Professional，或者Windows 2000 开发环境：UltraEdit12.10a、eclipse-jee-europa Web浏览器：Microsoft Internet Explorer 6.0及以上版本 ...
今天的任务是把asp.net ajax中客户端页面生命周期那一章研究完。然而，因为这一章的内容使我产生了一些迷惑。这些疑惑在书中都没有只字提及。 一、html页面的详细加载过程是什么呢？页面元素在加载时的优先级是什么...
浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript Defer属性标记 defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档...
直接在Javascript代码放在标记对[removed]和[removed]之间2.由[removed]标记的src属性制定外部的js文件3.放在事件处理程序中，比如：点击我</p>4.作为URL的主体，这个URL使用特殊的Javascript：协议，比如：点击我...
Android平台提前注入5+ API，支持在plusready事件前调用 ...这样导致5+ API生效时间比较延后，在html中引用js执行之后才能调用5+ API，通常采用以下代码调用5+ API： document.addEventListener('plusready'
用于将封装的HTML代码块导入当前页面，只需要引入该js文件，即可轻松无缝插入代码块，和在一个页面写代码的效果一样，需要注意的是，因为加载顺序的问题，使用该js文件需要先引入jQuery。
把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就是...
Javascript是执行顺序是至上而下的，除非你特别说明, Javascript代码不会等到页面加载完毕后才执行。比如一个网页里含有以下HTML代码： 代码如下:”ele”>welcome to www.jb51.net</div>如果你在这行HTML代码前，...
超实用的jQuery代码段精选近350个jQuery代码段，涵盖页面开发中绝大多数要点、技巧与方法，堪称史上最实用的jQuery代码参考书，可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
模块名称就是文件的名称, 多个模块也可以写在一个js文件中（例如最后压缩成一个js文件也可以，不需要关心顺序）。配置修改加载目录: define.config.findPath = './js/'; // 默认为当前页面所在目录(./)开启调试...
在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中，我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况...我们使用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
我们在网站上放置广告，最简单的方法就是把JS代码，插入指定的位置，这样带了后果就是，页面按照顺序加载，偶尔一条广告代码卡住，整个页面都会卡住，给用户带来的体验是极差的。 那么怎么解决这种问题呢？先说...
当标签中包含这个属性时会立即下载脚本（外部文件），只对外部脚本文件有效，下载的同时可以进行页面的其他操作，下载完成后停止解析并执行，执行后继续进行解析，但不能保证执行顺序。 [removed][removed] ...
一个开源的Visual Studio扩展，用于清理和简化C#，C++，F#，VB，PHP，PowerShell，R，JSON，XAML，XML，ASP，HTML，CSS，LESS，SCSS，JavaScript和TypeScript编码 主要包含四大功能： 1.代码清理 将随机空格清理为...