浏览器加载显示html的顺序
其实浏览器加载显示html的顺序是按下面的顺序进行的：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
如果你的网页比较大，希望部分内容先显示出来，粘住浏览者，那么你可以按照上面的规则合理的布局你的网页，达到预期的目的。
假如有下面的程序
<%@ page language="java" contentType="text/html; charset=Shift_JIS" pageEncoding="Shift_JIS"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>Insert title here</title><script type="text/javascript">//shows();shows();//这是下面一个子页面的js代码 </script>//如果上端js代码放在这。。会报错，提示找不到shows函数、、</head><body><div onclick="tab('tab',2,1)">CUSTOMIZE</a></li><li id="tab_to_2"><a href="#" onclick="tab('tab',2,2)">SECURITY</a></li></ul></div><div><a href="#" onclick="shows()">CLICK</a></div><div><html><head><meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><title>Insert title here</title><script type="text/javascript">function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i){ document.getElementById(a+"_mo_"+i).style.display = "block"; document.getElementById(a+"_show_"+i).style.display = "block"; document.getElementById(a+"_to_"+i).className = "no"; } else{ document.getElementById(a+"_mo_"+i).style.display = "none"; document.getElementById(a+"_show_"+i).style.display = "none"; document.getElementById(a+"_to_"+i).className = "q"; } } }function shows(){alert("1");}</script><style type="text/css">*{ padding:0px; margin:0px;}body{ text-align:center;font-size:12px;}.page{ width:600px; margin:10px auto; text-align:left; }.tab_mo{ border:1px solid #ccc; border-top:none; padding:10px;background-color:#FFF;color:#fff;}.showDiv{background:#224499;padding:0px;color:#fff;margin:0px;}.tab{ border-bottom:1px solid #ccc; background-color:#fff; list-style:none; padding:4px 5px 3px 5px; }.tab li{ display:inline; font-size:12px; }.tab li a{ padding:3px 4px; border:1px solid #ccc; color:#888; border-bottom:none; text-decoration:none;background:#f7f7f7} .tab li.no a{ background:#224499;border-bottom:none; position:relative; top:1px; color:#fff; font-weight:bold}</style></head><body><div onclick="tab('tab',2,1)">CUSTOMIZE</a></li><li id="tab_to_2"><a href="#" onclick="tab('tab',2,2)">SECURITY</a></li></ul></body></html></div><script type="text/javascript">//shows();shows(); </script>//如果放在这，所有js代码都加载完毕，就可以访问</body></html>另一篇文章的解释
关于html的加载：
总体上，html的是按从上到下的顺序边加载边解析，边生成dom对象，至于在html中夹杂的：
document.write("xxxx");
<script type="text/javascript" src="aaa.js"></script>
之类的东西，它们的顺序是怎样的呢？还是一样，如果在解析html时，遇到这些东西就会停止解析，转而执行这些生成语句，如果中间插入外部链接，就转而解析、执行外部链接对应的js。对于以下语句对于不同浏览器存在不同的结果：
<script type="text/javascript" src="aaa.js"></script>
在ie中。不会等待aaa.js下载并解析完的，会创建另一线程搞定它，而主线程则越过去。但在ff中。则会等待，直到aaa.js下载、解析、执行完毕。
关于javascript的执行情况，请见本文后面所附的参考资料，里面有详尽的讨论。
关于html中页面的生命周期：
最重要的两个事件就是onLoad、onUnLoad。onLoad在页面加载完毕的时候触发。onUnLoad在页面的dom销毁完后触发。不过，onLoad有点特殊状况，也请参见本文后面所附的参考资料。一定要引起注意。
我看了几个站点的html源码，发现如下代码：
<div class="ad1602"><script src="/ggjs/view1602_w.js"></script></div>
这是某网站在页面中显示广告的代码，国内网站，显示广告一般都是用iframe来引入第三方页面，这儿却是直接用javascript段来生成。后来，我又看了163博客生成的html代码，超变态啊。整个html代码只有一个架子，所有页面的生成都是通过js。我看到它的页面后面引入了几个js文件，最后在页面最后还有一个initAll函数的调用。我没有去仔细研究它的js代码，我怀疑它把所有表现层的功能全面放到客户端的js文件中去了。服务器端仅仅是很少的页面架子和许多的webservices。真是叹为观止啊。
http://www.cnblogs.com/beyondstorm/archive/2008/09/17/1292940.html