• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  文章導航

                  Data:URL 圖片

                  2019-3-13 13:56| 作者: admin| 查看: 116| 評論: 0|來自: 螞蟻部落

                  圖片是頁面中比不可少的元素,通過圖片可以讓頁面更加美觀,也讓某些功能更加醒目。

                  本站(螞蟻部落)就有大量圖片的應用,否則會在一定程度上影響用戶體驗。

                  應用圖片簡單的方式是將圖片放置于服務器指定位置,然后使用路徑引用。

                  簡單代碼實例如下:

                  [HTML] 純文本查看 復制代碼
                  <img src="image/img.gif ">

                  通過<img>標簽可以引入一個圖片元素,下面對其做進一步的分析:

                  (1).src屬性值是對應圖片在服務器的路徑,可以是相對路徑也可以是絕對路徑。

                  (2).當頁面加載到此<img>標簽位置時,會向服務器發起一次http請求。

                  (3).最后得到這個http請求的響應,獲取此圖片。

                  (4).上面想http發起請求和從服務器加載圖片需要消耗一定的性能,尤其是這樣的請求較多的時候。

                  關于路徑更多知識可以參閱相對路徑和絕對路徑一章節。

                  使用Data:URL方式引入圖片可以有效的避免上述性能問題,簡單演示如下:

                  [HTML] 純文本查看 復制代碼
                  <img src="data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7">

                  代碼分析如下:

                  (1).將圖片轉換為為base64字符串格式。

                  (2).然后通過Data:URL方式將其插入到HTML頁面中。

                  這樣就可以省去了向服務器發起請求的步驟,可以在一定程度上提高性能。

                  特別說明:可以直接將src中的字符串復制到瀏覽器地址欄查看對應的圖片內容。

                  瀏覽器支持:

                  (1).IE8完全支持,IE9+完全支持。

                  (2).edge瀏覽器支持此方式。

                  (3).谷歌瀏覽器支持此方式。

                  (4).opera瀏覽器支持此方式。

                  (5).火狐瀏覽器支持此方式。

                  (6).safria瀏覽器支持此方式。

                  根據此方式引用圖片所具有的特點,可以將其應用到更為恰當的場景。

                  比如在如下幾種場景推薦使用Data:URL引入圖片:

                  (1).圖片較小,且較多,每次都發起一次http請求會非常消耗性能。

                  (2).動態方式生成的圖片,且每次生成的圖片都不相同。

                  此種方式當前也具有一些缺點,總結如下:

                  (1).將圖片進行base64編碼之后,體積會明顯增大。

                  (2).此種方式引入的圖片不會被緩存,這是一個很大的問題,緩存機制可以有效的提高效率。

                  不過也有一些技巧可以解決緩存問題,首先看一段簡單代碼實例:

                  [CSS] 純文本查看 復制代碼
                  background-image: url("image/img.gif")

                  上面代碼可以為指定元素引入一張背景圖片,背景圖片可以很輕松進行緩存,如果換做是Data:URL方式的話,圖片無法被緩存,但是可以將CSS文件緩存器來,以達到緩存圖片大致相同的效果。

                  Data:URL方式不僅僅可以表示圖片,也可以是其他內容,本文不做過多介紹。

                  特別說明:HTTP2廣泛應用之后,此方式引入圖片的優點就沒有那么明顯,更多內容參閱HTTP協議版塊。


                  鮮花

                  握手

                  雷人

                  路過

                  雞蛋

                  最新評論

                  返回頂部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>