Question

我遇到的这个问题与我以前所知的相矛盾：

在第1段呈现在页面上之前，是否必须下载和解析style2.css？

<head>
    <link href="style1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="style2.css" rel="stylesheet">
</body>

答案：是的

我认为html页面被视为一个流，并且每个已解析的元素都会立即显示，并且某些元素在显示时移动（或更改样式）的原因是css文件在浏览器上显示后会被下载。那不是真的吗？

因此，如果下载每个css文件需要30秒，那么在这段时间内我们会看到段落吗？或者我们必须等待更长时间（30或60秒）才能看到它们

Answer 1

测试这个的一个简单方法是使用像PHP这样的服务器端语言生成CSS文件，并在CSS文件中放置一个sleep命令。

这样它会暂停文件的输出，直到sleep命令完成，然后完成文件下载..

至于你的问题，简单的style1.css将在页面加载之前准备好（因此它在头部）......在渲染正文之前，头部将加载/完成。

当页面加载时，它将加载仅应用了style1.css样式...一旦页面呈现，它将开始加载style2.css ..一旦完成，它将把这些样式应用于你的页面。导致页面更新/刷新。

这或多或少与通过ajax或其他东西动态添加CSS相同。

没有CSS的页面仍会呈现，只是它将使用每个元素的默认样式进行渲染...

这种影响改变的唯一方法是，例如，如果你在styles.css和style1.css之间共享一个元素，则应用display：none;或者其他一些可见的控制方法，style2.css会显示/反转，突然之间元素就会显示出来。

另外......你为什么要在文件的最后/身体中使用css？你想要任何想要的效果吗？

通过PHP生成大型CSS文件

header( 'Content-type: text/css; charset=utf-8');
echo "/* FILE 1: Useless css comment */";
for( $i = 0 ; $i < 10000 ; $i++ ) {
    echo ".genEleme{$i} {width:{$i}px; height:{$i}px; background-color:#00aa00;} \r\n";
}
//Either use something like put contents or simply copy and paste from browser
// Seems this works out to 7mb give or take a little

示例输出http://jsfiddle.net/hxdsskvs/1/

PHP脚本 - 实时演示 - 限制速率/实时输出

<?php
// SCRIPT VARIABLES - These you can adjust 
$iDownloadRate = 1024; // Per Second

// ----------------------------------------------------------------------
//    ANYTHING BELOW THIS LINE IS YOUR OWN DOING - STAY ABOVE IN DOUBT
// ----------------------------------------------------------------------
// LETS SET A BUNCH OF HEADERS (Cache, Control, Chunked, Stay Awake)
    header('Cache-control: private');
    header('Cache-Control: no-cache, must-revalidate');
    header('Pragma: no-cache');
    header('Content-Encoding: chunked', true);
    header('Connection: Keep-Alive', true);
// PHP SETTINGS (Timeout, Buffering)
    ini_set('max_execution_time', 60);
    ini_set('output_buffering', false);
    ini_set('implicit_flush', true);

// SEND ANY EXISTING OUTPUT BUFFERS TO BROWSER (Empty & End) 
    while (@ob_end_flush());    

// ARRAY TO STORE OUR OUTPUT DATA (To access its size for the Content-Length)
    $aOutput = array();

