html頁面元素加載順序

時間 2019-11-30

標籤 html 頁面元素加載順序欄目 HTML 简体版

原文原文鏈接

通常來講，添加背景圖片有三種辦法：css

直接寫在標籤的style裏面，如：

<div style="background-image:url('images/Css.JPG')"></div>

寫在內聯的style定義裏面，如：

<style>
    #cssContainer1
    {
        background-image: url("images/Css3.JPG");
    }
</style>

寫在外聯的css文件裏。

其實這三種方法本質是同樣的，都是寫在了樣式表裏，而不是直接做爲Html頁面中的一個元素。那麼下面來看看下這種寫在樣式表裏的背景圖片和普通img標籤裏的背景圖片加載時有什麼不一樣：html

代碼：瀏覽器

<!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>
</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 style="background-image: url('images/Css1.JPG')">
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <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>
</body>
</html>

在第三張普通加載的圖片以後，放置了一個設置背景圖片Css.Jpg的div。

IE7+HttpWatch：服務器

FF3.0+FireBug:網絡

能夠看到，雖然背景圖片所在的div是第四個，但背景圖片「imageInCss.JPG」倒是直到最後才被加載。測試

這段代碼會看得更清楚：url

<!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" />
</head>
<body>
    <style>
        #cssContainer1
        {
            background-image: url("images/Css1.JPG");
        }
    </style>
    <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="cssContainer1" style="background-image: url('images/Css5.JPG')">
        <div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
        </div>
        <div id="cssContainer3" style="background-image: url('images/Css3.JPG')">
        </div>
        <div id="cssContainer4">
        </div>
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <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>
</body>
</html>

其中，外聯的CSS文件代碼是：spa

#cssContainer4{
background-image:url("../images/Css4.JPG");
}

頁面中引入了四個具備背景圖片的Div，cssContainer2和cssContainer3的背景圖片是經過直接定義的style，cssContainer4的背景圖片是經過外聯的css文件定義，而cssContainer1的背景圖片則經過內聯的style和直接定義的style雙重聲明瞭。並且cssContainer1這個div包含了其他三個div。測試結果以下：
IE7+HttpWatch：3d

FF3.0+FireBug:code

能夠看到，不管何種形式，背景圖片都在最後加載。並且它們的的加載順序是Css5 -> Css2-> Css3 -> Css4，其中被雙重定義的另外一張背景圖片Css1並無被加載。

那麼咱們能夠獲得以下的結論：

它們的加載順序正好與它們所對應的Div的順序相同，而與它們的style定義放置在Html中的位置無關。這裏所說的Div的順序，以Div的起始標籤爲準。
背景圖片最後加載的緣由，我的理解，應該是由於其實不管是外聯的css文件仍是內聯的或者直接定義的style，在Html中都會被無差異的視爲修飾頁面的Style，那麼這種修飾固然會放在加載「實際內容」，也就是內嵌在頁面中的圖片以後才進行。並且按照由外及內，由先到後的順序依次解析。瀏覽器會在把全部樣式，包括外聯的css文件都下載解析完成以後纔開始渲染樣式，並且會自動忽略會被覆蓋的樣式表，因此圖片Css1因爲樣式被覆蓋，也就不會被下載。

那麼這給咱們的一個重要啓示是：在一個單純由Html和Css組成的頁面中，背景圖片老是最後加載的，倘若咱們想要使用較小的背景圖片做爲佔位符，用於在加載較大的圖片或者Flash文件時給用戶以提示，大部分時候恐怕是達不到效果的，由於背景圖片有時甚至會在大圖片或Flash文件加載完成以後纔會被加載。

固然，這裏一個重要的先決條件就是「單純由Html和Css組成的頁面」，由於JavaScript會對頁面元素的加載產生極大影響，

採用和以前相似的代碼：

<!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" />
</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="cssContainer1">
        <div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
        </div>
        <script>
            var a;
            for (var i = 0; i < 1000; i++) {
                a += i;
            }
        </script>
        <div id="cssContainer3">
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
        </div>
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <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中的代碼以下：

#cssContainer3{
background-image:url("../images/Css3.JPG");
}

在應用了css樣式設置背景圖片的div中，加入了一段簡單的循環運行1000次的Javascript腳本。

IE7+HttpWatch：

FF3.0+FireBug:

這裏大概可以看出一些問題：

IE中的Css2在前面加載了。
Firefox中的Css二、Css三、Css4都在前面加載了。

再看下一段代碼：

<!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" />
</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>
    <style>
        #cssContainer1
        {
            background-image: url("images/Css1.JPG");
        }
    </style>
    <div id="cssContainer1">
        <div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
        </div>
        <script>
        </script>
        <div id="cssContainer3">
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
        </div>
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <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>
</body>
</html>

