浏览器加载展示html的顺序
日期：2014-05-17 浏览次数：20729 次
浏览器加载显示html的顺序
其实浏览器加载显示html的顺序是按下面的顺序进行的：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
4、并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数。
如果你的网页比较大，希望部分内容先显示出来，粘住浏览者，那么你可以按照上面的规则合理的布局你的网页，达到预期的目的。
假如有下面的程序
另一篇文章的解释
关于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下载、解析、执行
其实浏览器加载显示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 class="page">
<ul class="tab">
<li id="tab_to_1" class="no"><a href="#" 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 class="page">
<ul class="tab">
<li id="tab_to_1" class="no"><a href="#" 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下载、解析、执行
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