// GENERATE CSS FILES else GENERATE HTML INDEX FILE
    if (isset($_REQUEST['cssfile'])) {
        header( 'Content-type: text/css; charset=utf-8');
        $sTmp  = "body,html{width:100%; height:100%;} \r\n";

        if ($_REQUEST['cssfile']==="header") {      // CSS FOR HEADER / PAGE LOADING STYLE
            $sTmp .= ".pLoading {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 20px; color:#000;} \r\n";
            $sTmp .= ".pBody1 {display:none;} \r\n";
            $sTmp .= ".pBody2 {display:none;} \r\n";
            $sTmp .= ".pComplete {display:none;} \r\n";
        }
        if ($_REQUEST['cssfile']==="body") {        // CSS FOR HEADER / PAGE LOADING STYLE
            $sTmp .= ".pLoading {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 40px; color:#333;} \r\n";
        }
        if ($_REQUEST['cssfile']==="body1") {       // CSS FOR HEADER / PAGE LOADING STYLE
            $sTmp .= ".pLoading {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 60px; color:#666;} \r\n";
            $sTmp .= ".pBody1 {display:block;} \r\n";
        }
        if ($_REQUEST['cssfile']==="body2") {       // CSS FOR HEADER / PAGE LOADING STYLE
            $sTmp .= ".pLoading {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 80px; color:#999;} \r\n";
            $sTmp .= ".pBody2 {display:block;} \r\n";
        }
        if ($_REQUEST['cssfile']==="footer") {
            $sTmp .= ".pLoading {display:none;} \r\n";
            $sTmp .= ".pComplete {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 0px; color:#aaa; text-align:center;} \r\n";
        }
        if ($_REQUEST['cssfile']==="footerdummy") {
            for( $i = 0 ; $i < 100; $i++ ) {
                $sTmp .= ".emljunk{$i} {width:{$i}px; height:{$i}px;} \r\n";
            }
            $sTmp .= ".pLoading {display:none;} \r\n";
            $sTmp .= ".pComplete {font-size:2em; font-weight:bold; display:inline-block; margin:10px 0px 0px 0px; color:#aaa; text-align:center;} \r\n";
        }

        $aOutput[] = $sTmp;
    } else {
        header( 'Content-type: text/html; charset=utf-8');
        // HTML HEADER SECTION
        $sTmp = "";
        $sTmp .= "<html><head>";
            $sTmp .= "<link href='?cssfile=header' rel='stylesheet'>";
        $sTmp .= "</head>";
        $aOutput[] = $sTmp;


        // HTML BODY SECTION
        $sTmp = "";
        $sTmp .= "<body>";
            $sTmp .= "<p class='pLoading'>The page is currently loading, Please Wait</p>";
            $sTmp .= "<p class='pBody'>";
                for( $i = 0 ; $i < 5; $i++ ) {
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><br />";
                }
            $sTmp .= "</p>";
            $sTmp .= "<link href='?cssfile=body' rel='stylesheet'>";
            $sTmp .= "<p class='pBody1'>";
                for( $i = 0 ; $i < 5; $i++ ) {
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><br />";
                }
            $sTmp .= "</p>";
            $sTmp .= "<link href='?cssfile=body1' rel='stylesheet'>";
            $sTmp .= "<p class='pBody2'>";
                for( $i = 0 ; $i < 5; $i++ ) {
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u>";
                    $sTmp .= "<b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><b>{$i}</b><i>{$i}</i><u>{$i}</u><br />";
                }
            $sTmp .= "</p>";
            $sTmp .= "<link href='?cssfile=body2' rel='stylesheet'>";
            $sTmp .= "<p class='pComplete'>The page has finished loading</p>";
            $sTmp .= "<link href='?cssfile=footer' rel='stylesheet'>";
            // If you remove this line for example, the footerdummy is joined in the same chunk as the above footer.... and they merge and wait for both to finish
            $sTmp .= "<p style='display:none;'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>";

            $sTmp .= "<link href='?cssfile=footerdummy' rel='stylesheet'>";
        $sTmp .= "</body></html>";
        $aOutput[] = $sTmp;
    }




// COUNT LENGTH OF OUTPUT STRING / ARRAY
$sLen = 0;
for ($iL = 0 ; $iL < count($aOutput); $iL++ ) {
    $sLen += strlen($aOutput[$iL]);
}

// NOW SEND THE CONTENT LENGTH
header("Content-Length: ".$sLen);
$arr2 = str_split(implode("",$aOutput), $iDownloadRate / 1000);
foreach ($arr2 as $sChunk) {
    echo $sChunk;   // Echo a small chunk of the file.
    flush();        // Flush PHP buffers
    ob_flush();     // Send Output Buffers
    usleep(1000); // Create A Small Delay Per Chunk  |  1000000 =  second
}   

// TURN OUTPUT BUFFERING BACK ON - Normal HTML/PHP can follow from this point
ob_start();

使用上面的脚本，你也可以这样做，你回应一个css / link标签然后刷新它。这应该确保css一发送就生效。（使用浏览器中的网络视图进行调试）

Answer 2

HTML解析器逐行读取您的代码。如果他找到任何资源，他会尝试获取它的内容。获取外部文件内容的唯一方法是将其下载到临时目录。

在页面顶部放置一些重js函数，最后放入CSS文件，你会发现你的元素将是＆＃34; stock＆＃34;只需要下载CSS文件样式即可。

在控制台的网络选项卡中，您可以看到所有图像，js，css等文件都已下载。总是。

在呈现页面之前是否必须下载CSS文件？

2 个答案: