简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 明明一個費時js寫在body結尾，為什麼頁面要等到差不多js載入完才呈現？
学习ing
学习ing 2017-06-26 10:53:45
0
3
743

最近在思考有關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~ 在這裡先謝謝了

学习ing
学习ing

全部回覆(3)
Ty80
Ty802017-06-26 10:55:45 3樓

樓上說的有道理，應該是因為for循環佔用了CPU資源導致首屏載入變慢。
即使在body底部的script標籤也會拖慢首屏出來的速度，因為瀏覽器在最一開始就會請求它對應的js文件，而這，佔用了有限的TCP鏈接數、頻寬甚至運行它所需要的CPU。

點贊 +0
新增回覆
迷茫
迷茫2017-06-26 10:55:45 2樓

script標籤放在body的底部，是防止script標籤阻塞其他頁面資源檔案的下載，加快頁面相關資源的載入。
但整個頁面渲染，仍會被script標籤終止，因此在你的例子中看到頁面一直是空白，直到script腳本運算完成後，頁面渲染完才能顯示出來。

在你給的例子中，如果想讓頁面先顯示出來，然後再進行script腳本計算，可以使用setTimeout讓腳本異步執行，如：

setTimeout(function() {
  //需要执行将脚本...
}, 0);
點贊 +0
新增回覆
大家讲道理
大家讲道理2017-06-26 10:55:45 1樓

我猜這是因為這佔用了太多 CPU 資源導致的，頁面渲染也需要 CPU 資源

如果把這個費時操作換成 IO 的，我覺得就會符合預期了

PS：猜測，待空了試試

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！