克军做了一系列测试：js和css的递次关联，给出了征象和结论，但未给出缘由。
JS 和 CSS 在页面中的位置，会影响其他资本（指 img 等非 js 和 css 资本）的加载递次，究其缘由，有三个值得注重的点：
- JS 有能够会修正 DOM.典范的，能够会有
document.write. 这意味着，在当前 JS 加载和实行完成前，后续一切资本的下载有多是没必要的。这是 JS 壅塞后续资本下载的根本缘由。 - JS 的实行有能够依靠最新款式。比方，能够会有
var width = $('#id').width(). 这意味着，JS 代码在实行前，浏览器必需保证在此 JS 之前的一切 css（不管外链照样内嵌）都已下载和剖析完成。这是 CSS 壅塞后续 JS 实行的根本缘由。 - 当代浏览器很智慧，会举行 prefetch 优化。机能是云云主要，当代浏览器在合作中，在 UI update 线程以外，还会开启另一个线程，对后续 JS 和 CSS 提早下载（注重，仅提早下载，并不实行）。有了 prefetch 优化，这意味着，在不存在任何壅塞的情况下，理论上 JS 和 CSS 的下载机遇都异常优先，和位置无关。
以上三点可简述为三条基本定律：
- 定律一：资本是不是下载依靠 JS 实行效果。
- 定律二：JS 实行依靠 CSS 最新衬着。
- 定律三：当代浏览器存在 prefetch 优化。
有了这三条定律，再来看克军的测试，就很清楚了：
a,b – head里涌现外联js，不管如何放，css文件都不能和body里的要求并行
依据定律一和定律三，能够晓得上面的结论不够准确。比方：
<head>
<link rel="stylesheet" href="mock.php?css1&sleep=2">
<script src="mock.php?js&sleep=3"></script>
<link rel="stylesheet" href="mock.php?css2&sleep=4">
</head>
<body>
<link rel="stylesheet" href="mock.php?css3&sleep=5">
<img src="test.gif">
</body>
在 Chrome 下的瀑布图是：
黄色条是 js 的，能够看出 img 的延时下载是由定律一决议的。
定律三则决议了一切 js/css 都是并行最先下载的。在 Firefox 10 下，prefetch 异常刁悍，对 img 也会预加载，瀑布图以下：
调解一下 sleep 时候，还能够观察到定律二的威力：
<head>
<link rel="stylesheet" href="mock.php?css1&sleep=3"> <!-- 修正 sleep 值，使其大于 js 的 -->
<script src="mock.php?js&sleep=2"></script>
<link rel="stylesheet" href="mock.php?css2&sleep=4">
</head>
<body>
<link rel="stylesheet" href="mock.php?css3&sleep=5">
<img src="test.gif">
</body>
瀑布图马上发生了变化：
由于定律一，决议 img 的下载在 js 实行后。又由于定律二，决议 js 的实行在第一个 css 后。因而末了在瀑布图上表现出来，就是 img 的下载在第一个 css 后。
再来看克军的第二个结论：
c – head里的内联js只需在一切外联css前面，css文件能够和body里的要求并行（图2）
d – head里的内联js只需在任一外联css背面，css文件就不能和body里的要求并行（图1）
这个是定律二的威力。结论 c 是准确的，由于没有 css 会影响 js 的实行。结论 d 则不够准确。img 等其他资本，会在 js 前面的 css 下载完成后，以及 js 实行后，马上最先下载。与头部中，js 位置以后的 css 没紧要。
克军的其他结论都是对的，不多说。
注重1：Firefox 10 的 prefetch 有点新鲜，偶然会对 img 举行 prefetch，偶然则不会。有兴致的能够进一步寻觅规律。
注重2：上面的三个定律，是黑盒猜想，有兴致的能够去浏览浏览器的源码，应当能找到更深条理的缘由。
注重3：本文没有斟酌 defer, async 属性的影响，这是另一个故事。
浏览器在迅速发展，许多总结，特别是书本上的，很难与时俱进。人人应当像克军进修，多测试，多发明，如许得来的学问，才不会过期。这篇博客的总结，也肯定在将来以至就在如今，已存在毛病。这些都无所谓，关键是要晓得测试的要领和剖析的思绪，有了“渔”，才更好地探乞降具有“鱼”。
转自 光阴如歌
