资源文件加载的一些记录我们都知道JS会阻塞DOM树的解析和渲染，所以JS文件一般都放在</body>之前的位置，保证DO

先从JS加载说起

我们都知道JS会阻塞DOM树的解析和渲染，所以JS文件一般都放在</body>之前的位置，保证DOM树的解析和渲染。

再谈CSS加载

CSS解析成Style Rules和HTML解析成DOM Tree是两个分开的过程，所以CSS不会阻塞DOM树的解析。但是渲染时需要合并Style Rules和DOM Tree，所以会阻塞DOM树的渲染。

CSS对JS的影响

CSS会阻塞同步的JS。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        console.log(`before css load`);
    </script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <div id="target">target</div>
    <script type="text/javascript" src="./index.js"></script>
</body>

</html>

index.js

console.log('css loaded')

改变JS的加载方式

<script type="text/javascript" defer src="./index.js">

异步加载的JS在DOM树解析完成后会执行，CSS不能阻塞。

同步和异步同时存在

<script type="text/javascript" src="./main.js">
<script type="text/javascript" defer src="./index.js">

所有的JS都将被阻塞

异步JS的问题

多个异步的文件，谁先加载完谁后加载完没有一定的顺序。所以当有依赖的时候可能会发生错误。