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內的過程一樣。