简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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?
学习ing
学习ing 2017-06-26 10:53:45
0
3
783

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
学习ing

Antworte allen(3)
Ty80
Ty802017-06-26 10:55:45 3 Etage

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

Wie +0
Antwort hinzufügen
迷茫
迷茫2017-06-26 10:55:45 2 Etage

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

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

setTimeout(function() {
  //需要执行将脚本...
}, 0);
Wie +0
Antwort hinzufügen
大家讲道理
大家讲道理2017-06-26 10:55:45 1 Etage

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

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

PS：猜测，待空了试试

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！