javascript - 明明一個(gè)費(fèi)時(shí)js寫(xiě)在body結(jié)尾，為什么頁(yè)面要等到差不多js加載完才呈現(xiàn)？
問(wèn)題描述
最近在思考有關(guān)css和js在頁(yè)面中位置對(duì)頁(yè)面加載以及性能的影響，也寫(xiě)了幾個(gè)demo，發(fā)現(xiàn)了一些疑問(wèn),如把一些費(fèi)時(shí)的js放在body底部防止阻塞頁(yè)面的加載。而我敲的demo卻好像不符合大家一直所說(shuō)的。具體代碼如下：
<!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>
按理說(shuō)應(yīng)該是先呈現(xiàn)6個(gè)P元素，然后等若干秒再alert (str).可是結(jié)果卻不是這樣，下面是這段代碼在幾個(gè)瀏覽器中運(yùn)行的情況：1.chrome中是等加載條轉(zhuǎn)啊轉(zhuǎn)，然后alert，點(diǎn)擊確定后呈現(xiàn)頁(yè)面；2.ie 和 火狐中是等加載條轉(zhuǎn)啊轉(zhuǎn)，然后頁(yè)面和alert幾乎同時(shí)出現(xiàn)（應(yīng)該是先呈現(xiàn)頁(yè)面再alert,因?yàn)閍lert時(shí)候p元素已經(jīng)出現(xiàn)了）；
下面是我嘗試的方法：
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>
結(jié)果沒(méi)有任何變化；
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>
結(jié)果也是一樣，沒(méi)有任何變化；
3.將script寫(xiě)成外聯(lián)方式，測(cè)試的結(jié)果還是一樣（昨晚在家里試了一下，好像是先呈現(xiàn)頁(yè)面元素再加載js，不過(guò)現(xiàn)在也無(wú)從考證,不知道會(huì)不會(huì)是瀏覽器版本問(wèn)題）；附：怎么感覺(jué)不同瀏覽器運(yùn)算速度不一樣啊，5億次循環(huán)在谷歌中10秒鐘，火狐只花了6秒，也不是很理解
第一次來(lái)提問(wèn)，望各位大牛輕虐 0.0~ 在這里先謝謝了
問(wèn)題解答
回答1：樓上說(shuō)的有道理，應(yīng)該是由于for循環(huán)占用了CPU資源導(dǎo)致首屏加載變慢。即使在body底部的script標(biāo)簽也會(huì)拖慢首屏出來(lái)的速度，因?yàn)闉g覽器在最一開(kāi)始就會(huì)請(qǐng)求它對(duì)應(yīng)的js文件，而這，占用了有限的TCP鏈接數(shù)、帶寬甚至運(yùn)行它所需要的CPU。
回答2：script標(biāo)簽放在body的底部，是防止script標(biāo)簽阻塞其他頁(yè)面資源文件的下載，加快頁(yè)面相關(guān)資源的加載。但整個(gè)頁(yè)面渲染，仍會(huì)被script標(biāo)簽終止，因此在你的例子中看到頁(yè)面一直是空白，直到script腳本運(yùn)算完成后，頁(yè)面渲染完才能顯示出來(lái)。
在你給的例子中，如果想讓頁(yè)面先顯示出來(lái)，然后再進(jìn)行script腳本計(jì)算，可以使用setTimeout讓腳本異步執(zhí)行，如：
setTimeout(function() { //需要執(zhí)行將腳本...}, 0);回答3：
我猜這是因?yàn)檫@占用了太多 CPU 資源導(dǎo)致的，頁(yè)面渲染也需要 CPU 資源
如果把這個(gè)費(fèi)時(shí)操作換成 IO 的，我覺(jué)得就會(huì)符合預(yù)期了
PS：猜測(cè)，待空了試試
網(wǎng)公網(wǎng)安備