預先知識：
瀏覽器加載的時候是自上而下的，加載和渲染爲同步進行
加載不會阻塞下載，解析會阻塞下載
js解析的時候會阻塞其他的加載
一般瀏覽器會在後面解析js文件，因爲js中的代碼很有可能改變dom樹的結構
瀏覽器的加載一般順序爲：
- 將資源分類
- 安全策略檢查
- 資源優先級計算
- 根據優先級下載資源
資源分類：
- 主資源 html
- 圖片
- css
- js
- 字體
- ajax
- svg
- 引入的html資源
- 多媒體資源，視頻等
瀏覽器加載資源的順序：
- 最高級：html,css,font
- 然後：js，xhr
- 然後是多媒體：圖片-語音-視頻
- 最後：prefetch預加載的資源
根據實際的規則，瀏覽器會對加載的資源順序有所調整：
- 同步的xhr請求優先級最高
- 如果圖片的視圖在可見範圍之內，優先加載圖片
測試：
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="./index.css">
<script type="text/javascript"></script>
</head>
<body>
<embed height="100" width="100" src="./img/music/1.mp3"></embed>
<img src="./img/1.png">
<img src="./img/2.png">
<img src="./img/3.png">
<img src="./img/4.png">
<img src="./img/5.png">
<img src="./img/6.png">
<img src="./img/7.png">
<img src="./img/8.png">
<img src="./img/9.png">
<script type="text/javascript" src="./index.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
chrome瀏覽器中查看解析執行的順序：
雖然mp3文件放在了img的前面，但是解析的時候還是優先解析了圖片資源。此時的圖片在可視的視圖之內。
由此可見，瀏覽器解析資源的一般順序爲：
html → css → 可視化圖片 → js → 媒體 → ...
待續...