首先，讓我們來看一段代碼：
<html>
<head>
<title>標題</title>
<link href="../css/css.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<div>
</div>
<p>
</p>
</body>
<script type="text/javascript" src="js/js.js"></script>
</html>
我們現在要在瀏覽器中顯示以上結構的HTML。
1.客戶端瀏覽器開始從用戶向服務器發出請求，服務器響應的將如上的HTML返回給請求的客戶端瀏覽器中。
2.加載從<html>標簽開始，并發現<head>標簽內有個外部樣式文件要加載
<link href="../css/css.css" rel="Stylesheet" type="text/css" />
3.這時客戶端瀏覽器又向服務器發出一個請求加載css.css文件，服務器響應。
4.此時客戶端瀏覽器繼續加載html文件里<body>里的標簽，在css.css文件加載完后，同時開始渲染頁面。
5.客戶端瀏覽器在body里的標簽中發現一個img標簽并且引用了服務器進而的一張名為test.jpg的圖片.客戶端瀏覽器又向服務器發出一次請求。而瀏覽器不會因為此時正在加載img標簽里的圖片而停止等待圖片加載完，瀏覽器繼續渲染還未完成的部分。
6.img標簽里的圖片加載完了，則要顯示出來，同時圖片會占有一定的面積，又會影響到后面的布局，瀏覽器不得不又回來重新渲染一次這部分。
7.把body里的標簽加載及渲染完后，瀏覽器又發現了一段代碼：
<script type="text/javascript" src="js/js.js"></script>
8.瀏覽器又立刻向服務器發出請求加載js.js文件，服務器響應。
9.瀏覽器又在js.js文件中發現了一段代碼，是干嘛干嘛的，比如隱藏某元素，此時瀏覽器又要重新去渲染被隱藏的部分。
10.最后到瀏覽器發現了</html>為止。
這是最合理的渲染步驟，如果把js文件放在head標簽里，這個js文件加載時間又過長，那會影響用戶體驗，一直在等待瀏覽器呈現內容。
將css文件首先加載，也就是html的內容出來一個，那就樣式給它加上，先渲染出來，而不會讓用戶處于干等的狀態。
如果將css文件放在最后，那么首先渲染出的內容則有可能雜亂無章，影響美觀。
