為了進行測試，我刻意將big.css(3.8MB)和big.js(8.1MB)檔案變大.控制台網路選擇了Regular 4G,開啟了Disable cache，並且js檔案和css檔案都在body標籤之後引入。
第一種情況:頁面中不引入big.js，只引入big.css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是呈现出来的文字</p>
</body>
<link rel="stylesheet" href="css/big.css">
</html>結果:此時頁面從一片空白到呈現出頁面中的文字總共耗時7.62s
截圖:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>我是呈现出来的文字</p>
</body>
<script src="js/big.js"></script>
<link rel="stylesheet" href="css/big.css">
</html>截圖：
因為單線程，以及html是按順序解析的
第一種因為你的css在前，所以要先下載，解析
第二種因為在後面，所以先看到了文字，才去下載解析js和css
這也是為什麼大家說要把css放在head中，js放在底部，我們希望使用者看到介面的時候是有樣式的，同時也不希望js的下載和執行阻塞使用者看到頁面的時間