1、电脑浏览器渲染页面
我们都知道，无论是一个独立的静态网页还是一个系统软件，本质上都是一个html文档，那电脑浏览器渲染页面，实际上是在分析html文档，众所周知项目打包以后html，css和js都已经被压缩到一个index.html文档中，那样，html，css和js的3D渲染次序究竟是什么样的呢？
2、浏览器3D渲染次序
最先，电脑浏览器会选择分析html，形成DOM树，但在分析的过程当中一旦遇到css，会开始分析css形成CSSDOM树（DOM树和CSSDOM树3D渲染能够同步进行），随后假如当遇到JavaScript代码，那么他都会去实行JavaScript代码，需注意，电脑浏览器实行JavaScript代码时，会先把现阶段的CSSDOM分析进行，可是DMO树分析往往会终止，步骤便是（CSSDOM->JavaScript->DOM），当JavaScript实行进行以后才会重新去搭建DOM树，但DOM树和CSSDOM树都搭建完毕之后，便会合拼成3D渲染树，再通过3D渲染树Layout合理布局，最终开展界面的制作。
3、注意事项
所以从上面那个次序我们都知道一旦在3D渲染过程中出现JavaScript，那样实行JavaScript的优先要高于html，可是我们通常在JavaScript中进行一些DOM实际操作，因此如果把JavaScript放到前边得话，就会造成由于获得不上连接点而发生错误，例如举一个典型的例子
3.1直接用style和script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let text = document.getElementById('text')
console.log(text);
</script>
<style>
#text {
font-size: 20px;
color: brown;
}
</style>
<div>
<div id="text">123</div>
</div>
</body>
</html>
在一个html文档中，大家可以看到JavaScript代码放在了上面，然后就是css，最后才是div标识，而我JavaScript代码的操作便是去获取id为text的div标识，那样事实上由于浏览器渲染顺序，就会造成掌握到的节点为null
那么想要掌握到DOM连接点，那就需要将JavaScript的代码放进标签的下边，才能保证在DOM树形成然后去实行JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
#text {
font-size: 20px;
color: brown;
}
</style>
<div>
<div id="text">123</div>
</div>
<script>
let text = document.getElementById("text");
console.log(text);
</script>
</body>
</html>
此刻我们就可以掌握到id为text的div了
3.2导进的css和JavaScript
假如是根据link和script引进外部css和JavaScript，也需要注意引入的部位。