javascript - 明明一個費時js寫在body結尾，為什么頁面要等到差不多js加載完才呈現？
問題描述
最近在思考有關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~ 在這里先謝謝了
問題解答
回答1：樓上說的有道理，應該是由于for循環占用了CPU資源導致首屏加載變慢。即使在body底部的script標簽也會拖慢首屏出來的速度，因為瀏覽器在最一開始就會請求它對應的js文件，而這，占用了有限的TCP鏈接數、帶寬甚至運行它所需要的CPU。
回答2：script標簽放在body的底部，是防止script標簽阻塞其他頁面資源文件的下載，加快頁面相關資源的加載。但整個頁面渲染，仍會被script標簽終止，因此在你的例子中看到頁面一直是空白，直到script腳本運算完成后，頁面渲染完才能顯示出來。
在你給的例子中，如果想讓頁面先顯示出來，然后再進行script腳本計算，可以使用setTimeout讓腳本異步執行，如：
setTimeout(function() { //需要執行將腳本...}, 0);回答3：
我猜這是因為這占用了太多 CPU 資源導致的，頁面渲染也需要 CPU 資源
如果把這個費時操作換成 IO 的，我覺得就會符合預期了
PS：猜測，待空了試試
網公網安備