`

浏览器加载显示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 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下载、解析、执行完毕。
关于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
分享到：
| div+ajax实现类似iframe功能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本文主要基于向HTML页面引入JavaScript的几种方式，分析HTML中JavaScript脚本的执行顺序问题，通过本文给大家分享浏览器执行JavaScript脚本加载与代码执行顺序，对浏览器执行javascript及执行顺序相关知识感兴趣的...

    讨论html与javascript在浏览器中的加载顺序问题

    主要是对html与javascript在浏览器中的加载顺序问题进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助

    静态HTML页面加载和解析

    今天给大家分享一篇文章，关于静态HTML页面加载和解析的相关显示流程的。浏览器加载和渲染html的顺序。

    IE11浏览器

    来自微软官方的IE11安装包，安装过程...IE11也是首款能够支持W3C资源优先级规范的浏览，这一功能可以正确区分网页的优先顺序，从而减少网页的加载时间，支持HTML5链接预先同步和预计，可以提前预测用户要浏览的内容。

    浏览器加载、渲染和解析过程黑箱简析

    在 IE8, Safari, Chrome 等浏览器下也类似。 Firefox 对下载顺序做了优化：Firefox 会将 js, css 提前下载，而将图片等资源延迟到后面下载。 对于渲染，利用 Fiddler 将网速调慢，可以看到 css 下载后会马上渲染到...

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性，从字面上来看，二者的功能很好理解，分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探

    HTML页面加载和解析流程详细介绍

    浏览器加载和渲染html的顺序 1. IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。 2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载...

    压测性能测试培训（2022-02-16 性能测试培训） 压缩文件包含 【JMeter基础培训、WEB网站优化、性能测试知识分享】

    浏览器加载和渲染顺序 HTML页面加载和解析流程 减少 HTTP 的请求数 添加Cache缓存 减少域名查询 网站图片的合并压缩 压缩css和js代码 去除页面中没有用到的CSS 优化页面元素加载顺序 避免使用css表达式 CSS和JS在...

    浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中，我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况...我们使用《浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序

    javascript按顺序加载运行js方法

    defer是html4.0中定义的，该属性使得浏览器能延迟脚本的执行，等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。 也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致. 但是defer...

    超级关闭：针对标签上瘾者的浏览器加载项，可根据域名或关键字关闭标签

    并且请碰碰这个拉取请求以对其进行修复： : 用法安装后，此图标将在您的浏览器中显示为按钮： 按下它，将出现一个输入字段。 在其中输入关键字或域名，然后按Enter键，瞧！图标用于徽标的图标和工具栏按钮是Google...

    payload:浏览器的一个更简单，更小的模块加载器

    浏览器的一个更简单，更小的模块加载器。 不用担心您JavaScript文件包含在其中的顺序。 只需声明每个模块需要哪些依赖关系，并且在加载所有依赖关系后，Payload就会初始化该模块。 还有另一个模块加载器？ 是的，...

    兼容FF，IE等浏览器的弹出层教程

    13.自定义窗口内容，支持HTML格式和jquery对象格式，不支持ajax动态加载内容 14.点击遮罩层触发事件，一般用于点击遮罩层时关闭窗体 15.窗口关闭时触发事件，用于窗体关闭后，对页面其他功能进行的操作 16.窗体显示...

    JavaScript无阻塞加载和defer、async详解

    把js放在head里，浏览器是怎么去执行它的呢，是按顺序加载还是并行加载呢？在旧的浏览器下，都是按照先后顺序来加载的，这就保证了加载的js依赖不会发生问题。但是少部分新的浏览器已经开始允许并行加载js了，也就是...

    JavaScript完全自学宝典 源代码

    7.4.html 检测onkeydown事件与onkeypress事件执行的先后顺序。 7.5.html 窗口离开时提示。 7.6.html 防止onresize事件重复执行。 7.7.html onerror事件相关处理。 7.8.html onsubmit事件使用...

    40道Vue常见面试题，内含详细讲解

    本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理...前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； SEO

    30道Vue常见面试题，内含详细讲解

    本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理...前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理； SEO

Magicbox
Global site tag (gtag.js) - Google Analytics