【原】HTMLページ要素ロード順研究レポート(5)------ScriptタグがFirefoxで背景画像に与える影響

20214 ワード
firefox
前節では、背景画像にはまだ研究すべき点があるようだ.
コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>        </title>

        <link rel="stylesheet" href="css/style.css" />

        <script src="script/main.js"></script>

    </head>

    <body>

        <div id="div1"><img src="images/Div1.jpg" /></div>

        <div id="div2"><img src="images/Div2.jpg" /></div>

        <div id="div3"><img src="images/Div3.jpg" /></div>

        <div id="script1"></div>

        <div id="script2"></div>

        <div>

            <div id="cssContainer1">

                <div id="cssContainer2" style="background-image:url('images/Css2.jpg')"></div>

                <div id="cssContainer3"></div>

                <div id="cssContainer5"></div>

            </div>

            <div id="cssContainer4" style="background-image:url('images/Css4.jpg')"></div>

            <div id="div4"><img src="images/Div4.jpg" /></div>

        </div>

        <style>

        #cssContainer5{

        background-image:url("images/Css5.jpg");

        }

        </style>

        <div id="div5"><img src="images/Div5.jpg" /></div>

        <div id="div6"><img src="images/Div6.jpg" /></div>

        <div id="div7"><img src="images/Div7.jpg" /></div>

        <div id="div8"><img src="images/Div8.jpg" /></div>

        <div id="div9"><img src="images/Div9.jpg" /></div>

        <div id="div10"><img src="images/Div10.jpg" /></div>

        <div id="div11"><img src="images/Div11.jpg" /></div>

        <div id="div12"><img src="images/Div12.jpg" /></div>

        <style>

        #cssContainer1{

            background-image:url("images/Css1.jpg");

        }

        </style>

    </body>

</html>

style.cssファイル:
#cssContainer1{

    background-image:url("../images/Css5.JPG");

}

#cssContainer3{

    background-image:url("../images/Css3.JPG");

}
IE7+HttpWatch：
image

IEの表現は正常で,2つのScriptタグは実際には機能しない.バックグラウンドピクチャは最後にロードされ、バックグラウンドピクチャが存在するページの位置の前後順にロードされます.
FF3.0+Firebug:
image
2つのScriptラベルは背景画像のロード順序に影響し,これは以前の理論でも説明できる.しかし、問題はCss 5画像が2回ロードされたことです!すなわち、Css 5が最初にロードされるからである.jpgの場合、後にCss 1.jpgで上書きされ、キャッシュされておらず、2回目もCss 5をロードする必要がある.jpg.
最後のコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>        </title>

        <link rel="stylesheet" href="css/style.css" />

        <script src="script/main.js"></script>

    </head>

    <body>

        <div id="div1"><img src="images/Div1.jpg" /></div>

        <div id="div2"><img src="images/Div2.jpg" /></div>

        <div id="div3"><img src="images/Div3.jpg" /></div>

        <div>

            <div id="cssContainer1">

                <div id="cssContainer2" style="background-image:url('images/Css2.jpg')"></div>

                <div id="cssContainer3"></div>

                <div id="cssContainer5"></div>

            </div>

            <div id="cssContainer4" style="background-image:url('images/Css4.jpg')"></div>

            <div id="div4"><img src="images/Div4.jpg" /></div>

        </div>

        <style>

        #cssContainer5{

        background-image:url("images/Css5.jpg");

        }

        </style>

        <div id="div5"><img src="images/Div5.jpg" /></div>

        <div id="div6"><img src="images/Div6.jpg" /></div>

        <div id="div7"><img src="images/Div7.jpg" /></div>

        <div id="div8"><img src="images/Div8.jpg" /></div>

        <div id="div9"><img src="images/Div9.jpg" /></div>

        <div id="div10"><img src="images/Div10.jpg" /></div>

        <div id="div11"><img src="images/Div11.jpg" /></div>

        <div id="div12"><img src="images/Div12.jpg" /></div>

        <style>

        #cssContainer1{

            background-image:url("images/Css1.jpg");

        }

        </style>

    </body>

</html>

ここでは第2節で背景画像のロード順を検討したときと変わらず、Scriptラベルがなく、背景画像は最後に順番にロードされます.
FF3.0+Firebug:
image
実际のCssのピクチャーは一部前にロードしました!よく見ると、ヘッドにScriptタグがペア!Firefoxはなんと頭のScriptタグまで見逃さない!ページにScriptラベルがある限り、Firefoxはどこにいても上から下への深さを優先する順序で画像をロードしますが、同級の画像では、埋め込み画像のロード重みが背景画像より高いです.このプロセスはFirefoxが少しずつページを展開し、少しずつ展開しているのを見ることができますが、FirefoxがcssContainer 1というDivに展開されたとき、最後に宣言した背景画像がFirefoxに発見されていないと、画像はロードされず、前に書かれたものや外に書かれているもの(外部のCssはダウンロードが終わったらFirefoxがすぐに解析します)、タイムリーにロードされます.
VIM関連
Goのanacondaで140秒動画ツイート