HTML加载顺序

从上到下顺序加载

从上到下顺序加载

从上到下顺序加载

 

JS的加载和执行会阻塞DOM树的解析和渲染

　　原因 : JS可能会修改DOM树的结构,所以会等执行完JS代码后才继续

　　改善方法 : 可以把js代码放到</body>前,这样先生成DOM文档,再加载运行js代码,不会因为阻塞而影响页面显示速度.

CSS加载不会阻塞DOM树的解析,但是会阻塞DOM树的渲染

　　原因 : CSS不会修改DOM树的结构,但会修改DOM元素的样式

CSS加载也会阻塞JS代码的执行

　　详细看 : https://www.cnblogs.com/chenjg/p/7126822.html

 示例

<html>
<head>
	<meta http-equiv="charset" content="utf-8">
	<script>
	//onload是在整个页面加载完毕后执行
	window.onload = function (){
		text.innerHTML=text.innerHTML+"->这是onload";
	}
	</script>
</head>
<body>
	<p id="item">原文</p>
	<script>
		//获取<p>元素, 放下边是因为如果放在<p>元素前,因为<p>的DOM对象还没加载,会获取不到<p>元素
		var text = document.getElementById("item");
		
		text.innerHTML=text.innerHTML+"->加载图片`前";
	</script>
	<img src="./aaa.jpg"></img>
	<script>
		text.innerHTML=text.innerHTML+"->加载图片_后";
	</script>
</body>
</html>
<style type="text/css">
	/*这段CSS执行后,才会继续执行下面的JS代码*/
	p {color: blue}
</style>
<script>
	text.innerHTML=text.innerHTML+"->颜色变红前";
</script>
<style type="text/css">
	/*放在最下边,所以最后执行*/
	p {color: red}
</style>

　　运行结果如下图:

文字描述一下加载顺序:

　　"原文"  -->  "->加载图片`前"  -->  图片被显示  -->  "->加载图片_后"  -->  文本变蓝色  -->  "->颜色变红前"  -->  文本变红色

可以自己复制上边的代码,打断点试试看是不是这个顺序.

 

posted @ 2019-05-05 19:47  Kaneha  阅读(833)  评论(0)  编辑  收藏  举报