最近在思考有關css和js在頁面中位置對頁面加載以及性能的影響，也寫了幾個demo，發現了一些疑問,如把一些費時的js放在body底部防止阻塞頁面的加載。而我敲的demo卻好像不符合大家一直說的話。具體程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
console.time("t1");
var str =0;
for(var i = 0;i<500000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
</script>
</body>
</html>照理說應該是先呈現6個P元素，然後等若干秒再alert (str).可是結果卻不是這樣，下面是這段程式碼在幾個瀏覽器中運行的情況：
1. chrome中是等加載條轉啊轉，然後alert，點擊確定後呈現頁面；
2.ie 和火狐中是等加載條轉啊轉，然後頁面和alert幾乎同時出現（應該是先呈現頁面再alert,因為alert時候p元素已經出現了）;
下面是我嘗試的方法：
1.為body加onload方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload = "fn()">
<p>我是第1行</p>
<p>我是第2行</p>
<p>我是第3行</p>
<p>我是第4行</p>
<p>我是第5行</p>
<p>我是第6行</p>
<script>
function fn(){
console.time("t1");
var str =0;
for(var i = 0;i<5000000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
}
</script>
</body>
</html>結果沒有任何改變；
2.用window.onload方法：
<script>
function fn(){
console.time("t1");
var str =0;
for(var i = 0;i<500000000;i ++){
str +=i;
}
console.timeEnd("t1");
alert(str);
}
window.onload = fn;
</script>結果也是一樣，沒有任何改變；
3.將script寫成外聯方式，測試的結果還是一樣（昨晚在家裡試了一下，好像是先呈現頁面元素再加載js，不過現在也無從考證,不知道會不會是瀏覽器版本問題）；
附：怎麼感覺不同瀏覽器運算速度不一樣啊，5億次循環在谷歌中10秒鐘，火狐只花了6秒，也不是很理解
第一次來提問，望各位大牛輕虐 0.0~ 在這裡先謝謝了
樓上說的有道理，應該是因為for循環佔用了CPU資源導致首屏載入變慢。
即使在body底部的script標籤也會拖慢首屏出來的速度，因為瀏覽器在最一開始就會請求它對應的js文件，而這，佔用了有限的TCP鏈接數、頻寬甚至運行它所需要的CPU。
script標籤放在body的底部，是防止script標籤阻塞其他頁面資源檔案的下載，加快頁面相關資源的載入。
但整個頁面渲染，仍會被script標籤終止，因此在你的例子中看到頁面一直是空白，直到script腳本運算完成後，頁面渲染完才能顯示出來。
在你給的例子中，如果想讓頁面先顯示出來，然後再進行script腳本計算，可以使用setTimeout讓腳本異步執行，如：
我猜這是因為這佔用了太多 CPU 資源導致的，頁面渲染也需要 CPU 資源
如果把這個費時操作換成 IO 的，我覺得就會符合預期了
PS：猜測，待空了試試