• <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| 查看: 273| 评论: 0|来自: 蚂蚁部落

                  图片是页面中比不可少的元素,通过图片可以让页面更加美观,也让某些功能更加醒目。

                  本站(蚂蚁部落)就有大量图片的应用,否则会在一定程度上影响用户体验。

                  应用图片简单的方式是将图片放置于服务器指定位置,然后使用路径引用。

                  简单代码实例如下:

                  [HTML] 纯文本查看 复制代码
                  <img src="image/img.gif ">

                  通过<img>标签可以引入一个图片元素,下面对其做进一步的分析:

                  (1).src属性值是对应图片在服务器的路径,可以是相对路径?#37096;?#20197;是绝对路径。

                  (2).当页面加载到此<img>标签位置时,会向服务器发起一次http请求。

                  (3).最后得到这个http请求的响应,获取此图片。

                  (4).上面想http发起请求和从服务器加载图片需要消耗一定的性能,尤其是这样的请求较多的时候。

                  关于路径更多知识可以参阅相对路径和绝对路径一章节。

                  使用Data:URL方式引入图片可以有效的避免上述性能问题,简单演示如下:

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

                  代码分析如下:

                  (1).将图片转换为为base64字符串格式。

                  (2).然后通过Data:URL方式将其插入到HTML页面中。

                  这样就可以省去了向服务器发起请求的步骤,可以在一定程度上提高性能。

                  特别?#24471;?/span>:可以直接将src中的字符串复?#39057;?#27983;览器地址栏查看对应的图片内容。

                  浏览器支持:

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

                  (2).edge浏览器支持此方式。

                  (3).谷歌浏览器支持此方式。

                  (4).opera浏览器支持此方式。

                  (5).火狐浏览器支持此方式。

                  (6).safria浏览器支持此方式。

                  根据此方式引用图片所具有的特点,可以将其应用到更为恰当的场景。

                  比如在如?#24405;?#31181;场景推荐使用Data:URL引入图片:

                  (1).图片较小,且较多,?#30475;?#37117;发起一次http请求会非常消耗性能。

                  (2).动态方式生成的图片,且?#30475;?#29983;成的图片都不相同。

                  此种方式当前也具有一些缺点,总结如下:

                  (1).将图片进行base64编码之后,体积会明显增大。

                  (2).此种方式引入的图片不会?#25442;?#23384;,这是一个很大的问题,缓存机制可以有效的提高效?#30465;?/p>

                  不过也有一些技巧可以解决缓存问题,首先看一段简单代码实例:

                  [CSS] 纯文本查看 复制代码
                  background-image: url("image/img.gif")

                  上面代码可以为指定元素引入一张背景图片,背景图片可以很轻松进行缓存,如果换做是Data:URL方式的话,图片无法?#25442;?#23384;,但是可以将CSS文件缓存器来,以达到缓存图片大致相同的效果。

                  Data:URL方式不仅仅可以表示图片,?#37096;?#20197;是其他内容,本文不做过多介绍。

                  特别?#24471;?/span>: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>