1. head里的顺序如下,考虑会对请求有何影响:
a. 外部js在css前面
<script src="1.js"></script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s">
b. 外部js在css后面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s"> <script src="1.js"></script>
c. 内部js在css前面
<script> // do something </script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s">
d. 内部js在css后面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s"> <script> // do something </script>
e. 内联css在外联css前面
<style> body { background:red; } </style> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s">
f. 内联css在外联css后面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <style> body { background:red; } </style>
结果:
a,b – head里出现外联js,无论如何放,css文件都不能和body里的请求并行。补充:body里dom渲染取决于head里的js执行完。 (图1)
c – head里的内联js只要在所有外联css前面,css文件可以和body里的请求并行(图2)
d – head里的内联js只要在任一外联css后面,css文件就不能和body里的请求并行。补充:原因也是要等js执行完(图1)
e – firefox/ie下,要等1.css加载完生效。safari/chrome下,则先生效,再加载1.css
f – 等1.css加载完生效
![](http://www.pigzz.com/uploads/allimg/120217/2203103G9-0.png)