简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript – Probleme beim Blockieren der Seitenwiedergabe, wenn CSS und JS geladen werden
曾经蜡笔没有小新
曾经蜡笔没有小新 2017-05-18 10:58:43
0
1
600

Zum Testen habe ich die Dateien big.css (3,8 MB) und big.js (8,1 MB) absichtlich größer gemacht. Das Konsolennetzwerk hat „Regular 4G“ ausgewählt, „Cache deaktivieren“ aktiviert und sowohl js-Dateien als auch CSS-Dateien befanden sich im Body-Tag . später eingeführt.

Die erste Situation: big.js wird nicht in die Seite eingeführt, nur big.css wird eingeführt:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
      <p>我是呈现出来的文字</p>
</body>
<link rel="stylesheet" href="css/big.css">
</html>

Ergebnis: Zu diesem Zeitpunkt dauerte es insgesamt 7,62 Sekunden, bis die leere Seite zum Text auf der Seite wechselte.
Screenshot:

Zweiter Fall: Die Seite führt gleichzeitig big.css und big.js ein und fügt big.css nach big.js ein: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
      <p>我是呈现出来的文字</p>
</body>
<script src="js/big.js"></script>
<link rel="stylesheet" href="css/big.css">
</html>

Ergebnis: Es dauert fast keine Zeit, bis die leere Seite zum gerenderten Text auf der Seite wechselt, was bedeutet, dass der Text sofort gerendert wird, selbst wenn CSS und JS zu diesem Zeitpunkt noch geladen werden.
Screenshot:

Frage: Warum blockiert das Laden von CSS im ersten Fall das Rendern der Seite so lange, während es im zweiten Fall fast keine Blockierung gibt?

曾经蜡笔没有小新
曾经蜡笔没有小新

Antworte allen(1)
某草草
某草草2017-05-18 11:00:43 1 Etage

因为单线程，以及html是按顺序解析的
第一种因为你的css在前，所以要先下载，解析
第二种因为在后面，所以先看到了文字，才去下载解析js和css
这也是为什么大家说要把css放在head中，js放在底部，我们希望用户看到界面的时候是有样式的，同时也不希望js的下载和执行阻塞用户看到页面的时间

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！