suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript - Offensichtlich wird am Ende des Hauptteils ein zeitaufwändiges JS geschrieben. Warum wartet die Seite, bis das JS fast geladen ist, bevor sie gerendert wird?

Kürzlich habe ich über die Auswirkungen der Position von CSS und JS auf der Seite auf das Laden und die Leistung der Seite nachgedacht. Ich habe auch mehrere Demos geschrieben und einige Fragen gefunden, z. B. das Platzieren einiger zeitaufwändiger JS am Ende der Seite body, um zu verhindern, dass das Laden der Seite blockiert wird. Aber die Demo, die ich eingegeben habe, scheint nicht mit dem übereinzustimmen, was alle gesagt haben. Der spezifische Code lautet wie folgt: 

<!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>

Es liegt auf der Hand, dass zuerst 6 P-Elemente angezeigt werden und dann einige Sekunden gewartet werden sollte, bevor der Alarm (str) erfolgt. So läuft dieser Code in mehreren Browsern ab:
1 chrome Der Ladebalken dreht sich und dreht sich, dann erscheint eine Warnung, klicken Sie auf „OK“ und dann wird die Seite angezeigt sollte darin bestehen, zuerst die Seite und dann die Warnung zu rendern, denn wenn die Warnung angezeigt wird, ist das Element erschienen
Das habe ich versucht:

1. Onload-Methode zum Text hinzufügen: 

<!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>

Keine Änderung am Ergebnis;

2. Verwenden Sie die window.onload-Methode: 

<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>

Das Ergebnis ist das gleiche, es gibt keine Änderung;

3. Schreiben Sie das Skript als externen Link, und das Testergebnis ist immer noch dasselbe (ich habe es gestern Abend zu Hause versucht, und es scheint, dass die Seitenelemente zuerst gerendert werden und dann das JS geladen wird, aber es gibt keine Möglichkeit um es jetzt zu überprüfen.

Anhang: Warum habe ich das Gefühl, dass die Rechengeschwindigkeit verschiedener Browser 10 Sekunden dauert, aber nur 6 Sekunden? in Firefox verstehe ich es auch nicht


Das ist das erste Mal, dass ich eine Frage stelle. Ich hoffe, ihr könnt es auf die leichte Schulter nehmen. 0,0~ Vielen Dank im Voraus

学习ing学习ing2716 Tage vor819

Antworte allen(3)Ich werde antworten

  • PHP中文网

    PHP中文网2017-06-26 10:55:45

    楼上说的有道理，应该是由于for循环占用了CPU资源导致首屏加载变慢。
    即使在body底部的script标签也会拖慢首屏出来的速度，因为浏览器在最一开始就会请求它对应的js文件，而这，占用了有限的TCP链接数、带宽甚至运行它所需要的CPU。

    Antwort
    0
  • 迷茫

    迷茫2017-06-26 10:55:45

    script标签放在body的底部，是防止script标签阻塞其他页面资源文件的下载，加快页面相关资源的加载。
    但整个页面渲染，仍会被script标签终止，因此在你的例子中看到页面一直是空白，直到script脚本运算完成后，页面渲染完才能显示出来。

    在你给的例子中，如果想让页面先显示出来，然后再进行script脚本计算，可以使用setTimeout让脚本异步执行，如：

    setTimeout(function() {
  //需要执行将脚本...
}, 0);

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-06-26 10:55:45

    我猜这是因为这占用了太多 CPU 资源导致的，页面渲染也需要 CPU 资源

    如果把这个费时操作换成 IO 的，我觉得就会符合预期了

    PS：猜测，待空了试试

    Antwort
    0
  • StornierenAntwort