从上到下顺序加载
从上到下顺序加载
从上到下顺序加载
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>
运行结果如下图:
文字描述一下加载顺序:
"原文" --> "->加载图片`前" --> 图片被显示 --> "->加载图片_后" --> 文本变蓝色 --> "->颜色变红前" --> 文本变红色
可以自己复制上边的代码,打断点试试看是不是这个顺序.