关于页面的资源文件组织合理性探究

本文主要来自于kejun's Blog里面的js和css的顺序，个人做一些整理学习测试。

 

场景如下：

 

1、js和css都是外部资源：

 

 

//script在前
<script src="xxx.js"></script>
<link href="xxx.css" rel="stylesheet" type="text/css"/>

//link在后
<link href="xxx.css" rel="stylesheet" type="text/css"/>
<script src="xxx.js"></script>

• 无论在head里面的位置前后，css文件都不能和body里的请求并行
• body里dom渲染取决于head里的js执行

2、内联的js在css前面

<script type="text/javascript">
*******
</script>
<link type="text/css" href="****.css" rel="stylesheet"/>

 

• css文件可以和body里的请求并行

3、内联的js在css后面

 

<link type="text/css" href="****.css" rel="stylesheet"/>
<script type="text/javascript">
*******
</script>

•  css文件不能和body里的请求并行
•  要等js执行完

4、内联css在外联css后面

<link type="text/css" href="****.css" rel="stylesheet"/>
<style type="text/css">
  ********
</style>

•  内联的在外联文件加载完成后生效

5、内联css在外联css前面

<style type="text/css">
  ********
</style>
<link type="text/css" href="****.css" rel="stylesheet"/>

•  IE和FF下要等外联加载成功后生效，Safari|Chrome则是先生效，再加载外联

一些结论：

• 内联js要等到它前面所有外联的css文件加载完成后执行
• 外联js放在页面最后，高级浏览器会自动优化
• 内联长执行时间js，无论放在页面任何位置，都会影响整个页面的渲染