js、css引用文件的下载方式

js、css引用文件的下载方式

一、测试（chrome）：
1、直接使用<script...>、<link...>标签来混合引入脚本文件和css文件，

<script async src="1.js"></script>
<link rel="stylesheet" href="a.css">
<script async src="2.js"></script>
<link rel="stylesheet" href="b.css">
<script async src="3.js"></script>

所有文件异步并行下载，asyn属性的有无不影响下载。html下载完成后（css、js还未下载）即触发DOMContentLoaded事件。

2、通过如下document.write的方式加入脚本，并与<link...>标签混杂：

<script>document.write('<script src="1.js"></scr'+'ipt>');</script>
<link rel="stylesheet" href="a.css">
<script>document.write('<script src="2.js"></scr'+'ipt>');</script>
<link rel="stylesheet" href="b.css">
<script>document.write('<script src="3.js"></scr'+'ipt>');</script>

则：A、首先第一个css文件之前的js文件与所有的css文件并行下载。B、在全部css文件下载完成之后，第一个css文件之后的所有js文件串行下载，所有head中的css、js下载完毕后触发DOMContentLoaded事件。

即a.css、b.css、1.js并行下载，而2.js、3.js在所有css文件下载完毕之后串行下载。

3、通过如下document.write的方式加入脚本，且script加上async属性，并与<link...>标签混杂：

<script>document.write('<script async src="1.js"></scr'+'ipt>');</script>
<link rel="stylesheet" href="a.css">
<script>document.write('<script async src="2.js"></scr'+'ipt>');</script>
<link rel="stylesheet" href="b.css">
<script>document.write('<script async src="3.js"></scr'+'ipt>');</script>

则：A、首先第一个css文件之前的js文件与所有的css文件并行下载，css全部下载完毕后触发DOMContentLoaded事件。B、在css文件全部下载完成之后，第一个css文件之后所有js文件并行下载。

即a.css、b.css、1.js并行下载，而2.js、3.js在所有css文件下载完毕之后并行下载（异步）。

4、通过如下appendChild的方式加入脚本，并与<link...>标签混杂：

<script type="text/javascript">
function _appendJs(v) {
var gumAppscript = document.createElement("script");
gumAppscript.src = v + ".js";
document.head.appendChild(gumAppscript);
}
</script>
 
<script>_appendJs(1)</script>
<link rel="stylesheet" rel="stylesheet" href="a.css">
<script>_appendJs(2)</script>
<link rel="stylesheet" rel="stylesheet" href="b.css">
<script>_appendJs(3)</script>

则：下载过程与上述第3种基本一样，即appendChild添加script默认为async下载。

5、上述下载过程，在head内与在body内的过程一样（执行过程另论）。

二、推测：
1、一旦有css文件引用开始后，后续的document.write添加script变成串行下载。
2、DOMContentLoaded事件触发时机，第1种方式最快，第3、4种方法次之，第2种最慢。
3、appendChild添加script标签，与document.write添加async的script，下载基本一致。
4、就文件下载过程而言，在head内与在body内的过程一样。