相比第一段代碼，這裏把Javascript腳本簡化爲一對空的Script標籤，並且把以前放在最後的設置cssContainer1的背景圖片的內聯style放到了script的前面。

IE7+HttpWatch：

FF3.0+FireBug:

那麼如今咱們能夠看出幾點：

不管對IE仍是FF，Javascript確實對圖片的加載順序有影響，本來應該在最後加載的背景圖片會在Javascript執行時加載。
加載不會解析Javascript以後定義的CSS，從第一段代碼中能夠看到，CSS1.jpg並無被提早加載，由於它的內聯定義放在了後面。
IE只對Javascript標籤以前的背景圖片提早加載，Javascript以後的圖片，仍是按照先加載內嵌圖片，後加載背景圖片的順序，不管Div的結構如何。而FF的狀況會複雜一些。

看下下面的代碼：

<!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" />
</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>
    <style>
        #cssContainer1
        {
            background-image: url("images/Css1.JPG");
        }
    </style>
    <div id="cssContainer1">
        <div id="cssContainer2" style="background-image: url('images/Css2.JPG')">
        </div>
        <script>
        </script>
        <div id="cssContainer3">
        </div>
    </div>
    <div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
    </div>
    <div id="div4">
        <img src="images/Div4.jpg" /></div>
    <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>
</body>
</html>

這裏相比上一段代碼，將本來包含在cssCotainer1這個div裏的cssContainer4放到了外面。IE下的表現沒有變化，看下FF的反應：

圖片CSS4.jpg被放到了最後加載！而CSS3.jpg雖然也是在Script以後才定義的，並且是放在外部Css文件中的CSS3.jpg，因爲在執行Javascript的時候Css文件已被加載完畢，卻依然被提早加載了。如今咱們能夠猜測，在Firefox中，圖片的加載順序受Javascript的影響下，同時與Div的結構有關。

本節的最後一段代碼：

<!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" />
</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>
            <script>for(var i=0;i<1000;i++){var a++}</script>
            <div id="cssContainer3">
            </div>
        </div>
        <div id="cssContainer4" style="background-image: url('images/Css4.JPG')">
        </div>
        <div id="div4">
            <img src="images/Div4.jpg" /></div>
    </div>
    <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");
}

這部分代碼和以前的差別：一是用一個新的Div套住了cssContainer一、cssContainer4和一個普通的Div4；另外在外聯的css文件中，重複定義了cssContainer1的背景圖片，另外一個定義在Html文檔的最末端。

FF3.0+FireBug:

到這裏基本能夠總結出來Firefox在Script的影響下對圖片的加載順序：

與IE不一樣，FF遵照的是另外一套DIV逐級解析的模式。受Script標籤影響的不只僅是Script標籤以前的圖片，還包括了包含Script標籤的父級標籤內的全部圖片。在同級標籤中，圖片的加載順序符合先內嵌、後背景的原則，而不一樣級的標籤，則按由先到後的順序加載。

此外，看下IE：

注意被選中的那一行，其中那個Result字段爲Abort的CSS5.jpg圖片。本來因爲外聯CSS優先級最低，CSS5.jpg應當被後定義的內聯CSS1.jpg覆蓋，不被加載，但因爲Javascript的影響，這裏卻被加載了，雖然因爲IE很快讀到了HTML的末端，發現了後定義的CSS1.jpg，取消了CSS5.jpg的加載。但若是網速較慢，HTML文檔或Javascript的執行時間較長，CSS5.jpg可能在很晚甚至所有加載完時才被取消，而在FireFox中，彷佛沒有Abort的操做，CSS5.jpg正是被徹底加載了！

這給咱們的啓示是：

若是有必須放在背景中的圖片，又但願它們能及早加載，那麼在以後添加一個空的Script標籤也許是一個好主意。
IE和FF的加載順序不一樣，爲了適應不一樣的瀏覽器，須要注意DIV的結構。
即便後來會被忽略，在瀏覽器解析文檔時，也有可能加載並不須要甚至錯誤的背景圖片，因此在設置不一樣級別的CSS樣式時，要注意。比較好的作法，固然是把全部的樣式都定義在外聯文件中，貫徹樣式和內容相分離的原則。

注：

Script標籤對圖片加載的影響和網絡狀況以及Script自己執行時長有關。當把頁面放在本地服務器上測試時，一個空的Script標籤甚至不會對圖片的加載順序產生影響，圖片依然按照前兩節的順序加載。而網絡越慢，或者Script執行時間越長（在本地服務器，通常須要萬次以上的循環），Script對圖片加載順序的影響越明顯。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。