我们知道，同一个HTML文件，各浏览器所呈现的内容最终是一致的，但是浏览器对HTML文档的渲染顺序是否相同呢？如CSS，JS文件在head，body中，各浏览器究竟是按照怎样的顺序就行渲染的呢？
（此文以Chrome，Firefox，IE为例）

前提，CSS，JS文件都较大，在低网速下测试，可以观察到不同浏览器的行为，其中在CSS中规定h1的字体颜色为红色。

解析：浏览器理解下载到的文件里的字符串。
渲染：讲节点描绘在屏幕上（DOM树里）。

CSS在head中，JS在body中

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>hello html</h1>
    <script src="main.js"></script>
</body>
</html>

Chrome

CSS与JS同时下载，CSS下载完成后，页面中h1内容显示为红色，会有等待过程。

Firefox

CSS与JS同时下载，CSS下载完成后，页面中h1内容显示为红色，会有等待过程。

IE

CSS与JS不同时下载，CSS下载完成后，页面中h1内容显示为红色，会有等待过程。

JS在head中，CSS在body中

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <script src="main.js"></script>
</head>
<body>
    <h1>hello html</h1>
    <link rel="stylesheet" href="style.css">
</body>
</html>

Chrome

与CSS在head中行为一致，即等待CSS下载完成，再展示h1标签内容。

Firefox

先渲染HTML标签，展示为黑色，待CSS下载完成，再展示h1为红色，会有颜色的“跳动”，即flash of unstyled content，简称FOUC。

IE

先渲染html标签，展示为黑色，待CSS下载完成，再展示h1为红色，会有颜色的“跳动”，也会有FOUC的现象。

另外我们发现，不论JS在head中还是body中，JS 不会阻塞它前面的标签的渲染，但如果JS在CSS文件之前，那么JS会阻塞CSS文件。

若干个CSS可以同时进行预加载，以节约下载时间，一个域名同一时间最多请求4个css链接（IE）、20个（Chrome）、10个（其他）

总结

Chrome中，CSS与JS同时下载，不论CSS是在head，或者是body中，（前提是body中CSS文件不被JS阻塞，否则会先渲染HTML的标签，待JS，CSS下载完，再展示HTML标签）Chrome会有白屏（等待下载）过程，在网速较快时基本感觉不到。

Firefox中，CSS与JS同时下载，根据CSS所在的位置，按照顺序下载展示，所谓的“遇神杀神，遇佛杀佛”型，CSS在head中，就等CSS文件下载完成在展示html标签，CSS在body中，先渲染HTML标签，等CSS下载完成，再展示标签的正确样式

IE，同上，但CSS与JS不同时下载，“遇神杀神，遇佛杀佛”型，CSS在head中，就等CSS文件下载完成再展示html标签，CSS在body中，先渲染HTML标签，等CSS下载完成，再展示标签的正确样式。

为什么一般CSS写在head中，而JS写在body中呢？

从上述我们可以看到，CSS会阻塞渲染，Chrome中CSS在加载完成之前不会展示页面内容，为了减少页面的不一致性，防止出现FOUC，即页面“闪烁”的情况，CSS一般写入head中。
JS也会阻塞渲染，如果JS写入head中，可能会影响HTML标签的显示（这个问题可以通过修改JS解决，目前暂不考虑），同时也为了减少页面的加载时间，优先展示页面样式，其次，JS本身不太影响用户体验，页面通常加载时间较短，用户暂时不会有交互行为，因此JS一般写入body中。