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

时间:2022-12-17 22:13:59

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内的过程一样。