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)
某草草

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

Beliebte Tutorials
Mehr>
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!